React is a JavaScript library used to build user interfaces, especially single-page applications (SPAs).
It focuses on:
- Building UI using components
- Efficiently updating the UI using state
- Declarative programming style
🔑 Basics of React
1️⃣ Component-Based Architecture
UI is broken into small, reusable components.
function Button() {
return <button>Click me</button>;
}
✔ Reusable
✔ Easy to maintain
2️⃣ JSX (JavaScript + HTML)
React uses JSX to write HTML inside JavaScript.
const name = "Teekam";
<h1>Hello {name}</h1>
✔ More readable
✔ Easier UI logic
3️⃣ State
State controls dynamic data and UI updates.
const [count, setCount] = useState(0);
✔ UI automatically updates when state changes
4️⃣ Props
Props are used to pass data from parent to child.
<Profile name="Teekam" />
5️⃣ Virtual DOM
React uses a Virtual DOM to update only the changed parts of the UI instead of reloading everything.
🔥 How React Is Different from Plain JavaScript
🆚 1️⃣ UI Updates
Plain JavaScript
You manually update the DOM.
document.getElementById("count").innerText = count;
❌ More code
❌ Error-prone
React
UI updates automatically when state changes.
setCount(count + 1);
✔ Less code
✔ More predictable
🆚 2️⃣ Programming Style
| Plain JavaScript | React |
|---|---|
| Imperative | Declarative |
| You control DOM | React controls DOM |
| Manual updates | Automatic updates |
🆚 3️⃣ Reusability
- Plain JS → limited reuse
- React → reusable components
🆚 4️⃣ Performance
- Plain JS → frequent DOM manipulation (slow)
- React → Virtual DOM + diffing (fast)
🆚 5️⃣ Large Applications
- Plain JS → hard to scale
- React → scalable architecture
🧠 Simple Example Comparison
Plain JavaScript
<button onclick="increment()">+</button>
<p id="count">0</p>
<script>
let count = 0;
function increment() {
count++;
document.getElementById("count").innerText = count;
}
</script>
React
function Counter() {
const [count, setCount] = useState(0);
return (
<>
<button onClick={() => setCount(count + 1)}>+</button>
<p>{count}</p>
</>
);
}
✔ Cleaner
✔ Easier to manage
🎯 Short Interview Answer
React is a JavaScript library for building user interfaces using reusable components, JSX, and state management.
Unlike plain JavaScript, React uses a declarative approach and a Virtual DOM, which makes UI updates faster, cleaner, and easier to manage, especially in large applications.
⭐ One-Line Summary
Plain JavaScript tells the browser how to update UI, while React tells it what the UI should look like.
