React Introduction

React is a JavaScript library for building user interfaces. Many food delivery apps, banking dashboards and admin panels are built with it. Instead of changing the page by hand, you describe what the screen should look like, and React keeps the page in step with your data.

In this lesson you will learn what React is, what problem it solves, how it differs from plain JavaScript DOM code, and you will run your first React component in the browser.

What is React?

React is a free, open-source library for building user interfaces, first released by Facebook (now Meta) in 2013. Today it is looked after by the React Foundation, an independent group hosted by the Linux Foundation. It runs in the browser and, with extra tools, on the server and on mobile phones (React Native).

A library is a collection of code you call from your own program. React does one job: it turns data into UI and keeps that UI up to date. It does not decide how you fetch data or how your URLs work. For those jobs you add other libraries, or you use a framework such as Next.js, which bundles React with routing, data loading and server rendering.

React apps are built from components. A component is a JavaScript function that returns a piece of UI, such as a button, a product card or a whole page. You build small components and combine them into bigger ones, just like you build a wall from bricks.

The problem React solves

Imagine a shopping cart in plain JavaScript. When Priya adds an item, your code must update the item list, the cart count in the header, the total price and maybe a "free delivery" message. Each of those is a separate DOM change that you must remember to make. Forget one and the page shows wrong information.

Here is a tiny counter written with plain DOM code. Notice that the code says how to change the page, step by step:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Plain DOM counter</title>
</head>
<body>
  <p>Cups of chai sold: <span id="count">0</span></p>
  <button id="sell">Sell one</button>
  <script>
    let count = 0;
    const output = document.getElementById("count");
    document.getElementById("sell").addEventListener("click", () => {
      count = count + 1;
      output.textContent = count; // you must remember to update the page yourself
    });
  </script>
</body>
</html>

This style is called imperative: you give the browser a list of commands. It is fine for one number, but it becomes hard to manage when many parts of the page depend on the same data.

The React way: describe the result

In React you write declarative code. You describe what the UI should look like for the current data, and React works out which DOM changes are needed. Here is the same counter in React:

import { useState } from "react";
import { createRoot } from "react-dom/client";

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

  return (
    <div>
      <p>Cups of chai sold: {count}</p>
      <button onClick={() => setCount(count + 1)}>Sell one</button>
    </div>
  );
}

createRoot(document.getElementById("root")).render(<ChaiCounter />);

Read it from top to bottom:

• ChaiCounter is a component: a function that returns UI.
• The HTML-like code inside return is called JSX. It is JavaScript with a tag syntax, which you will study in JSX.
• useState(0) creates a piece of state, a value React remembers between updates. It gives you the current value count and a function setCount to change it.
• {count} inside the JSX shows the current value.
• createRoot(...).render(...) tells React to draw the component inside the element with the id root.

Nowhere does the code say "find the span and change its text". When you click, setCount stores the new number, React calls ChaiCounter again, compares the new result with the old one and updates only the text that changed.

How React updates the page

Every update follows the same three steps:

1. Trigger. Something changes: a click updates state, or new data arrives.
2. Render. React calls your component functions to get a fresh description of the UI. This is cheap: it is just JavaScript objects, not real page elements.
3. Commit. React compares the new description with the previous one and changes only the real DOM nodes that differ.

Because React finds the differences for you, you can think about each screen as a simple function of your data: UI = f(data). Change the data and the UI follows.

Components make big apps manageable

Here is a slightly larger example. One Product component is reused three times with different data:

import { createRoot } from "react-dom/client";

function Product({ name, price }) {
  return (
    <li>
      {name}: ₹{price.toLocaleString("en-IN")}
    </li>
  );
}

function Shop() {
  return (
    <section>
      <h2>Rohan's Sports Corner, Pune</h2>
      <ul>
        <Product name="Cricket bat" price={1299} />
        <Product name="Football" price={649} />
        <Product name="Badminton racket" price={2150} />
      </ul>
    </section>
  );
}

createRoot(document.getElementById("root")).render(<Shop />);

The values passed to Product, such as name and price, are called props. You will learn them in Props. Write a component once, then reuse it with different props wherever you need it.

What you should know first

React is "just JavaScript", so you will learn it faster if you are comfortable with:

• HTML elements and attributes, from the HTML tutorial.
• Basic CSS, from the CSS tutorial.
• JavaScript functions and arrow functions, destructuring and spread, array methods such as map and filter, and modules with import and export.

You do not need to know every corner of JavaScript. If a lesson uses something new, it will explain it.

Common mistakes

• Thinking React is a full framework. React handles the UI. Routing, data loading and server code come from other tools or a framework such as Next.js.
• Changing the DOM by hand inside a React app. Code such as document.getElementById("count").textContent = 5 fights with React, which will overwrite your change on the next update. Change state instead and let React update the page.
• Starting with React before JavaScript basics. If map, arrow functions and destructuring feel unfamiliar, spend a few days on them first. Most "React problems" beginners meet are JavaScript problems.

Key points

• React is a JavaScript library for building user interfaces from components.
• A component is a function that returns UI, written with JSX.
• React code is declarative: you describe the UI for the current data, and React updates the DOM.
• An update has three steps: trigger, render and commit; only changed DOM nodes are touched.
• State (useState) is data React remembers; changing it makes React re-render the component.
• Frameworks such as Next.js add routing, data loading and server rendering on top of React.

import { useState } from "react";
import { createRoot } from "react-dom/client";

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

  return (
    <div>
      <p>Cups of chai sold: {count} (₹{count * 15})</p>
      <button onClick={() => setCount(count + 1)}>Sell one</button>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  );
}

createRoot(document.getElementById("root")).render(<ChaiCounter />);