What is React?

React is a JavaScript library for building user interfaces. Created by Facebook in 2013, it's now the most popular way to build web apps — used by Netflix, Airbnb, Instagram, and millions of other sites.

The Core Idea

React lets you build your UI from small, reusable pieces called components. Think of them like LEGO bricks — each brick does one thing, and you assemble them to build anything.

Why React?

Before React, developers manipulated the DOM directly with JavaScript. This got painful fast — tracking what changed where led to spaghetti code. React solved this with a simple idea:

• Declarative — You describe what the UI should look like. React figures out how to update it.
• Component-based — Build small, independent pieces and compose them into complex UIs.
• Learn once, write anywhere — React skills transfer to React Native (mobile), Electron (desktop), and more.

React vs the DOM

Here's the old way of updating a UI:

// The old way: manual DOM manipulation
const count = 0;

function increment() {
  count++;
  document.getElementById('counter').textContent = count;
  document.getElementById('btn').disabled = count >= 10;
  if (count >= 10) {
    document.getElementById('msg').style.display = 'block';
  }
}

document.getElementById('btn').addEventListener('click', increment);
// Imagine doing this for 50 different UI states... ?

Here's the React way:

// The React way: describe what you want, React handles updates
import { useState } from 'react';

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

  return (
    <div>
      <p>{count >= 10 ? "Max reached!" : null}</p>
      <span id="counter">{count}</span>
      <button onClick={() => setCount(count + 1)} disabled={count >= 10}>
        Increment
      </button>
    </div>
  );
}
// React automatically updates only the parts that change. ?

The React version is shorter, clearer, and scales to thousands of components without becoming a mess.

The Virtual DOM

React uses a Virtual DOM — a lightweight copy of the real DOM kept in memory. When your data changes, React computes the minimum set of real DOM changes needed, then applies them in one batch. This makes React fast even on complex UIs.

What You'll Build

By the end of this course you'll be able to:

• Build React apps from scratch with components, props, and state
• Handle user events like clicks and form submissions
• Fetch data from APIs and display it dynamically
• Use React Hooks (useState, useEffect) to manage app logic
• Complete a working Todo app as your final project