What Is React? A Plain-English Introduction

Runnable lesson · press Try it on the examples to edit and run them here.

React is a JavaScript library for building user interfaces. A user interface is everything a person sees and touches on a screen: buttons, forms, lists, menus, charts.

React was created at Facebook (now Meta) and released as open source in 2013. Today it is maintained by Meta and a large community, and it is one of the most widely used tools for building web front ends.

What React does for you

Without a library, you build a dynamic page by hand. You find an element, change its text, add or remove other elements, and make sure everything still matches your data. That works for small pages. In a bigger app, forgetting one update leaves the screen showing old information.

React gives you a different way to think:

1. You describe what the screen should look like for the current data.
2. When the data changes, you describe the screen again.
3. React compares the new description with the old one and changes only what is different in the page.

You never write the “find this element and change it” code. You write the result you want, and React does the updating. This style is called declarative programming.

A first look

Here is a complete React example. Do not worry about the details yet; every line is explained in later lessons. Press Try it, then click the button.

1
2
3
4
5
6
7
8
9
10
11

function App() {
  const [count, setCount] = React.useState(0);

  return (
    <main>
      <h1>My first React app</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Add one</button>
    </main>
  );
}

Three ideas are already in this small example:

• A component. App is a function that returns what to show. Components are the building blocks of every React app.
• JSX. The tags inside return look like HTML but are written in JavaScript. You will learn JSX in Understanding JSX.
• State. count is a value React remembers between renders. When setCount is called, React runs App again with the new value and updates the page.

React is a library, not a framework

A framework decides how your whole application is organised: folders, routing, data loading, building. A library does one job and leaves the rest to you. React’s one job is turning data into a user interface.

That is why a real React project also uses other tools: a build tool such as Vite, a router for multiple pages, and sometimes a data-fetching library. There are also frameworks built on top of React, such as Next.js, which add routing, server rendering and a project structure. You will meet them in Client-Side React vs React Frameworks. This course teaches React itself first, because every one of those tools expects you to know it.

React is also about components

A React screen is a tree of small, reusable pieces. A shop page might be made of a Header, a ProductList that contains many ProductCard components, and a Footer. Each piece owns its markup, behaviour and data. You can reuse a ProductCard a hundred times with different data. You will build this way from the next lessons on, starting with Components and UI Composition.

Key points

• React is a JavaScript library for building user interfaces from components.
• You describe the UI for the current data; React updates the page for you.
• React alone does not include routing or a build tool. You add those.
• The next lessons explain why people choose it and what the trade-offs are.

1
2
3
4
5
6
7
8
9
10
11

function App() {
  const [count, setCount] = React.useState(10);

  return (
    <main>
      <h1>My first React app</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 5)}>Add five</button>
    </main>
  );
}