Установка React: создаём приложение React на Vite

Чтобы установить React, создайте новый проект на Vite: выполните npm create vite@latest my-app -- --template react, затем cd my-app, npm install и npm run dev. Сначала должен быть установлен Node.js. Vite настраивает React, компиляцию JSX и dev-сервер, который перезагружает страницу при сохранении.

Чтобы начать учиться, ничего из этого не нужно. Редактор ниже запускает React прямо на этой странице; это упрощённая версия файла App.jsx, который Vite генерирует для вас.

import { useState } from 'react';

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

    return (
        <div style={{ textAlign: 'center' }}>
            <h1>Get started</h1>
            <p>
                Edit <code>src/App.jsx</code> and save to test <code>HMR</code>
            </p>
            <button type="button" onClick={() => setCount((count) => count + 1)}>
                Count is {count}
            </button>
        </div>
    );
}

Нажмите кнопку, затем измените текст заголовка: превью обновляется по мере ввода, так же как dev-сервер Vite подставляет ваши изменения без перезагрузки страницы (именно это означает «HMR», hot module replacement, горячая замена модулей).

Что нужно заранее: Node.js

Инструменты, которые собирают приложение React, работают на Node.js, а npm (его менеджер пакетов) идёт в комплекте. Установите текущий релиз LTS с сайта Node.js или через менеджер версий, например nvm, затем проверьте его в терминале:

node -v
npm -v

Обе команды должны вывести номер версии. Если node -v выводит старую версию, обновитесь: Vite 8 нужен Node.js 20.19 или новее (22.12 или новее в ветке 22), а на более старых релизах он выводит предупреждение.

Создаём приложение React на Vite

Выполните эти четыре команды в папке, где вы храните проекты:

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

• npm create vite@latest скачивает последнюю версию генератора проектов. my-app это имя папки, а --template react выбирает обычный React с JavaScript. Дополнительный -- передаёт опцию шаблона через npm в генератор.
• npm install скачивает React, React DOM, Vite и остальные зависимости из package.json в node_modules.
• npm run dev запускает сервер разработки и выводит локальный адрес, обычно http://localhost:5173. Откройте его в браузере.

Затем генератор задаёт два вопроса: какой линтер настроить (Oxlint или ESLint) и установить ли и запустить приложение сейчас. Если на второй ответить «да», он сам выполнит npm install и npm run dev, и две последние команды можно пропустить. Для TypeScript используйте вместо этого --template react-ts; см. React с TypeScript.

Файлы, которые создаёт Vite

my-app/
├── index.html
├── package.json
├── vite.config.js
├── README.md
├── public/
└── src/
    ├── main.jsx
    ├── App.jsx
    ├── App.css
    ├── index.css
    └── assets/

Важнее всего три из них:

index.html это страница, которую загружает браузер. В её body один пустой элемент, <div id="root"></div>, и тег script, который загружает src/main.jsx. React рисует всё приложение внутри этого div.

src/main.jsx это точка входа. Он подключает React к странице:

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App.jsx';

createRoot(document.getElementById('root')).render(
    <StrictMode>
        <App />
    </StrictMode>,
);

createRoot берёт элемент #root и делает React ответственным за всё внутри него. render(<App />) рисует там ваш верхний компонент. StrictMode это помощник для разработки, который выполняет дополнительные проверки; в продакшен-сборке он ни на что не влияет (см. Strict Mode). Этот файл редко нужно редактировать.

src/App.jsx это ваш первый компонент и файл, который вы редактируете. Версия Vite импортирует три изображения (главную картинку и логотипы Vite и React) и App.css и заканчивается на export default App. Это то же самое, что написать export default function App() в начале, и именно эту форму используют примеры на этих страницах.

Первая правка

Откройте src/App.jsx, удалите содержимое и замените его своим компонентом. Сохраните, и браузер обновится. Вот небольшое первое приложение, которое можно набрать; сначала попробуйте его здесь:

import { useState } from 'react';

function Greeting({ name }) {
    return <h2>Hello, {name}!</h2>;
}

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

    return (
        <div>
            <Greeting name={name} />
            <label>
                Your name:{' '}
                <input value={name} onChange={(e) => setName(e.target.value)} />
            </label>
        </div>
    );
}

Пишите в поле, и заголовок следует за текстом. Затем добавьте второй <Greeting name="Vite" /> под первым: компоненты можно переиспользовать, и каждый экземпляр получает свой name.

Когда App.jsx разрастётся, перенесите компоненты в отдельные файлы, например src/Greeting.jsx, экспортируйте их и импортируйте там, где используете. Как это сделать, показано на странице о компонентах.

Сборка для продакшена

Dev-сервер нужен для работы над кодом. Когда будете готовы опубликовать, соберите приложение:

npm run build
npm run preview

npm run build компилирует JSX, собирает и минифицирует код и записывает статические файлы в папку dist/. npm run preview раздаёт эту папку локально, чтобы вы могли проверить настоящую сборку. Загрузите dist/ на любой статический хостинг. В сборке React также переключается в продакшен-режим, который быстрее и пропускает предупреждения для разработки.

Create React App устарел

Много лет стандартным способом начать был npx create-react-app my-app. В феврале 2025 года команда React объявила Create React App устаревшим, и он больше не поддерживается. Многие старые туториалы всё ещё используют его, поэтому вы увидите в них react-scripts start и файл входа src/index.js; сами компоненты в проекте на Vite работают так же.

Что использовать вместо него:

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

npx create-next-app@latest my-app
npx create-react-router@latest my-app

Чтобы перенести существующий проект Create React App на Vite, основные шаги такие: установите vite и @vitejs/plugin-react и удалите react-scripts; добавьте vite.config.js, который подключает плагин React; перенесите index.html из public/ в корень проекта, уберите плейсхолдеры %PUBLIC_URL% и добавьте тег <script type="module" src="/src/index.jsx"> для файла входа; переименуйте файлы с JSX в .jsx; переименуйте переменные окружения REACT_APP_ в VITE_ и читайте их из import.meta.env; и замените команды react-scripts в package.json на vite, vite build и vite preview.

Добавляем React на существующую страницу

React не обязан владеть всей страницей. Его можно отрендерить в один элемент существующего сайта, например в виджет корзины в магазине с серверным рендерингом. Bundler вроде Vite для компиляции JSX всё равно нужен. Установите два пакета:

npm install react react-dom

Затем создайте корень на элементе, которым должен управлять React:

import { createRoot } from 'react-dom/client';
import Cart from './Cart.jsx';

const container = document.getElementById('cart');
createRoot(container).render(<Cart />);

Всё за пределами #cart остаётся как было. На одной странице можно создать несколько корней, по одному на элемент, и каждый работает независимо.