React Components

A React component is a reusable unit of user interface.

function Welcome() {

    return (
        <h1>Welcome to React</h1>
    );

}

Here, Welcome is a React component.

Components help developers divide a large application into smaller parts.

Large Application
       |
       +-- Header
       +-- Navbar
       +-- Sidebar
       +-- Content
       +-- Footer

Each part can be represented by a separate component.

The same component can be used multiple times.

function Button() {

    return (
        <button>Click Me</button>
    );

}

The component can then be rendered in multiple places.

A component can be used like a custom HTML element.

function App() {

    return (
        <div>
            <Button />
        </div>
    );

}

Here, Button is a React component.

React component names should start with an uppercase letter.

function Header() {
    return <h1>Header</h1>;
}

The capital letter helps React distinguish components from normal HTML elements.

Lowercase JSX names are generally interpreted as built-in HTML elements.

<div>
    <h1>Hello</h1>
</div>

Custom React components should use names such as Header, StudentCard, or LoginForm.

A functional component is a JavaScript function that returns JSX.

function Welcome() {

    return (
        <h1>Welcome</h1>
    );

}

Components can also be written using arrow functions.

const Welcome = () => {

    return (
        <h1>Welcome</h1>
    );

};

A component can be exported so that another file can import it.

function Header() {

    return (
        <h1>My Website</h1>
    );

}

export default Header;

An exported component can be imported into another file.

import Header from "./Header";

function App() {

    return (
        <Header />
    );

}

export default App;

Components are commonly stored in a separate folder.

src/
 |
 +-- components/
 |     +-- Header.jsx
 |     +-- Footer.jsx
 |     +-- Button.jsx
 |
 +-- App.jsx
 +-- main.jsx

function Header() {

    return (
        <header>
            <h1>My Website</h1>
        </header>
    );

}

export default Header;

The header can be reused throughout the application.

function Footer() {

    return (
        <footer>
            <p>Copyright 2026</p>
        </footer>
    );

}

export default Footer;

Multiple components can be combined inside another component.

function App() {

    return (
        <div>
            <Header />
            <MainContent />
            <Footer />
        </div>
    );

}

When one component renders another component, the first component can be considered the parent and the rendered component the child.

function Parent() {

    return (
        <Child />
    );

}

function Child() {

    return (
        <p>I am a child component.</p>
    );

}

A component can return multiple nested JSX elements.

function StudentCard() {

    return (
        <div className="card">

            <h2>Rahul Kumar</h2>

            <p>
                Course: React
            </p>

            <button>
                View Profile
            </button>

        </div>
    );

}

A component can contain JavaScript variables and logic before its return statement.

function Student() {

    const name = "Rahul";
    const age = 21;

    return (
        <div>
            <h2>{name}</h2>
            <p>Age: {age}</p>
        </div>
    );

}

Components can contain event handlers.

function Button() {

    function handleClick() {
        alert("Hello React");
    }

    return (
        <button onClick={handleClick}>
            Click Me
        </button>
    );

}

Components can use React Hooks such as useState to manage changing data.

import { useState } from "react";

function Counter() {

    const [count, setCount] = useState(0);

    return (
        <button onClick={() => setCount(count + 1)}>
            Count: {count}
        </button>
    );

}

The same component can be rendered multiple times.

function Button() {

    return (
        <button>Click Me</button>
    );

}

function App() {

    return (
        <div>

            <Button />
            <Button />
            <Button />

        </div>
    );

}

A large interface can be created by combining smaller components.

App
 |
 +-- Header
 |
 +-- Navbar
 |
 +-- MainContent
 |     |
 |     +-- StudentCard
 |     +-- CourseCard
 |
 +-- Footer

function Button() {

    return (
        <button className="btn">
            Submit
        </button>
    );

}

export default Button;

A reusable button can later be enhanced using props.

function Card() {

    return (
        <div className="card">

            <h2>React Course</h2>

            <p>
                Learn React step by step.
            </p>

        </div>
    );

}

export default Card;

Components make applications easier to maintain because related UI and logic can be separated into smaller files.

Large File
    ↓
Split into Components
    ↓
Header
Navbar
Sidebar
Content
Footer

If the same UI appears in multiple places, it can often be converted into a reusable component.

StudentCard
    ↓
Student 1
Student 2
Student 3
Student 4

The same component structure can be reused for different data.

src/
 |
 +-- components/
 |     |
 |     +-- Header.jsx
 |     +-- Footer.jsx
 |     +-- Navbar.jsx
 |     +-- Button.jsx
 |     +-- StudentCard.jsx
 |
 +-- pages/
 |     +-- Home.jsx
 |     +-- About.jsx
 |
 +-- App.jsx
 +-- main.jsx

• Start component names with an uppercase letter.
• Use meaningful names.
• Use PascalCase for component names.
• Keep names related to the component's purpose.
• Avoid unclear names such as Box1 or Thing.

StudentCard
LoginForm
NavigationBar
CourseList

App
 |
 +-- Header
 |
 +-- Main
 |    |
 |    +-- CourseCard
 |    +-- CourseCard
 |    +-- CourseCard
 |
 +-- Footer

This type of component tree makes the structure of an application easier to understand.

• Keep components focused on a clear responsibility.
• Reuse components when the same UI appears repeatedly.
• Use meaningful component names.
• Keep large components manageable.
• Separate reusable components into their own files when useful.
• Use props to make components flexible.
• Use state when a component needs changing data.
• Avoid unnecessary duplication.
• Build large interfaces from smaller components.

function Header() {

    return (
        <header>
            <h1>My React Website</h1>
        </header>
    );

}

function StudentCard() {

    const name = "Rahul";
    const course = "React";

    return (
        <div className="card">

            <h2>{name}</h2>

            <p>
                Course: {course}
            </p>

            <button>
                View Profile
            </button>

        </div>
    );

}

function Footer() {

    return (
        <footer>
            <p>Learning React</p>
        </footer>
    );

}

function App() {

    return (
        <div>

            <Header />

            <main>
                <StudentCard />
                <StudentCard />
            </main>

            <Footer />

        </div>
    );

}

export default App;

This example demonstrates multiple components, component reuse, nesting, JavaScript variables, JSX, and component composition.