What Is React? How React Works

React is a JavaScript library for building user interfaces out of small, reusable pieces called components. Meta released it in 2013, and today it powers Facebook, Instagram, WhatsApp Web, Netflix, Airbnb and a large share of the web's dashboards and online stores. It is also the base of frameworks such as Next.js and React Native (mobile apps), so learning React opens several career paths at once.

The problem React solves

With plain JavaScript you change the page by hand: find an element, change its text, add a class, remove a node. That's fine for a small widget, but in a big app – a cart badge, a cart drawer and a checkout total all showing the same data – keeping every piece of the page in sync gets error-prone fast.

React flips this around. You describe what the screen should look like for the current data, and React works out how to change the page. This is called a declarative style.

// Imperative (plain DOM): you write every step
const badge = document.querySelector("#cart-count");
badge.textContent = String(items.length);
if (items.length === 0) badge.classList.add("hidden");
else badge.classList.remove("hidden");

// Declarative (React): you describe the result
function CartBadge({ items }) {
  if (items.length === 0) return null;
  return <span className="badge">{items.length}</span>;
}

Components

A component is a JavaScript function that returns UI. You build small ones and combine them, like LEGO bricks:

function Header() {
  return <h1>LearnFrenzy Courses</h1>;
}

function CourseCard({ title, lessons }) {
  return (
    <li>
      {title} – {lessons} lessons
    </li>
  );
}

export default function App() {
  return (
    <main>
      <Header />
      <ul>
        <CourseCard title="React.js" lessons={31} />
        <CourseCard title="TypeScript" lessons={17} />
        <CourseCard title="JavaScript" lessons={40} />
      </ul>
    </main>
  );
}

LearnFrenzy Courses
• React.js – 31 lessons
• TypeScript – 17 lessons
• JavaScript – 40 lessons

Those HTML-looking tags inside JavaScript are JSX. You'll learn it properly in the JSX lesson; for now, read it as "HTML that can contain JavaScript in curly braces".

State: data that changes

When data changes – a click, a keystroke, a server response – a component stores it in state. Updating state tells React to run the component again and update the screen:

import { useState } from "react";

export default function App() {
  const [likes, setLikes] = useState(0);   // a state variable and its setter

  return (
    <div>
      <p>Likes: {likes}</p>
      <button onClick={() => setLikes(likes + 1)}>Like</button>
    </div>
  );
}

Likes: 0
[Like]

› click “Like”
Likes: 1
[Like]

› click “Like”
Likes: 2
[Like]

› click “Like”
Likes: 3
[Like]

The panel above shows the screen after each click. Lines starting with › are the actions; [Like] is a button. Notice that we never touched the DOM: we only changed likes, and React updated the paragraph.

How React updates the page

The description React compares is often called the virtual DOM: a lightweight tree of plain objects. Comparing two trees in memory is far cheaper than touching the real DOM, which is why React can re-render often and still be fast.

React, Next.js and the ecosystem

This course teaches React itself with Vite, which keeps the focus on React. Everything carries over directly to Next.js.

Practice

Summary