Introduction to React: What It Is and Why Use It

React is a JavaScript library for building user interfaces. It was created at Facebook (now Meta), is open source, and is one of the most widely used tools for building websites and web apps. With React Native, the same ideas also build mobile apps.

The two big ideas#

1. Components. You build the interface from small, reusable pieces called components: a Button, a ProductCard, a SearchBar. Components contain other components, so a whole page is a tree of them.

2. Declarative UI. You describe what the screen should look like for the current data, and React works out how to update the page. With plain JavaScript you write the steps yourself: find this element, change its text, add a class, remove a row. With React you write "this is how a list of 3 items looks", and when the data changes to 4 items, React updates the page to match.

Your first component#

This counter is a real React component, running live below the code with the same React version this site uses. Click the button.

import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Hello, React!</h1>
      <button onClick={() => setCount(count + 1)}>
        Clicked {count} times
      </button>
    </div>
  );
}

What is happening:

• App is a component: a JavaScript function that returns what to show.
• The HTML-like syntax is JSX, which React turns into page elements.
• useState(0) gives the component a piece of memory, count, starting at 0.
• Clicking calls setCount, React runs App again with the new count, and updates only the text that changed.

You never touched the page directly: you changed the data, and the screen followed.

Why React is popular#

• Reusable components keep large interfaces organised.
• Predictable updates: the screen is a function of the data.
• A huge ecosystem: routing, forms, data fetching, testing, UI libraries.
• Jobs: React is one of the most requested front-end skills.
• Frameworks such as Next.js build on it for full websites with server rendering.

What you should know first#

React is JavaScript. Before starting, be comfortable with:

• variables, functions and arrow functions;
• arrays and their methods, especially map and filter;
• objects, destructuring and the spread operator (...);
• import and export (modules);
• basic HTML and CSS.

How this course works#

Every React example on this site runs live in your browser, below its code, in a sandboxed frame. To change the code and experiment, create a project as the next lesson shows. Examples that need things a single component cannot do in the preview (such as a router or a test runner) are shown as code to run in your own project, and say so.

Key takeaway#

Next: Setting Up a React Project.