What is React?

React is a JavaScript library for building user interfaces. It was created at Facebook (now Meta) in 2013 and today powers a huge share of the web — Facebook, Instagram, WhatsApp Web, Netflix, Airbnb, Discord, and countless dashboards and startups. Learning React is one of the most valuable front-end skills you can have.

This course uses React 19 with modern function components and hooks. You should be comfortable with JavaScript first — especially functions, arrow functions, destructuring, array methods (map, filter), spread, modules and async/await. If any of those feel shaky, the Elephantoo JavaScript course covers them all.

The problem React solves#

In plain JavaScript you update the page imperatively — step-by-step instructions:

// Vanilla JS: keep the DOM in sync by hand
let count = 0;
const button = document.querySelector("#like");
const label = document.querySelector("#count");

button.addEventListener("click", () => {
  count++;
  label.textContent = `${count} likes`;
  if (count === 10) {
    const badge = document.createElement("span");
    badge.textContent = "🔥 Popular!";
    label.after(badge);
  }
});

That's fine for one button. In a real app — hundreds of pieces of data, each shown in several places — keeping every element in sync by hand becomes a tangle of bugs: stale numbers, duplicated badges, forgotten updates.

React flips this around. You write declarative code: describe what the UI should look like for the current data, and React figures out how to update the DOM:

import { useState } from "react";

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

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>👍 Like</button>
      <span>{count} likes</span>
      {count >= 10 && <span>🔥 Popular!</span>}
    </div>
  );
}

There's no createElement, no textContent, no "did I already add the badge?" check. You describe the UI for any value of count, and React keeps the page matching it. People summarise this as UI = f(state): your interface is a function of your data.

Components: the core idea#

A React app is a tree of components — small, reusable, self-contained pieces of UI. A component is just a JavaScript function that returns markup:

function Welcome() {
  return <h1>Welcome to Elephantoo!</h1>;
}

You use it like an HTML tag: <Welcome />. Component names must start with a capital letter, which is how React tells them apart from built-in tags like <div>.

Components compose into bigger components, just like functions call other functions:

function Header() {
  return <header>🐘 Elephantoo</header>;
}

function CourseCard({ title, lessons }) {
  return (
    <article className="card">
      <h2>{title}</h2>
      <p>{lessons} lessons</p>
    </article>
  );
}

export default function App() {
  return (
    <>
      <Header />
      <main>
        <Welcome />
        <CourseCard title="JavaScript" lessons={34} />
        <CourseCard title="React" lessons={30} />
      </main>
    </>
  );
}

App
├─ Header
└─ main
   ├─ Welcome
   ├─ CourseCard (JavaScript)
   └─ CourseCard (React)

Thinking in components is the most important React skill: look at a design, draw boxes around the pieces, name them, and build each one separately.

JSX: HTML-like syntax in JavaScript#

That HTML-looking syntax is JSX. It isn't HTML and it isn't a string — a build tool compiles it to plain JavaScript function calls. JSX lets you mix markup with JavaScript expressions in { }:

function Greeting() {
  const name = "Ada";
  const hour = new Date().getHours();
  return (
    <p className="greeting">
      Good {hour < 12 ? "morning" : "day"}, {name}!
    </p>
  );
}

Note className instead of class — JSX uses JavaScript names for attributes. There's a whole lesson on JSX coming up.

How React updates the page#

When data changes, React:

1. Re-renders — calls your component functions again to get a fresh description of the UI (a tree of lightweight JavaScript objects, often called the virtual DOM).
2. Reconciles — compares the new description with the previous one.
3. Commits — applies only the minimal real DOM changes needed.

Re-rendering is cheap because it's just calling functions and creating objects. Touching the real DOM is the expensive part, and React keeps that to a minimum. You never have to think about which elements to update.

What React is (and isn't)#

React is a library focused on one thing: components and rendering. It doesn't include routing, data fetching, form libraries or styling. You choose those from the ecosystem:

You'll learn all of these in this course.

React also isn't only for the web: React Native uses the same components and hooks to build iOS and Android apps.

Why React?#

• Declarative — describe UI for each state; fewer synchronisation bugs.
• Component-based — build, reuse and test pieces in isolation.
• Just JavaScript — loops are map, conditions are if and &&, no special template language.
• Huge ecosystem and job market — libraries for everything, and it's the most requested front-end skill.
• Learn once, write anywhere — web, mobile (React Native), desktop.

A quick taste without installing anything#

You can try React in the browser at react.dev (the official docs have live editors) or on sandboxes like StackBlitz and CodeSandbox. For real projects you'll use Vite, set up in the next lesson.

Common misconceptions#

• "React is a framework." It's a library; frameworks like Next.js are built on it.
• "I need class components." Not any more — modern React uses function components and hooks. You may still see classes in old code (and in error boundaries, covered later).
• "JSX is HTML." It's JavaScript with an HTML-like syntax, and the differences matter (className, onClick, {} expressions).
• "The virtual DOM makes React fast." It makes React convenient. React is fast enough for nearly everything, but you can still write slow components — there's a lesson on performance.

What's next#

Next, you'll create your first real React project with Vite, explore its files and run it locally.