Mohit Decodes

Now, let's move to the next topic in Web Development Roadmap:

*⚛️ React Basics (Components, Props, State)*

Now you move from simple websites → modern frontend apps.

React is used in real companies like Netflix, Facebook, Airbnb.

*⚛️ What is React*
React is a JavaScript library for building UI.
👉 Developed by Facebook
👉 Used to build fast interactive apps
👉 Component-based architecture
Simple meaning
- Break UI into small reusable pieces
Example
- Navbar → component
- Card → component
- Button → component

*🧱 Why React is Used*
Without React
- DOM updates become complex
- Code becomes messy
React solves:
✅ Faster UI updates (Virtual DOM)
✅ Reusable components
✅ Clean structure
✅ Easy state management

*🧩 Core Concept 1: Components*
❓ What is a component
A component is a reusable UI block.
Think like LEGO blocks.

*✍️ Simple React Component*
function Welcome() {
return <h1>Hello User</h1>;
}
Use component
<Welcome />

*📦 Types of Components*
🔹 Functional Components (Most Used)
function Header() {
return <h1>My Website</h1>;
}
🔹 Class Components (Old)
Less used today.

*✅ Why components matter*
- Reusable code
- Easy maintenance
- Clean structure

*📤 Core Concept 2: Props (Passing Data)*
❓ What are props
Props = data passed to components.
Parent → Child communication.

*Example*
function Welcome(props) {
return <h1>Hello {props.name}</h1>;
}
Use
<Welcome name="Deepak" />
Output 👉 Hello Deepak

*🧠 Props Rules*
- Read-only
- Cannot modify inside component
- Used for customization

*🔄 Core Concept 3: State (Dynamic Data)*
❓ What is state
State stores changing data inside component.
If state changes → UI updates automatically.

*Example using useState*
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>
Increase
</button>
</div>
);
}

*🧠 How state works*
- count → current value
- setCount() → update value
- UI re-renders automatically
This is React’s biggest power.

*⚖️ Props vs State (Important Interview Question)*
Props State
Passed from parent Managed inside component
Read-only Can change
External data Internal data

*⚠️ Common Beginner Mistakes*
- Modifying props
- Forgetting import of useState
- Confusing props and state
- Not using components properly

*🧪 Mini Practice Task*
- Create a component that shows your name
- Pass name using props
- Create counter using state
- Add button to increase count

*✅ Mini Practice Task – Solution*

*🟦 1️⃣ Create a component that shows your name*
function MyName() {
return <h2>My name is Deepak</h2>;
}
export default MyName;
✔ Simple reusable component
✔ Displays static text

*📤 2️⃣ Pass name using props*
function Welcome(props) {
return <h2>Hello {props.name}</h2>;
}
export default Welcome;
Use inside App.js
<Welcome name="Deepak" />
✔ Parent sends data
✔ Component displays dynamic value

*🔄 3️⃣ Create counter using state*
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return <h2>Count: {count}</h2>;
}
export default Counter;
✔ State stores changing value
✔ UI updates automatically

*➕ 4️⃣ Add button to increase count*
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<h2>Count: {count}</h2>
<button onClick={() => setCount(count + 1)}>
Increase
</button>
</div>
);
}
export default Counter;
✔ Click → state updates → UI re-renders

🧩 *How to use everything in App.js*
import MyName from "./MyName";
import Welcome from "./Welcome";
import Counter from "./Counter";
function App() {
return (
<div>
<MyName />
<Welcome name="Deepak" />
<Counter />
</div>
);
}
export default App;

➡️ *Double Tap ♥️ For More*

❤1

50 views17:22