React Components Basics

# React Components Basics

1. Introduction #

2. Learning Objectives #

• Define what a React component is.

• Understand the basic structure of a component.

• Import and export components between files.

• Understand component composition (nesting components).

• Create a modular UI architecture.

3. Beginner-Friendly Explanations #

What are Components? #

Why Use Components? #

1. 1. Reusability: Write code once, use it everywhere. If you build a nice <Button /> component, you can use it 50 times across your app. If you need to change the button's color, you change it in *one* file, and all 50 buttons update instantly!

1. 2. Organization: It's much easier to maintain 10 small files with 50 lines of code each than one massive file with 500 lines of code.

4. Component Structure and Syntax #

Rule 1: Capitalize Component Names #

```jsx id="ch4_ex1" // Example React component // 1. Define the function with a Capital letter function Sidebar() { // 2. Return JSX return ( <aside className="sidebar"> <ul> <li>Home</li> <li>About</li> <li>Contact</li> </ul> </aside> ); }

export default Sidebar; // 3. Export it so other files can use it

## 5. Component Composition
Component composition is the process of combining small, simple components to build larger, more complex ones. This is exactly how LEGOs work!

Let's build a layout with three separate components: `Header`, `MainContent`, and `Footer`, and compose them inside an `App` component.

jsx id="ch4_ex2" // Example React component - The small building blocks

function Header() { return <header><h1>My Awesome Website</h1></header>; }

function MainContent() { return ( <main> <h2>Welcome!</h2> <p>This is the main content area of the application.</p> </main> ); }

function Footer() { return <footer><p>&copy; 2026 My Awesome Website</p></footer>; }

// Composing them in the parent 'App' component function App() { return ( <div className="app-container"> <Header /> <MainContent /> <Footer /> </div> ); }

## 6. Real-World Examples
Look at YouTube. What components do you see?
- `<TopNavbar />` (Contains the search bar and profile icon)
- `<Sidebar />` (Contains links to Home, Shorts, Subscriptions)
- `<VideoGrid />` (The main area containing multiple videos)
  - Inside `<VideoGrid />`, there are dozens of `<VideoThumbnail />` components!

## 7. Output Explanations
When React renders the `App` component in the example above, it encounters `<Header />`. It pauses, goes to the `Header` function, grabs the `<h1>` tag, and places it in the DOM. It does the same for `<MainContent />` and `<Footer />`. The final HTML output sent to the browser looks like this:

html <!-- Example HTML Output --> <div class="app-container"> <header><h1>My Awesome Website</h1></header> <main> <h2>Welcome!</h2> <p>This is the main content area of the application.</p> </main> <footer><p>&copy; 2026 My Awesome Website</p></footer> </div>

## 8. Common Mistakes
- **Forgetting to Export/Import:** If you create a component in `Header.jsx`, you must write `export default Header;` at the bottom, and `import Header from './Header';` in the file where you want to use it.
- **Lowercase Names:** Naming a component `myButton` instead of `MyButton`. React will think `<myButton />` is an invalid HTML tag.
- **Returning nothing:** A component function must have a `return` statement that returns JSX.

## 9. Best Practices
- **One Component Per File:** Create a new file for every component (e.g., `Navbar.jsx`, `Footer.jsx`). This makes finding and fixing code incredibly easy.
- **Keep it simple:** If a component grows too large, identify parts of it that can be extracted into smaller sub-components.

## 10. Exercises
1. Create a `Button` component that returns a styled HTML `<button>`.
2. Create a `Card` component that returns a `div` containing an image, a title, and the `Button` component you just created.

## 11. Mini Project: Header/Footer Components architecture
Let's simulate a real project file structure.

**File 1: Header.jsx**

jsx id="ch4projheader" // Example React component export default function Header() { return ( <header className="bg-gray-800 text-white p-4 shadow-md flex justify-between items-center"> <div className="text-xl font-bold">TechBlog</div> <nav className="flex gap-4"> <a href="#" className="hover:text-blue-400">Articles</a> <a href="#" className="hover:text-blue-400">Tutorials</a> </nav> </header> ); }

**File 2: Footer.jsx**

jsx id="ch4projfooter" // Example React component export default function Footer() { return ( <footer className="bg-gray-900 text-gray-400 text-center p-6 mt-10"> <p>Built with React & Tailwind CSS.</p> </footer> ); }

**File 3: App.jsx**

jsx id="ch4projapp" // Example React component import Header from './Header'; import Footer from './Footer';

export default function App() { return ( <div className="min-h-screen flex flex-col bg-gray-50"> <Header /> {/* Main content takes up remaining space */} <main className="flex-grow p-8 max-w-4xl mx-auto w-full"> <h1 className="text-3xl font-bold mb-4">Latest Tech News</h1> <div className="bg-white p-6 rounded-lg shadow border"> <h2 className="text-xl font-semibold">React is awesome</h2> <p className="mt-2 text-gray-600">Component composition makes UI development a breeze.</p> </div> </main>

<Footer /> </div> ); } ``