Introduction In React, components are like Lego blocks — you can build small pieces and combine them into bigger structures. But how do these blocks talk to each other ? That’s where props come in. Props (short for properties ) let you pass data from one component to another, making your app dynamic and reusable. 🔍 What are Props? Definition: Props are inputs to components. Analogy: Think of props like arguments you pass into a function. Key Idea: Props make components flexible — the same component can display different content depending on the props it receives. 🧑‍💻 Step 1: Create a Child Component Let’s make a simple Greeting component that accepts a name prop. import React from "react"; function Greeting(props) { return <h2>Hello, {props.name}! 👋</h2>; } export default Greeting; 🧑‍💻 Step 2: Use Props in the Parent Component Now, let’s use Greeting inside App.js : import React from "react"; import Greeting from "./Greeting"; function App() { return ( <div style={{ textAlign: "center", marginTop: "50px" }}> <h1>Welcome to My React App</h1> <Greeting name="Alice" /> <Greeting name="Bob" /> <Greeting name="Charlie" /> </div> ); } export default App; 👉 Output: Welcome to My React App Hello, Alice! 👋 Hello, Bob! 👋 Hello, Charlie! 👋 🎨 What’s Happening Here? The Greeting component is reusable . Each time we call <Greeting name="..." /> , we pass a different prop. React renders the component with the given data. ✅ Conclusion Props are the glue that connects React components. They allow you to pass data down the component tree, making your app modular and flexible. 💡 Student Challenge: Create a Profile component that takes props like name , age , and city , then display them in a styled card.

Jonny Peterson

Read more