Как создать первое приложение на React и запустить его локально

node --version

npm --version

npx create-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

npm start

yarn start

import logo from './logo.svg';  
import './App.css';  
  
function App() {  
 return (  
   
   
   
 
  
 Edit src/App.js and save to reload.  
 
  
   
 Learn React  
   
   
 

import logo from './logo.svg';  
import './App.css';  
  
function App() {  
 return (  
   
   
   
 
  
 Hello World!  
 
  
   
 

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

Поздравляем — ваше первое приложение на React запущено!

Тестирование

По умолчанию в проекте создаётся тест для компонента App в файле src/App.test.js. Пример теста, использующего @testing-library/react:

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

Тестовый раннер запустится в режиме наблюдения и будет перезапускать тесты при изменениях файлов.

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

Для создания оптимизированной сборки выполните:

npm run build

или

yarn build

Команда создаст директорию build/ с готовыми статическими файлами, которые можно разместить на любом хостинге (Netlify, Vercel, GitHub Pages, S3, nginx и т. п.).

Ключевые моменты при деплое:

• Проверьте переменные окружения (REACTAPP*), если они нужны.
• Настройте корректную обработку путей (особенно при SPA и client-side routing).

Когда Create React App может не подойти

Важно понимать ограничения и ситуации, когда create-react-app (CRA) не лучший выбор:

• Нужна максимально быстрая начальная сборка и минимальный overhead — рассмотрите Vite.
• Требуется серверный рендеринг (SSR) из коробки — используйте Next.js.
• Требуется нестандартная конфигурация webpack/плагинов и вы готовы поддерживать конфиг — можно выполнить npm run eject или настроить кастомный билд.
• Проект ориентирован на микрофронтенды или специфичные сборки под CDN — возможно, лучше собрать кастомную конфигурацию.

Альтернативные подходы и инструменты

• Vite — очень быстрый dev-сервер и сборка, особенно для небольших/средних проектов.
• Next.js — если вам нужен SSR, статическая генерация (SSG) или маршрутизация уровня приложения.
• Remix — для приложений с акцентом на маршрутизацию и работу с данными на сервере.
• Parcel — zero-config сборщик с простотой использования.

Выбор зависит от требований к производительности, SEO, маршрутизации и рабочему процессу команды.

Мини-методология: от идеи до деплоя (5 шагов)

1. Инициировать проект: npx create-react-app my-app.
2. Версионировать и настроить Git + .gitignore.
3. Разделить приложение на компоненты и папки по функциональности (фича-ориентированная структура).
4. Настроить тесты и CI (например GitHub Actions) для автоматической проверки.
5. Создать production build и развернуть на выбранном провайдере.

Контрольный чеклист разработчика

• Установлены Node.js и npm/yarn
• Проект создан: npx create-react-app
• Приложение запускается локально: npm start
• Базовые юнит-тесты проходят: npm test
• Собрана production-версия: npm run build
• Настроен CI/CD и окружения (dev/staging/prod)

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

• Локальный dev-сервер запускается и отображает приложение на http://localhost:3000.
• При изменении кода UI автоматически обновляется (hot reload).
• Production-билд успешно собирается в папку build/ без ошибок.
• Критические тесты проходят в CI.

Модель принятия решения (Mermaid)

flowchart TD
  A[Нужно быстро начать проект?] -->|Да| B[Create React App]
  A -->|Нет| C[Оценить требования]
  C --> D{Нужен SSR или SSG?}
  D -->|Да| E[Next.js]
  D -->|Нет| F{Нужна максимальная скорость dev-сервера?}
  F -->|Да| G[Vite]
  F -->|Нет| H[CRA или собственная конфигурация]

Краткая галерея исключительных случаев

• Если приложение рассчитано на очень старые браузеры, может понадобиться дополнительный полифилл-процесс.
• Если проект использует много нативных модулей Node.js на серверной части, рассмотрите разделение backend/frontend.

1-строчный глоссарий

• Компонент: повторно используемый блок UI в React.
• JSX: синтаксис, похожий на HTML внутри JavaScript, используемый в React.
• Props: входные параметры компонента.
• State: внутреннее состояние компонента.

Риски и смягчения

Риск: неожиданная уязвимость в одной из npm-зависимостей. Смягчение: регулярно обновлять зависимости и проводить аудит (npm audit).

Риск: конфликты при eject. Смягчение: использовать eject только осознанно и документировать изменения.

Рекомендации по следующему шагу

• Изучите базовые хуки React: useState, useEffect, useRef.
• Попробуйте подключить роутер (react-router) и понять client-side routing.
• Освойте управление состоянием (контекст + reducer, затем Redux или Zustand для крупных проектов).

Краткое резюме

• Create React App — быстрый путь создать и запустить React-приложение без ручной настройки сборки.
• Для специфических требований рассмотрите альтернативы: Vite, Next.js, Parcel.
• Обязательно понимайте основы JavaScript — это вложение, которое сэкономит время при работе с любым фреймворком.

Важно: начните с малого проекта, пройдите цикл «разработка → тест → сборка → деплой», и затем расширяйте архитектуру по мере роста требований.