React

1. What is a Component?

A Component is a self-contained, independent, and reusable piece of user interface. Think of components as custom HTML elements with their own logic, appearance, and lifecycle.

Functional Components vs Legacy Class Components

function Welcome(props) {
    return <h1>Hello, {props.name}!</h1>;
}

class Welcome extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}!</h1>;
    }
}

2. What is JSX? (JavaScript XML)

JSX stands for JavaScript XML. It is a syntax extension for JavaScript that looks similar to HTML, allowing you to write your UI structure right alongside your component logic.

// 1. What you write in JSX:
const element = <h1 className="title">Hello React!</h1>;

// 2. What the compiler outputs (compiled JavaScript):
const element = React.createElement(
    'h1',
    { className: 'title' },
    'Hello React!'
);

// 3. What React.createElement produces (a Virtual DOM JavaScript object):
{
    type: 'h1',
    props: {
        className: 'title',
        children: 'Hello React!'
    }
}

3. The 5 Golden Rules of JSX

Because JSX is transpiled directly into JavaScript function calls, it obeys strict syntactic rules:

// ✅ Valid Fragment syntax:
return (
    <>
        <h1>Title</h1>
        <p>Paragraph</p>
    </>
);

function MyButton() { // Capital "M"
    return <button>Click</button>;
}
// Usage: <MyButton />

<img src="avatar.png" alt="User" />
<input type="text" placeholder="Name" />
<br /> <hr />

// className instead of class
<div className="card-box">
// htmlFor instead of for
<label htmlFor="email">Email</label>
<input id="email" />

const cardStyles = {
    backgroundColor: "#F0EBFF", // camelCase instead of background-color
    fontSize: "18px",           // camelCase instead of font-size
    padding: "20px",
    borderRadius: "12px"        // camelCase instead of border-radius
};

function StyledCard() {
    return (
        <div style={{ backgroundColor: "#F0EBFF", padding: "16px", borderRadius: "8px" }}>
            <h3 style={{ color: "#6C4CE8", margin: 0 }}>Custom Styled Card</h3>
        </div>
    );
}

4. Dynamic JavaScript in JSX with Curly Braces { }

Whenever you want to switch from writing markup to evaluating JavaScript, wrap the expression in single curly braces { }. You can embed variables, object properties, array operations, arithmetic, and ternary expressions:

function UserGreeting() {
    const user = { firstName: "Anshuman", lastName: "Singh", score: 95 };
    const isPremium = true;
    const notifications = ["New message", "System update", "Course unlocked"];

    return (
        <div className="user-profile-card">
            {/* 1. Variable & Property Interpolation */}
            <h2>{user.firstName} {user.lastName}</h2>
            
            {/* 2. JavaScript String Methods & Math Calculations */}
            <p>Initials: {user.firstName[0]}.{user.lastName[0]}.</p>
            <p>Points to Next Tier: {100 - user.score} pts</p>

            {/* 3. Dynamic Conditional Ternary Expression */}
            <span className={isPremium ? "badge-gold" : "badge-standard"}>
                {isPremium ? "⭐ Premium Member" : "Standard Tier"}
            </span>

            {/* 4. Reading Array Length */}
            <p>You have {notifications.length} pending alerts.</p>
        </div>
    );
}

5. Component Composition & The children Prop

Components can wrap other arbitrary JSX elements or nested components using the special props.children identifier. This enables building reusable container wrappers (Cards, Modals, Accordions, Page Layouts):

// 1. Reusable Container Component
function ModalDialog({ title, isOpen, children }) {
    if (!isOpen) return null;

    return (
        <div className="modal-backdrop">
            <div className="modal-content">
                <div className="modal-header">
                    <h3>{title}</h3>
                </div>
                <div className="modal-body">
                    {/* Nested content passed between <ModalDialog>...</ModalDialog> */}
                    {children}
                </div>
            </div>
        </div>
    );
}

// 2. Usage: Injecting any custom JSX into the children slot
function App() {
    return (
        <ModalDialog title="Confirm Enrollment" isOpen={true}>
            <p>Are you ready to begin the React Mastery Track?</p>
            <button className="confirm-btn">Yes, Let's Go!</button>
        </ModalDialog>
    );
}

6. Top Interview Questions & Common Pitfalls

7. Hands-On Practice Challenges

Sharpen your JSX and component development skills with these hands-on challenges. Click "Solve Challenge" to open the code editor!