Как работает Create React App?

Как работает Create React App

Create React App (CRA) - это инструмент, который я часто использовал раньше. Хотя сейчас я предпочитаю Next.js, понимание того как CRA работает, остаётся полезным. Расскажу о его внутреннем устройстве.

1. Что делает Create React App при инициализации

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

Эта команда создаёт новый проект с уже сконфигурированным:

• Webpack (сборщик модулей)
• Babel (транспилер для JavaScript)
• ESLint (линтер)
• Jest (фреймворк для тестов)
• Development сервер с hot reload

2. Структура проекта CRA

my-app/
├── public/
│   ├── index.html          # Основной HTML файл
│   ├── favicon.ico
├── src/
│   ├── App.js              # Главный компонент
│   ├── index.js            # Точка входа для React
├── package.json
├── .gitignore
├── README.md

index.html - это единственный реальный HTML файл. React монтирует сюда свой код.

3. Что происходит при npm start

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Вот алгоритм:

1. Webpack берёт все файлы .js/.jsx
2. Babel транспилирует JSX в React.createElement() вызовы
3. Webpack объединяет всё в бандл (обычно main.js)
4. Dev-сервер запускается на http://localhost:3000
5. Он инджектит скрипт hot reload
6. Браузер загружает index.html
7. React монтирует приложение в элемент #root

4. Конфигурация Webpack (спрятана)

CRA скрывает Webpack конфигурацию за командой npm run eject. По умолчанию:

// Примерно так выглядит скрытая конфигурация
const config = {
  mode: 'development', // или 'production'
  entry: './src/index.js',
  output: {
    path: __dirname + '/build',
    filename: '[name].[hash].js'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-react']
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  devServer: {
    port: 3000,
    hot: true // Hot Module Replacement
  }
};

5. Hot Module Replacement (HMR)

Это главная фишка CRA - при изменении файла браузер обновляется автоматически:

// CRA автоматически добавляет в dev режиме
if (module.hot) {
  module.hot.accept('./App', () => {
    // Переимпортировать и перерендерить
  });
}

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

6. Обработка импортов

// CRA может импортировать разные типы файлов

// JavaScript модули
import { sum } from './utils';

// CSS файлы
import './App.css'; // Вставится в <style> тег

// Изображения
import logo from './logo.svg'; // Вернёт URL

// JSON
import data from './data.json'; // Парсит как JavaScript объект

// SVG как React компонент (в новых версиях)
import { ReactComponent as Logo } from './logo.svg';

Вебпак использует лоадеры для каждого типа файла.

7. Environment variables

// CRA подставляет переменные из .env
const API_URL = process.env.REACT_APP_API_URL;

// .env файл
# REACT_APP_API_URL=https://api.example.com

Важно: переменные должны начинаться с REACT_APP_, иначе они не будут доступны в браузере (это защита от утечки приватных переменных).

8. Build процесс

npm run build

Это создаёт папку build/ с оптимизированным кодом:

build/
├── index.html
├── static/
│   ├── js/
│   │   ├── main.xxxxx.js (минифицирован)
│   │   ├── main.xxxxx.js.map (для debugging)
│   ├── css/
│   │   ├── main.xxxxx.css (минифицирован)
├── favicon.ico

В production режиме:

• Код минифицируется
• Comments удаляются
• Переменные переименовываются (uglify)
• CSS объединяется
• Source maps создаются (для debugging)

9. Сравнение с Next.js

Create React App         vs    Next.js
────────────────────────────────────────
CSR (Client-Side)             SSR/SSG (Server-Side)
Проста для начинающих         Сложнее, но мощнее
Tрадиционное SPA              SSG + SSR комбо
Рутинг - нужна react-router  Встроенный file-based routing
Деплой как статику            Нужен Node сервер

Именно поэтому я перешёл на Next.js - это даёт лучшую SEO и производительность.

10. Когда использовать CRA

CRA хорош для:

• Учебных проектов
• Dashboard'ов и админ-панелей
• Приложений, которые не нуждаются в SEO

Не подходит для:

• Публичных сайтов (нужна SSR для SEO)
• Проектов с высокими требованиями к производительности
• Когда нужна полная кастомизация сборки

11. Eject - точка невозврата

npm run eject

Эта команда раскрывает всю конфигурацию Webpack, Babel и т.п. Это НЕОБРАТИМО:

После eject ты:
✓ Получаешь полный контроль
✗ Теперь отвечаешь за обновления
✗ Становится намного больше файлов конфигурации
✗ Сложнее поддерживать

Я редко использую eject - проще просто перейти на Next.js или другой инструмент.

Итог

Create React App - это правильный инструмент, чтобы начать разработку React приложения без головной боли с конфигурацией. Но для production приложений я выбираю Next.js или Vite. CRA скрывает сложность, что хорошо для начинающих, но ограничивает возможности опытных разработчиков.