React is a well-known JavaScript library for making user interfaces. ⚛️ To build reusable and dynamic UI, React uses Components and Props. 🧩 Let's explain them in simple terms. 📚

---

What Are Components? 🧱

Think of components as building blocks of a React app. Just like how a car is made of parts (engine, wheels, seats), a React app is built using components.

Key Features of Components 🌟

• Reusable: You can create a component once and use it multiple times.

• Independent: Each component works on its own, managing its logic and appearance.

Types of Components 🏗️

Function Components :

These are simpler and written as JavaScript functions.

function Greeting() {
  return <h1>Hello, World!</h1>;
}

Class Components :

These are written as ES6 classes and were used more often before React Hooks.

class Greeting extends React.Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}

Using Components 🛠️

You can use a component by simply writing its name in JSX, like this

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

---

What Are Props? 📦

Props (short for "properties") are like arguments you give to components. 🎁 They let components receive data from their parent and use it to show changing content. 🔄

How Props Work ⚙️

Passing Props :

You pass props to a component as attributes

function App() {
  return <Greeting name="Vishal" />;
}

Using Props in the Component :

Inside the component, you access props using the props object.

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

Why Are Props Useful? 🤔

Props make components dynamic. Instead of hardcoding values, you can change them by passing different props.

Example :

function App() {
  return (
    <div>
      <Greeting name="Vishal" />
      <Greeting name="John" />
    </div>
  );
}

This will render

Hello, Vishal!
Hello, John!

Props Are Read-Only 🔒

One important thing to remember is that props cannot be changed inside a component. They are read-only. If you need to update data, you’ll use state (we'll cover this later).

Combining Components and Props 🤝:

By combining components and props, you can build complex UIs with ease. For instance, a card component could accept props for the title, description, and an image.

function Card(props) {
  return (
    <div className="card">
      <img src={props.image} alt={props.title} />
      <h2>{props.title}</h2>
      <p>{props.description}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <Card
        image="https://example.com/image1.jpg"
        title="React Basics"
        description="Learn the basics of React."
      />
      <Card
        image="https://example.com/image2.jpg"
        title="Advanced React"
        description="Dive deeper into React features."
      />
    </div>
  );
}

Quick Summary 📝:

1. Components: Independent and reusable pieces of UI.

   • Two types: Function and Class components.

   • Defined using JavaScript functions or classes.

2. Props: Short for "properties", they pass data to components.

   • Props are read-only and dynamic.

   • Passed from a parent component to a child component.

---

By learning how to use Components and Props, you can build React apps that are easy to manage and expand. 🚀 They are the basic building blocks for any React project! 🧩