– Guided Study Workspace

1. What Is a React Component?

A React Component is a self-contained, reusable piece of user interface (UI). Under the hood, modern React components are regular JavaScript functions that accept inputs (called props) and return JSX markup describing what should render in the browser DOM.

Component Composition Architecture Diagram

<App /> (Root Component)

➔

➔

➔

Live Browser UI

2. Why Components Are Important

1. Reusability (DRY)

Build a <Button /> or <Card /> once, reuse it 500 times across your application.

2. Maintainability

Fix a bug in the <Navbar /> component and it automatically updates everywhere.

3. Separation of Concerns

Each component manages its own isolated layout, logic, and internal state.

3. Creating Your First Component

To create a component, declare a JavaScript function with a capital letter (PascalCase) that returns JSX:

// Greeting.jsx
export function Greeting() {
return <h1 className="title">Hello from Pathubs!</h1>;
}

4. Functional Components

Modern React exclusively uses Functional Components. They can be written as standard function declarations or ES6 arrow functions:

// Standard function declaration
export function Header() {
return <header>Welcome to Pathubs</header>;
}

// Arrow function syntax
export const Footer = () => <footer>© 2026 Pathubs</footer>;

5. JSX and Components

JSX (JavaScript XML) allows you to write HTML-like syntax directly inside JavaScript. Key rules:

Use className instead of class (since class is a reserved keyword in JS).
Use camelCase for HTML attributes (e.g. onClick, tabIndex, ariaLabel).
Embed JavaScript expressions inside curly braces: <h1>{userName.toUpperCase()}</h1>.

6. Returning UI From a Component (Fragments)

A component must return a single top-level parent element. If you don't want to add extra <div> wrappers into the DOM, use a React Fragment (<>...</>):

export function ProfileBio() {
  return (
    <>
      <h2>Aarav Sharma</h2>
      <p>Frontend Developer</p>
    </>
  );
}

7. Component Composition

Component Composition is the art of nesting smaller components inside parent components like Lego bricks:

export function Dashboard() {
  return (
    <main>
      <Navbar />
      <UserProfileCard />
      <ActivityFeed />
    </main>
  );
}

8. Reusable Components

A reusable component accepts dynamic inputs (props) so it can adapt to different situations across the app:

// Reusable Button
export function Button({ text, variant = "primary" }) {
return <button className=btn btn-${variant}>{text}</button>;
}

9. Props & Passing Data Between Components

Unidirectional Data Flow Diagram (Parent ➔ Props ➔ Child)

Parent (<App />)
name="Aarav" role="Lead"

════ Props Flow ════➔

Child (<UserCard />)
props.name, props.role

// 1. Parent passes props
<UserCard name="Priya Patel" role="UI Designer" isOnline={true} />

// 2. Child receives and destructures props
export function UserCard({ name, role, isOnline }) {
  return (
    <div className="user-card">
      <h3>{name}</h3>
      <p>{role}</p>
      {isOnline && <span className="status-dot">Online</span>}
    </div>
  );
}

11. Parent and Child Components

The component that renders another component is the Parent. The rendered component is the Child. Props flow strictly downward from parent to child.

12. Rendering Multiple Components (.map)

const team = [
  { id: 1, name: "Aarav", role: "Architect" },
  { id: 2, name: "Priya", role: "Designer" },
];

export function TeamList() {
  return (
    <div>
      {team.map(member => (
        <UserCard key={member.id} name={member.name} role={member.role} />
      ))}
    </div>
  );
}

13. Component Naming & File Structure

src/
├── components/
│   ├── Button/
│   │   ├── Button.jsx
│   │   └── Button.module.css
│   ├── Navbar/
│   │   └── Navbar.jsx
│   └── UserCard/
│       └── UserCard.jsx
└── App.jsx

14. Common Component Mistakes

Lowercase component names: <myButton /> is treated by React as an unknown HTML element. Always capitalize: <MyButton />.
Mutating props directly: props.count++ will cause errors. Props are strictly read-only.
Forgetting the key prop in lists: Leads to rendering glitches and sluggish list updates.
Defining components inside other components: Always declare components at the top level of the file to prevent re-creation on every render.

15. Building a Small Component-Based UI

See how clean and readable React code is when divided into small, atomic components:

export function App() {
  return (
    <div className="app-container">
      <Navbar title="Pathubs Hub" />
      <section className="content">
        <UserCard name="Aarav" role="Frontend Architect" />
      </section>
    </div>
  );
}

16. React Component Best Practices

Keep components small and focused on doing one task well.
Use Prop destructuring at the top of the function for clarity.
Provide sensible default values for optional props.
Separate presentational UI components from stateful data-fetching components.

React Components: Building Modular, Reusable UIs