Components and JSX

Components and JSX are two of the most important building blocks of React. Components provide the structure and reuse model, while JSX provides a readable way to describe the UI that a component should render.

1 What is a Component?

A React component is a reusable unit of UI. A component can receive data, contain application logic, handle events, and return the UI representation that React should render.

Modern React applications primarily use function components.

function UserProfile() {
    return <h2>User Profile</h2>;
}

A component name should normally start with an uppercase letter. This allows JSX to distinguish a React component from a native HTML element.

2 Why Component-Based Design?

Large screens can become difficult to maintain when all markup and behavior are placed in one component. Component-based design divides the UI into meaningful pieces with clear responsibilities.

For example, an e-commerce page can be divided into Header, SearchBar, ProductList, ProductCard, CartSummary, and Footer components.

3 Component Composition

Components can be combined to create larger components. This is called composition.

function ProductCard() {
    return <article>Product information</article>;
}

function ProductList() {
    return (
        <section>
            <ProductCard />
            <ProductCard />
        </section>
    );
}

Composition allows a large UI to be constructed from smaller units.

4 What is JSX?

JSX is a syntax extension that allows JavaScript code to describe UI using markup-like syntax. It looks similar to HTML, but it follows JavaScript and React rules.

const title = "React";

function App() {
    return <h1>Learn {title}</h1>;
}

JSX is transformed by the build tooling into JavaScript expressions that React can use. JSX itself is not HTML being directly sent to the browser.

5 JSX Expressions

JavaScript expressions can be placed inside JSX using curly braces.

function Welcome() {
    const name = "Chakrapani";

    return <h1>Hello, {name}</h1>;
}

Expressions can include variables, calculations, function calls, and conditional expressions.

const price = 100;
return <p>Total: {price * 2}</p>;

6 JSX Rules

• A component normally returns one root element or a fragment.
• HTML attributes use JSX naming conventions such as className.
• JavaScript expressions are placed inside curly braces.
• Elements must be properly closed.
• Event handlers use camelCase names such as onClick.
• React components use PascalCase names such as UserProfile.
• Some HTML attribute names differ in JSX, such as className and htmlFor.

7 JSX Attribute Example

function Button() {
    const label = "Save";

    return (
        <button className="primary-button" onClick={() => console.log(label)}>
            {label}
        </button>
    );
}

The example demonstrates that JSX can combine markup with JavaScript expressions and event handlers.

8 Fragments

A component may need to return multiple sibling elements without introducing an unnecessary wrapper element. React fragments solve this problem.

function UserDetails() {
    return (
        <>
            <h2>User</h2>
            <p>User details</p>
        </>
    );
}

9 Parent and Child Components

A component hierarchy normally has parent and child components. The parent can compose the child components and pass information to them using props.

flowchart TD
A[App] --> B[Header]
A --> C[ProductList]
C --> D[ProductCard]
C --> E[ProductCard]
A --> F[Footer]

10 Event Handling

React uses event handler properties such as onClick, onChange, and onSubmit. The handler is a function that React calls when the corresponding event occurs.

function SaveButton() {
    function handleSave() {
        console.log("Saved");
    }

    return <button onClick={handleSave}>Save</button>;
}

A common mistake is calling the function during rendering instead of passing the function.

// Calls immediately during render
<button onClick={handleSave()}>Save</button>

// Passes the function
<button onClick={handleSave}>Save</button>

11 JSX vs HTML

12 Component Lifecycle at a High Level

For function components, it is useful to think in terms of rendering and updates rather than the older class-component lifecycle terminology. A component renders when React needs to determine its UI, and React may later commit the resulting changes to the DOM.

Side effects such as subscriptions, network synchronization, or timers are handled with mechanisms such as effects rather than being performed directly during rendering.

13 Common Mistakes

• Starting component names with lowercase letters.
• Using class instead of className.
• Returning multiple sibling elements without a parent or fragment.
• Putting statements such as ordinary if blocks directly inside JSX expression braces.
• Calling event handlers during render instead of passing a function.
• Putting expensive side effects directly into the render body.

14 Important Concepts

15 Interview Questions

1. What is a React component?
2. Why should component names start with an uppercase letter?
3. What is JSX?
4. Is JSX HTML?
5. What are the major JSX rules?
6. What is component composition?
7. What is a React Fragment?
8. What is the difference between class and className?
9. How does event handling work in React?
10. Why should you pass onClick={handleClick} instead of onClick={handleClick()}?

16 Key Takeaways

• Components divide the UI into reusable units.
• JSX makes UI structure readable inside JavaScript.
• JSX follows JavaScript and React rules rather than being ordinary HTML.
• Components can be composed into parent-child hierarchies.
• Event handlers are passed as functions.
• Fragments allow multiple elements without an unnecessary DOM wrapper.

Conclusion

Components provide the architecture of a React UI, while JSX provides a convenient syntax for describing that UI. Once components, composition, JSX expressions, and event handling are clear, props and state become the natural next step because they provide the data and changing behavior that components need.