React Components - Building Blocks of Your App

Components are the heart of React. They are like LEGO blocks - small pieces that you connect together to build something big!

What is a Component?

A component is a piece of your website. It's like a small, reusable part.

Think of a website like a house: - Navigation bar = One component - Footer = One component - Button = One component

You build each part separately, then put them together!

Creating Your First Component

Here's a simple component:

```javascript function Welcome() { return <h1>Hello, Welcome to React!</h1>; } ```

That's it! A component is just a JavaScript function that returns JSX.

Using Your Component

Once you create a component, you can use it like an HTML tag:

```javascript function App() { return ( <div> <Welcome /> <Welcome /> <Welcome /> </div> ); } ```

This will show "Hello, Welcome to React!" three times!

Component Rules

### 1. Component Names Start with Capital Letter

✅ **Correct:** ```javascript function Button() { ... } function UserProfile() { ... } ```

❌ **Wrong:** ```javascript function button() { ... } function userProfile() { ... } ```

### 2. Components Return JSX

Every component must return something (usually JSX):

```javascript function MyComponent() { return <h1>Hello!</h1>; // Returns JSX } ```

Practical Example - Making a Button Component

Let's make a reusable button:

```javascript function Button() { return <button>Click Me</button>; }

function App() { return ( <div> <Button /> <Button /> <Button /> </div> ); } ```

Now you have 3 buttons with just 3 lines of code!

Multiple Components Example

Let's build a simple profile card:

```javascript function ProfilePicture() { return <img src="user.jpg" alt="User" />; }

function UserName() { return <h2>Michael Smith</h2>; }

function UserBio() { return <p>I love coding!</p>; }

function ProfileCard() { return ( <div className="profile"> <ProfilePicture /> <UserName /> <UserBio /> </div> ); } ```

See how we broke everything into small components? Each component does ONE thing!

Components Inside Components

You can put components inside other components (like nesting boxes):

```javascript function Header() { return <h1>My Website</h1>; }

function Content() { return <p>Welcome to my website!</p>; }

function Footer() { return <p>© 2025 My Website</p>; }

function App() { return ( <div> <Header /> <Content /> <Footer /> </div> ); } ```

Why Use Components?

### 1. Reusability Write once, use everywhere:

```javascript function LikeButton() { return <button>👍 Like</button>; }

// Use it many times! <LikeButton /> <LikeButton /> <LikeButton /> ```

### 2. Organization Your code stays clean and organized. Instead of one huge file, you have many small, simple files.

### 3. Easy to Fix If a button is broken, you only fix it in one place, not everywhere on your website!

Arrow Function Components

You can also write components using arrow functions:

```javascript const Welcome = () => { return <h1>Hello!</h1>; }; ```

Both ways work the same. Use what you like!

Complete Example

Let's build a simple blog post component:

```javascript function BlogPost() { return ( <article> <h2>My First Blog Post</h2> <p>Posted on: January 1, 2025</p> <p>This is my first blog post about React. It's really cool!</p> <button>Read More</button> </article> ); }

function App() { return ( <div> <h1>My Blog</h1> <BlogPost /> <BlogPost /> <BlogPost /> </div> ); } ```

Remember

- Components are like LEGO blocks - Start component names with capital letters - Components must return JSX - You can use components inside other components - Break big things into small components

> Next lesson: We'll learn about Props - how to pass data to components to make them dynamic!