What Is React?

💡 Why React Matters

• Component-based — build once, reuse everywhere
• Huge job market — the #1 skill for frontend roles in 2026
• Huge ecosystem — Next.js, React Native, Remix, hundreds of libraries
• Automatic updates — change state, UI updates itself
• Hooks — clean, modern way to write components

⚖️ React vs Plain JavaScript

Same counter, two approaches:

Plain JavaScript:

let count = 0;
const display = document.getElementById('count');
const btn = document.getElementById('increment');

btn.addEventListener('click', () => {
    count++;
    display.textContent = count;
});

React:

function Counter() {
    const [count, setCount] = useState(0);

    return (
        <button onClick={() => setCount(count + 1)}>
            Count: {count}
        </button>
    );
}

Less code, no manual DOM updates, easier to compose.

🧩 Core React Concepts

• Components — functions that return JSX. Reusable building blocks.
• JSX — HTML-like syntax inside JavaScript. Compiles to function calls.
• Props — inputs passed to a component (like function arguments).
• State — data that changes over time. Managed with useState.
• Hooks — functions starting with use that add features (state, effects, etc.).
• Re-rendering — when state changes, React re-runs the component and updates the DOM.

🎯 A Real Component

import { useState } from 'react';

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

function App() {
    const [name, setName] = useState('World');

    return (
        <div>
            <Greeting name={name} />
            <input
                value={name}
                onChange={(e) => setName(e.target.value)}
            />
        </div>
    );
}

The Greeting component receives name as a prop. The App component owns the state and passes it down.

🚫 Common Beginner Mistakes

• Skipping JavaScript fundamentals. Learn JS first — React is 90% JavaScript.
• Manipulating the DOM directly. In React, change state and let React update the DOM.
• Mutating state directly. Use setCount(count + 1), not count++.
• Forgetting keys in lists. Each list item needs a unique key prop.
• Using index as key. Use a stable ID instead — index causes bugs on reordering.

❓ Frequently Asked Questions

🎯 What's Next?