Create React App — создаём первое React приложение

Create React App — старый официальный способ быстро создать React-приложение с готовым Webpack, Babel и тестами. В новых проектах лучше использовать Vite, но CRA всё ещё встречается в старых учебниках, курсах и рабочих проектах.

Важный статус Create React App

Сейчас Create React App помечен как deprecated. Это не значит, что все существующие проекты сразу сломались. Это значит, что для нового проекта React-команда рекомендует другие варианты: фреймворк, React Router Framework или сборку с Vite.

Для SEO-запроса по CRA важно сказать это прямо: инструмент не исчез из старых проектов, но больше не является лучшим выбором для старта. Поэтому материал полезен и тем, кто поддерживает наследие, и тем, кто выбирает новый стек.

Первый проект на Create React App

Этот блок нужен не для того, чтобы рекомендовать CRA для новых проектов, а чтобы уверенно читать старые уроки и поддерживать существующие приложения. Важно понять структуру, команды и места, которые чаще всего отличаются от Vite.

После этого раздела должно быть понятно, почему в старых проектах встречаются react-scripts, папка build и команда npm start, а в новых материалах чаще используется Vite и другая структура входных файлов.

Создать проект через CRA

npx create-react-app my-first-app
cd my-first-app
npm start

Команда npx скачивает create-react-app, создаёт папку проекта и устанавливает зависимости. После npm start приложение запускается на http://localhost:3000.

Структура проекта

my-first-app/
├── public/
│   └── index.html
├── src/
│   ├── App.js
│   ├── App.css
│   ├── index.js
│   └── index.css
├── package.json
└── README.md

public/index.html — единственный HTML-файл. src/index.js подключает React к div с id root. src/App.js — первый компонент, который вы будете менять чаще всего.

Первый компонент

function Greeting({ name }) {
  return (
    <section>
      <h2>Привет, {name}!</h2>
      <p>Это мой первый компонент.</p>
    </section>
  );
}

export default Greeting;

import Greeting from './Greeting';

function App() {
  return (
    <main>
      <Greeting name="Алиса" />
      <Greeting name="Боб" />
    </main>
  );
}

export default App;

Команды npm в CRA

Когда CRA всё ещё полезен

• Нужно поддерживать старый проект.
• Курс или инструкция написаны именно под CRA.
• Вы хотите понять, как были устроены многие React-проекты прошлых лет.

Когда лучше сразу перейти на Vite

Если вы начинаете новый учебный или рабочий проект, выбирайте Vite. Он быстрее запускает dev-сервер, проще устроен и активнее развивается. CRA стоит воспринимать как важный исторический инструмент, а не как главный старт для 2026 года.

Vite особенно заметно выигрывает в учебных проектах и небольших приложениях: меньше ожидания при запуске, проще конфигурация, быстрее обратная связь. Если нет жёсткой причины повторять старый курс на CRA, новый проект разумнее начинать на Vite.

Как жить со старым CRA-проектом

Если вам достался проект на Create React App, не переписывайте его сразу. Сначала запустите, соберите и посмотрите зависимости. В рабочих проектах важнее стабильность, чем модный инструмент сборки.

Задача в таком проекте — сначала стабилизировать запуск, а уже потом думать о миграции. Зафиксируйте рабочую версию Node.js, проверьте сборку и только после этого решайте, есть ли экономический смысл переносить проект на Vite.

Быстрая проверка проекта

npm install
npm start
npm run build

• посмотрите версию Node.js, на которой проект стабильно собирается;
• откройте package.json и оцените возраст зависимостей;
• зафиксируйте инструкции запуска в README;
• если npm install падает, проверьте package-lock.json и старые peer dependencies.

Когда миграция на Vite оправдана

Миграция имеет смысл, если dev-сервер заметно тормозит, зависимости устарели, сборка регулярно ломается или проект активно развивается. Если приложение небольшое и редко меняется, иногда дешевле оставить CRA и обновлять только нужные пакеты.

Когда не трогать CRA

Если проект стабильно работает, редко меняется и не страдает от скорости сборки, миграция может не окупиться. Лучше зафиксировать инструкции запуска в README и обновлять зависимости точечно.

Что ломается при быстрой миграции

Обратите внимание на переменные окружения, путь к index.html, папку production-сборки и работу со статическими файлами. Именно на этих деталях чаще всего ломается быстрая миграция.

// CRA
process.env.REACT_APP_API_URL

// Vite
import.meta.env.VITE_API_URL

• в Vite переменные окружения должны начинаться с VITE_;
• папка сборки называется dist, а не build;
• index.html лежит в корне проекта;
• для SVG и ассетов могут отличаться правила импорта.