A Component is the fundamental building block of a React user interface.

In traditional web development, a webpage is built as one monolithic HTML file. In React, a webpage is broken down into small, isolated, reusable pieces of UI called Components.

Analogy:

Think of a React component like a LEGO brick. You can create individual bricks (buttons, headers, cards) and assemble them together to build complex structures (dashboards, e-commerce stores, social media feeds).

Technically, a React Component is a JavaScript function that accepts inputs (called Props) and returns a React element tree (written in JSX).

React components can be written in two ways:

• 1. Functional Components (Modern Standard):

Simple JavaScript functions that return JSX. Since React 16.8, functional components can manage state and side effects using React Hooks.

function Welcome() {
  return <h1>Welcome to React!</h1>;
}

• 2. Class Components (Legacy / Historical):

ES6 JavaScript classes extending React.Component requiring a render() method.

class Welcome extends React.Component {
  render() {
    return <h1>Welcome to React!</h1>;
  }
}

Industry Standard: Modern React codebases exclusively use Functional Components with Hooks. Class components are considered legacy.

React Component names MUST start with a Capital Letter (PascalCase).

• Correct: <Navbar />, <ProductCard />, <UserProfile />
• Incorrect: <navbar />, <productCard />, <user_profile />

Why PascalCase is Mandatory:

React uses the first letter of a JSX tag to determine whether it is dealing with a built-in HTML tag or a custom React component:

• Lowercase tags (<div />, <button />, <p />) are compiled to standard HTML strings: React.createElement('div').
• Capitalized tags (<Navbar />) are compiled as JavaScript component functions: React.createElement(Navbar).

Component Composition is the practice of combining small components to form larger components.

Why Reusability Matters:

Imagine you need to display 100 product items on an e-commerce website. Without components, you would duplicate 100 blocks of HTML code. With a reusable <ProductCard /> component, you write the layout once and reuse it 100 times with different data.

React components organize into a Parent-Child Tree Hierarchy:

• Parent Component: A component that renders another component inside its return statement.
• Child Component: A component nested inside a parent component.

          [ App (Parent Root) ]
           /        |        \
    [ Navbar ]  [ Hero ]  [ Footer ]
                    |
            [ ProductList ]
                    |
            [ ProductCard ] (Child)

React applications use ES6 JavaScript modules (import and export) to split code across separate files.

A file can have only ONE default export.

Export Syntax:

// Navbar.jsx
export default function Navbar() {
  return <nav>My Navbar</nav>;
}

Import Syntax:

When importing a default export, you do not use curly braces. You can even rename the imported component if desired:

// App.jsx
import Navbar from './Navbar';
// OR import MyCustomNavbar from './Navbar';

A file can have MULTIPLE named exports.

Export Syntax:

// Buttons.jsx
export function PrimaryButton() {
  return <button className="btn-primary">Click Me</button>;
}

export function SecondaryButton() {
  return <button className="btn-secondary">Cancel</button>;
}

Import Syntax:

Named exports MUST be imported inside curly braces {} matching the exact exported name:

// App.jsx
import { PrimaryButton, SecondaryButton } from './Buttons';

1. Defining a Component inside another Component: Never nest component function definitions inside another component function; it causes full component re-instantiation on every render.
2. Forgetting to return JSX: A component must return valid JSX or null.
3. Using Lowercase Names: Writing <buttonCard /> instead of <ButtonCard />.

Q1: What is a Component in React?

*Answer*: A component is a self-contained, reusable block of UI logic and template written in JavaScript (JSX) that returns React elements.

Q2: What is the difference between Default Export and Named Export?

*Answer*: A file can have only one default export (imported without {}), whereas a file can have multiple named exports (imported with {} using exact names).

Let's build a complete multi-component application matching this exact architecture hierarchy:

📁 src/

├── 📄 App.jsx (Root Parent)
├── 📁 components/
│   ├── 📄 Navbar.jsx
│   ├── 📄 Hero.jsx
│   ├── 📄 ProductList.jsx
│   ├── 📄 ProductCard.jsx
│   └── 📄 Footer.jsx