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:

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:

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:

function Button() { ... }
function UserProfile() { ... }

❌ Wrong:

function button() { ... }
function userProfile() { ... }

2. Components Return JSX

Every component must return something (usually JSX):

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

Practical Example - Making a Button Component

Let's make a reusable button:

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:

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):

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:

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:

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:

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!