What Is React? The JavaScript UI Library Explained

React is a JavaScript library for building user interfaces out of components. You describe what the screen should look like for the current data, and when the data changes, React updates the page to match. React, React JS and ReactJS are the same thing: an open source library created at Facebook (now Meta).

import { useState } from 'react';

function Counter({ label }) {
    const [count, setCount] = useState(0);

    return (
        <p>
            {label}: {count}{' '}
            <button onClick={() => setCount(count + 1)}>Add one</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <h3>Fruit basket</h3>
            <Counter label="Apples" />
            <Counter label="Pears" />
        </div>
    );
}

Click both buttons. Each Counter keeps its own number, because each one is a separate copy of the component with its own state. Add a third line, <Counter label="Plums" />, and a new independent counter appears.

That short example already shows the three ideas React is built on: components (Counter and App are functions that return UI), JSX (the HTML-like syntax inside return), and state (count, a value that makes React redraw the component when it changes).

The problem React solves

A user interface is a picture of some data. When the data changes, the picture has to change too, and every part of the screen that depends on that data has to change with it. Without a library, you write that code by hand: find each element, then set its text, class or visibility yourself. Each new feature adds another place you have to remember to update.

React flips this around. You write one function that says what the screen should be for a given state, and React works out which parts of the page need to change. This is called declarative UI, as opposed to imperative code that lists every DOM change step by step. Here are both styles side by side in one example:

import { useEffect, useRef, useState } from 'react';

function ByHand() {
    const boxRef = useRef(null);

    useEffect(() => {
        // Plain DOM code: no React state, no JSX.
        const box = boxRef.current;
        box.innerHTML = 'By hand: <span class="num">0</span> is <span class="parity">even</span> <button>+1</button>';
        let count = 0;
        const button = box.querySelector('button');

        function handleClick() {
            count += 1;
            box.querySelector('.num').textContent = count;
            box.querySelector('.parity').textContent = count % 2 === 0 ? 'even' : 'odd';
        }

        button.addEventListener('click', handleClick);
        return () => button.removeEventListener('click', handleClick);
    }, []);

    return <p ref={boxRef} />;
}

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

    return (
        <p>
            Declarative: {count} is {count % 2 === 0 ? 'even' : 'odd'}{' '}
            <button onClick={() => setCount(count + 1)}>+1</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <ByHand />
            <Declarative />
        </div>
    );
}

ByHand gives its paragraph to plain DOM code (the effect only runs that code once React has created the paragraph). It keeps the number in a variable, finds each element with querySelector and sets its text by hand. Declarative only says "show the count, and show whether it is even". Delete the line in handleClick that sets .parity and click a few times: the first row now claims 3 is even, while the second row cannot fall out of sync, because the text is computed from count on every render.

How React updates the page

When state changes, React calls your component function again. That call is a render. The function returns a fresh description of the UI, React compares it with the previous one, and then changes only the parts of the real page that differ. People often call that in-memory description the virtual DOM.

import { useState } from 'react';

export default function App() {
    const [name, setName] = useState('');

    console.log('App rendered, name is', JSON.stringify(name));

    return (
        <div>
            <input
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="Type your name"
            />
            <p>Hello, {name || 'stranger'}!</p>
        </div>
    );
}

Open the console under the preview and type a few letters. Every keystroke logs one render with the new value. The input keeps its focus and cursor position, because React only touched the text of the paragraph and the input's value, not the whole page. The page on rendering explains exactly when a component renders again.

Components, JSX and state at a glance

Components are JavaScript functions whose names start with a capital letter. They return what should appear on screen, and you use them like HTML tags: <Counter />. A page is a tree of components, from small ones like a button to large ones like a whole settings screen. See components.

JSX is the syntax that lets you write markup inside JavaScript. Curly braces drop back into JavaScript, so {count} shows a value and {items.map(...)} turns an array into a list. A build tool compiles JSX into plain function calls before the browser runs it.

State is data a component remembers between renders. You create it with the useState hook, and calling its setter is how you tell React that something changed. Data flows down from parents to children through props, which are the arguments of a component.

This example uses all of them: a list rendered from an array in state, and a form that adds to it.

import { useState } from 'react';

function TaskList({ tasks }) {
    if (tasks.length === 0) return <p>Nothing to do.</p>;
    return (
        <ul>
            {tasks.map((task) => (
                <li key={task}>{task}</li>
            ))}
        </ul>
    );
}

export default function App() {
    const [tasks, setTasks] = useState(['Learn JSX', 'Learn props']);
    const [draft, setDraft] = useState('');

    function addTask() {
        if (draft.trim() === '') return;
        setTasks([...tasks, draft.trim()]);
        setDraft('');
    }

    return (
        <div>
            <input value={draft} onChange={(e) => setDraft(e.target.value)} />
            <button onClick={addTask}>Add</button>
            <TaskList tasks={tasks} />
            <p>{tasks.length} tasks</p>
        </div>
    );
}

Add a task and two things change at once: the list and the count under it. You never told the count to update. Both read from tasks, so both follow it. Change the starting array to [] and the list shows "Nothing to do." instead.

What React is not

React is a library, not a full framework. It covers components, state and turning them into UI, and it deliberately leaves out several things a complete app needs:

• Routing. There is no built-in way to map URLs to pages. React Router and framework routers fill that gap.
• Data fetching and server rendering. React gives you tools such as effects and Suspense, but no opinion on where data comes from or how pages render on a server.
• A build setup. Browsers do not understand JSX, so you need a tool such as Vite to compile it.

Frameworks build on React to supply these parts. Next.js and React Router's framework mode add routing, server rendering and data loading, and the React team recommends starting a full app with one of them. For a client-side app or for learning, Vite with plain React is a small and fast starting point; see how to install React.

React vs React Native

React itself only describes components and how they change. A separate renderer turns them into something you can see. React DOM renders to web pages, which is what every example on this site uses. React Native renders the same kind of components to native iOS and Android views, so you write <View> and <Text> instead of <div> and <p>, and there is no HTML or CSS file. Components, props, state and hooks work the same in both, so what you learn here carries over directly.

When to learn React

Learn React after the JavaScript basics, because everything in React is JavaScript. Before you start, you should be comfortable with:

• variables, functions and arrow functions
• arrays and their map and filter methods
• objects, destructuring and the spread syntax (...)
• import and export
• promises and async/await, for loading data

If those feel familiar, start with JSX and components, then props and state. Effects, refs, context and performance tools come later, once building small interactive components feels natural.