Explore Insights, Research, and Innovations
in react
A community-driven platform where students, developers, and tech enthusiasts share ideas, publish projects, discuss innovations, and explore the future of AI and modern technology.
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. 🖼 Suggested Visuals A diagram showing Parent → Child with arrows labeled “props.” A screenshot of the app showing multiple greetings. ✅ 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.
IntroductionReact is one of the most popular JavaScript libraries for building user interfaces. It’s powerful, flexible, and widely used in modern web development. In this post, we’ll start with the basics: creating a simple app that displays a message and lets you click a button to increase a counter.Key Concepts You’ll LearnComponents: The building blocks of React apps.JSX: A syntax that looks like HTML but works inside JavaScript.State: How React remembers values between renders.Events: Handling user actions like button clicks.Step 1: Setting UpIf you don’t already have a React project, you can create one using:bashnpx create-react-app my-first-app cd my-first-app npm start This will start a development server and open your app in the browser.Step 2: Create Your First ComponentOpen src/App.js and replace the content with:import React, { useState } from "react"; function App() { // Declare a state variable called "count" const [count, setCount] = useState(0); return ( <div style={{ textAlign: "center", marginTop: "50px" }}> <h1>Hello, React World! 👋</h1> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click Me </button> </div> ); } export default App; What’s Happening Here?useState(0) → Creates a state variable count starting at 0.setCount(count + 1) → Updates the state when the button is clicked.Every time state changes, React re-renders the component with the new value.Suggested VisualsA screenshot of the app showing the counter.A diagram of the React component lifecycle: Render → User Click → State Update → Re-render.ConclusionYou’ve just built your first interactive React app! 🎉 This simple counter demonstrates the core idea of React: UI updates automatically when state changes.💡 Student Challenge: Add another button that decreases the counter, and a reset button that sets it back to zero.