What's a React Component? 🤔

A React component is a reusable piece of your website - like the header, navigation menu, buttons, or cards that you see on websites. Let's look at some examples you see every day:

1. Facebook Post: Each post you see is a component

   function FacebookPost() {
     return (
       <div>
         <div>User's Name and Profile Picture</div>
         <div>Post Content</div>
         <div>Like, Comment, Share Buttons</div>
       </div>
     );
   }

2. Instagram Story: Those circles at the top? Each is a component

   function StoryCircle() {
     return (
       <div>
         <img src="profile-pic.jpg" />
         <span>Username</span>
       </div>
     );
   }

3. YouTube Video Card: Each video thumbnail is a component

   function VideoCard() {
     return (
       <div>
         <img src="thumbnail.jpg" />
         <h3>Video Title</h3>
         <p>Channel Name</p>
         <span>Views • Time</span>
       </div>
     );
   }

Think of your favorite website - it's made up of many small pieces working together. Each of these pieces can be a React component! You can:

• Create it once

• Use it many times

• Change it easily

• Keep your code organized

For example, a simple button component:

function Button() {
  return <button>Click me!</button>;
}

// Now you can use this button anywhere:
<Button />
<Button />
<Button />

Types of Components You'll See 📦

We have two ways to create components:

1. The Modern Way (Function Components):

   function WelcomeMessage() {
     return <h1>Hello Friends!</h1>;
   }

2. The Old Way (Class Components):

   class WelcomeMessage extends React.Component {
     render() {
       return <h1>Hello Friends!</h1>;
     }
   }

💡 Quick Tip: Stick to the modern way (function components). It's easier!

Making Components Customizable with Props 🎨

Props are like settings for your components. Look at this:

function GreetingCard({ name, message }) {
  return (
    <div className="card">
      <h2>Hi {name}!</h2>
      <p>{message}</p>
    </div>
  );
}

// Now you can use it different ways:
<GreetingCard 
  name="Sarah" 
  message="Have a great day!" 
/>

<GreetingCard 
  name="John" 
  message="Happy Birthday!" 
/>

Why Do We Use Components? 🌟

Let's understand with a real example - a social media post:

function SocialPost({ username, content, likes }) {
  return (
    <div className="post">
      {/* User Info */}
      <div className="header">
        <img src={`/avatars/${username}.jpg`} alt={username} />
        <h3>{username}</h3>
      </div>

      {/* Post Content */}
      <p>{content}</p>

      {/* Like Button */}
      <button>❤️ {likes} likes</button>
    </div>
  );
}

// Use it many times:
<SocialPost 
  username="cool_coder"
  content="Just learned React!"
  likes={42}
/>

Benefits:

1. Write once, use everywhere

2. Easy to update

3. Keep your code organized

Components Working Together 🤝

Components can use other components - like building with different LEGO pieces:

// A simple button component
function LikeButton({ count }) {
  return <button>❤️ {count} likes</button>;
}

// A comment component
function CommentSection({ comments }) {
  return (
    <div>
      <h3>Comments ({comments.length})</h3>
      {comments.map(comment => (
        <p>{comment}</p>
      ))}
    </div>
  );
}

// Using them together
function Post({ content, likes, comments }) {
  return (
    <div>
      <p>{content}</p>
      <LikeButton count={likes} />
      <CommentSection comments={comments} />
    </div>
  );
}

Remember! 🧠

• Components are like LEGO blocks

• They can be as simple or complex as you need

• Use props to make them flexible

• Keep them small and focused

• Modern React uses function components

Level up your React skills with DevAwait! 🚀