Создание первого приложения на React

Иллюстрация: стартовая страница Create React App

React — это библиотека JavaScript для создания быстрых и интерактивных пользовательских интерфейсов. Изначально разработана Facebook; на сегодня React — одна из самых популярных библиотек для фронтенд-разработки.

Статья объясняет, как создать ваше первое приложение на React и с чего начать обучение и разработку.

Что вы получите из этой статьи

Быстрый старт: команда для создания проекта, запуск dev-сервера и сборка для продакшна.
Понимание начальной структуры проекта, где править код и где запускать тесты.
Альтернативы и контрольные списки для запуска, деплоя и отладки.

Важно: Перед началом убедитесь, что у вас установлены Node.js и npm или yarn.

Требования (Prerequisites)

Коротко: нужен Node.js, менеджер пакетов (npm или yarn) и редактор кода.

Установите Node.js (рекомендуется LTS-версия). Проверьте версии:

node --version
npm --version

Если вы используете yarn:

yarn --version

Редактор кода: Visual Studio Code или другой редактор по вкусу.
Базовые знания HTML, CSS и JavaScript (включая современные возможности ES6) существенно упростят обучение React.

Как сгенерировать boilerplate с create-react-app

Create React App (CRA) создаёт готовую структуру проекта и конфигурирует сборку за вас — вам не нужно вручную настраивать webpack или Babel.

Откройте терминал, перейдите в папку, где хотите создать проект, и выполните:

npx create-react-app my-first-react-app

Замените my-first-react-app на любое имя (регистр символов учитывать: избегайте заглавных букв).

После завершения установки вам покажут подсказки по запуску проекта, например:

npm start
  Starts the development server.

npm run build
  Bundles the app into static files for production.

npm test
  Starts the test runner.

npm run eject
  Removes this tool and copies build dependencies, configuration files
  and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd my-first-react-app
  npm start

Happy hacking!

Перейдите в каталог проекта:

cd my-first-react-app

Откройте проект в редакторе кода.

Начальная структура проекта

После создания проекта в корне вы увидите примерно следующую структуру:

my-first-react-app
├── README.md
├── node_modules
├── package.json
├── package-lock.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── serviceWorker.js
    └── setupTests.js

README.md — базовая документация проекта.
.gitignore — список файлов/папок, игнорируемых в Git.

Файл .gitignore в приложении React

node_modules — установленные зависимости.
package.json — метаданные проекта и список зависимостей.

Файл package.json в корне проекта React

package-lock.json фиксирует точный дерево зависимостей для детерминированных установок.
public — статические файлы, в т.ч. index.html, который служит точкой входа для браузера.
src — исходный код приложения; здесь вы будете работать.

Запуск dev-сервера

Запустите development сервер:

npm start

или если вы предпочитаете yarn:

yarn start

Обычно браузер откроет http://localhost:3000 автоматически. Если нет — откройте эту ссылку вручную.

Стартовая страница приложения React (localhost:3000)

Где изменить код: пример App.js

Откройте src/App.js. По умолчанию там код примерно такой:

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    
      
        
        
          Edit src/App.js and save to reload.
        
        
          Learn React
        
      
    
  );
}

export default App;

Чтобы вывести простой Hello World, замените содержимое компонента на:

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    
      
        
        
          Hello World!
        
      
    
  );
}

export default App;

Сохраните файл — изменения автоматически отобразятся в браузере.

Пример Hello World в приложении React

Поздравляю — ваше первое приложение React работает.

Запуск тестов

В папке src по умолчанию есть базовый unit-тест в App.test.js:

import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render();
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

Запустите тесты:

npm test

или

yarn test

Тест-раннер запустится в интерактивном режиме; для быстрого прогона можно использовать флаги (смотрите документацию на тесты и react-scripts).

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

Для готового к деплою бандла выполните:

npm run build

или

yarn build

Результат будет в папке build — оптимизированные статические файлы, готовые к размещению на любом статическом хостинге.

Альтернатива: Vite, Next.js, ручная настройка

CRA хорош для быстрого старта, но есть альтернативы:

Vite — быстрый инструмент для разработки с мгновенной перезагрузкой, меньше времени на cold start.
Next.js — фреймворк, если нужен серверный рендеринг (SSR), маршрутизация и оптимизация для SEO.
Ручная настройка (webpack + Babel) — когда нужен полный контроль над сборкой.

Когда не использовать CRA: если вам нужен SSR, специфическая конфигурация сборки или очень тонкая оптимизация, рассмотрите Next.js или ручную конфигурацию.

Мини-методология: как пройти путь от идеи до деплоя

Создайте проект локально (CRA или Vite).
Настройте систему контроля версий (git) и .gitignore.
Разработайте компоненты и стили в src/.
Пишите тесты для ключевой логики.
Сборка и проверка локально (npm run build).
Деплой на staging и smoke-тесты.
Деплой в продакшн.

Чек-лист перед деплоем

Все критические тесты проходят.
Нет ошибок в консоли браузера.
Переменные окружения настроены для продакшна.
Локальные данные (mock) заменены на реальные API.
sourcemap’ы и логирование настроены корректно.

Ролевые задачи (быстрая ориентировка)

Разработчик: код, тесты, локальный запуск.
Ревьюер: проверка архитектуры компонентов, доступность и производительность.
DevOps: сборка, CI/CD и деплой.

Примеры типичных проблем и как их решать

Проблема: порт 3000 занят. Решение: завершите процесс или задайте другой порт через PORT=3001 npm start.
Проблема: изменения не применяются. Решение: проверьте кэш браузера или перезапустите dev-сервер.
Проблема: конфликт зависимостей. Решение: удалите node_modules и package-lock.json, затем npm install.

Критерии приёма

Проект запускается командой npm start и доступен по http://localhost:3000.
Hello World отображается при изменении src/App.js.
npm run build генерирует папку build с минимизированными файлами.

1‑строчный словарь терминов

CRA — Create React App: инструмент для быстрого старта.
Dev-сервер — локальный сервер для разработки (hot reload).
SSR — Server-Side Rendering: рендеринг на сервере.

Сравнение: CRA vs Vite vs Next.js (кратко)

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

Матрица рисков и смягчения

Сломанные зависимости: держите lock-файлы, используйте стабильные версии.
Пробелы в безопасности: обновляйте зависимости и проверяйте уязвимости npm audit.
Неправильный деплой: тестируйте сборку локально и на staging перед релизом.

Советы по дальнейшему изучению

Изучите JSX, состояние (useState), эффекты (useEffect) и контекст (Context API).
Попробуйте маршрутизацию с react-router.
Ознакомьтесь с менеджментом состояния (Redux, Zustand) при необходимости.

Заключение

Создание первого приложения на React — простой и быстрый процесс с помощью инструментов вроде create-react-app. Начните с базовой структуры, попрактикуйтесь в компонентном подходе, напишите пару тестов и разверните сборку для продакшна. По мере роста проекта оцените альтернативы (Vite, Next.js) и переходите на более гибкие конфигурации, если потребуется.

Ключевые действия: установить Node.js, выполнить npx create-react-app, перейти в каталог проекта, запустить npm start, править src/App.js, собрать npm run build.

Дополнительные ресурсы

Официальная документация React: https://reactjs.org
Документация Create React App: https://create-react-app.dev

Краткое резюме: начните с CRA для простого старта, учите основы JavaScript, затем постепенно изучайте более продвинутые инструменты и шаблоны архитектуры.