Что такое React? Библиотека JavaScript для интерфейсов

React это библиотека JavaScript для построения пользовательских интерфейсов из компонентов. Вы описываете, как должен выглядеть экран для текущих данных, а когда данные меняются, React обновляет страницу под них. React, React JS и ReactJS это одно и то же: библиотека с открытым исходным кодом, созданная в Facebook (теперь 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>
    );
}

Нажмите обе кнопки. Каждый Counter хранит своё число, потому что каждый из них это отдельный экземпляр компонента со своим состоянием. Добавьте третью строку, <Counter label="Plums" />, и появится новый независимый счётчик.

Этот короткий пример уже показывает три идеи, на которых построен React: компоненты (Counter и App это функции, которые возвращают UI), JSX (похожий на HTML синтаксис внутри return) и состояние (count, значение, при изменении которого React перерисовывает компонент).

Какую проблему решает React

Пользовательский интерфейс это картинка каких-то данных. Когда данные меняются, картинка тоже должна измениться, и вместе с ней должна измениться каждая часть экрана, которая от этих данных зависит. Без библиотеки вы пишете этот код вручную: находите каждый элемент, затем сами задаёте ему текст, класс или видимость. Каждая новая функция добавляет ещё одно место, которое нужно не забыть обновить.

React переворачивает этот подход. Вы пишете одну функцию, которая говорит, каким должен быть экран при данном состоянии, а React сам выясняет, какие части страницы нужно изменить. Это называется декларативным UI, в противоположность императивному коду, который перечисляет каждое изменение DOM шаг за шагом. Вот оба стиля рядом в одном примере:

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 отдаёт свой абзац обычному коду DOM (эффект запускает этот код только после того, как React создал абзац). Он хранит число в переменной, находит каждый элемент через querySelector и вручную задаёт ему текст. Declarative лишь говорит «покажи счёт и покажи, чётный ли он». Удалите в handleClick строку, которая задаёт .parity, и нажмите несколько раз: первая строка теперь утверждает, что 3 чётное, а вторая не может рассинхронизироваться, потому что текст вычисляется из count при каждом рендере.

Как React обновляет страницу

Когда состояние меняется, React снова вызывает функцию вашего компонента. Этот вызов называется рендером. Функция возвращает свежее описание UI, React сравнивает его с предыдущим и затем меняет только те части реальной страницы, которые отличаются. Это описание в памяти часто называют виртуальным 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>
    );
}

Откройте консоль под превью и наберите несколько букв. Каждое нажатие клавиши выводит один рендер с новым значением. Поле ввода сохраняет фокус и позицию курсора, потому что React затронул только текст абзаца и значение поля, а не всю страницу. Страница о рендеринге объясняет, когда именно компонент рендерится снова.

Компоненты, JSX и состояние вкратце

Компоненты это функции JavaScript, имена которых начинаются с заглавной буквы. Они возвращают то, что должно появиться на экране, и вы используете их как теги HTML: <Counter />. Страница это дерево компонентов, от маленьких вроде кнопки до больших вроде целого экрана настроек. См. компоненты.

JSX это синтаксис, который позволяет писать разметку внутри JavaScript. Фигурные скобки возвращают вас в JavaScript, поэтому {count} показывает значение, а {items.map(...)} превращает массив в список. Инструмент сборки компилирует JSX в обычные вызовы функций до того, как браузер его выполнит.

Состояние это данные, которые компонент запоминает между рендерами. Вы создаёте его хуком useState, и вызов его сеттера сообщает React, что что-то изменилось. Данные текут сверху вниз от родителей к детям через пропсы, то есть аргументы компонента.

В этом примере используется всё сразу: список, отрендеренный из массива в состоянии, и форма, которая добавляет в него элементы.

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>
    );
}

Добавьте задачу, и сразу изменятся две вещи: список и счётчик под ним. Вы ни разу не сказали счётчику обновиться. Оба читают из tasks, поэтому оба следуют за ним. Замените начальный массив на [], и вместо списка появится «Nothing to do.».

Чем React не является

React это библиотека, а не полноценный фреймворк. Он отвечает за компоненты, состояние и их превращение в UI и намеренно оставляет за рамками несколько вещей, нужных готовому приложению:

• Маршрутизация. Встроенного способа сопоставить URL со страницами нет. Этот пробел заполняют React Router и роутеры фреймворков.
• Загрузка данных и серверный рендеринг. React даёт инструменты вроде эффектов и Suspense, но не навязывает, откуда берутся данные и как страницы рендерятся на сервере.
• Настройка сборки. Браузеры не понимают JSX, поэтому нужен инструмент вроде Vite, чтобы его скомпилировать.

Фреймворки строятся на React и добавляют эти части. Next.js и режим фреймворка React Router добавляют маршрутизацию, серверный рендеринг и загрузку данных, и команда React рекомендует начинать полноценное приложение с одного из них. Для клиентского приложения или для обучения Vite с обычным React это небольшая и быстрая отправная точка; см. как установить React.

React и React Native

Сам React только описывает компоненты и то, как они меняются. Отдельный рендерер превращает их в то, что можно увидеть. React DOM рендерит в веб-страницы, и именно его используют все примеры на этом сайте. React Native рендерит такие же компоненты в нативные представления iOS и Android, поэтому вы пишете <View> и <Text> вместо <div> и <p>, и файлов HTML или CSS нет. Компоненты, пропсы, состояние и хуки работают одинаково в обоих, так что всё, что вы узнаете здесь, переносится напрямую.

Когда изучать React

Изучайте React после основ JavaScript, потому что всё в React это JavaScript. Перед началом стоит уверенно владеть:

• переменными, функциями и стрелочными функциями
• массивами и их методами map и filter
• объектами, деструктуризацией и синтаксисом spread (...)
• import и export
• промисами и async/await для загрузки данных

Если это знакомо, начните с JSX и компонентов, затем пропсы и состояние. Эффекты, рефы, контекст и инструменты производительности придут позже, когда создание небольших интерактивных компонентов станет привычным.