#Why React?¶

React is a JavaScript library for building user interfaces. Created by Meta in 2013, it has become the most widely used front-end library in the world, powering apps at Facebook, Netflix, Airbnb, and thousands of startups.

The Problem React Solves¶

Before React, building interactive UIs meant manually manipulating the DOM with jQuery or vanilla JavaScript. This led to:

• Spaghetti code — hard to maintain as apps grew
• Performance issues — full page re-renders on every change
• No component reuse — writing the same UI patterns repeatedly

React's Core Ideas¶

1. Components¶

Everything in React is a component — a reusable piece of UI. Think of them as custom HTML elements you design yourself.

1function Button({ label, onClick }) {
2  return (
3    <button onClick={onClick} className="btn">
4      {label}
5    </button>
6  );
7}

2. Declarative UI¶

Instead of writing how to update the DOM, you describe what the UI should look like at any given state. React figures out the most efficient way to make it happen.

1// Declarative — describe the desired outcome
2function Greeting({ isLoggedIn }) {
3  return isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>;
4}

3. The Virtual DOM¶

React keeps a lightweight copy of the real DOM in memory. When state changes:

1. 1React re-renders the virtual DOM
2. 2Computes the diff between old and new virtual DOM
3. 3Applies only the changed parts to the real DOM

This makes React extremely fast for complex, frequently-updating UIs.

Who Uses React?¶

What You'll Build in This Course¶

By the end of this course you will have built:

• ✅ A personal portfolio site with Next.js
• ✅ A full-stack e-commerce storefront
• ✅ A real-time chat application using React + WebSockets

Prerequisites: Basic HTML, CSS, and JavaScript (ES6+). No React experience needed.

Let's get started! 🚀