Создание проекта на React

1. (откроется в новой вкладке)Node.js — среда, чтобы запускать Javascript не только в браузере. React-проект собирается через Node. По сути, это серверный движок, который берет на себя всю «тяжелую» работу по сборке файлов, обработке кода и установке библиотек, пока вы пишете логику приложения.
2. npm или yarn — менеджеры пакетов (ставятся вместе с Node).
3. Браузер (Chrome/Firefox).
4. Редактор кода ((откроется в новой вкладке)VS Code — бесплатный и лучший для (откроется в новой вкладке)React). Он имеет встроенную подсветку синтаксиса JSX, автодополнение кода и мощный дебаггер. Благодаря огромному магазину расширений вы можете добавить всё что угодно: от проверки ошибок на лету до автозакрытия тегов и подсветки цветов.

Раньше все использовали create-react-app (CRA). Сейчас быстрее и проще — (откроется в новой вкладке)Vite.

Он в 10 раз быстрее запускает проект и требует меньше настроек. Это достигается за счёт того, что Vite не собирает весь проект целиком при старте, а использует нативные ES-модули в браузере. Благодаря этому изменения в коде применяются мгновенно, без пересборки всего приложения.

Открой терминал (командную строку) и выполни по очереди:

# 1. Создаём новый проект с именем "my-react-app"
npm create vite@latest my-react-app -- --template react

# 2. Переходим в папку проекта
cd my-react-app

# 3. Устанавливаем все нужные пакеты
npm install

Если используешь yarn: yarn create vite my-react-app --template react потом cd my-react-app и yarn

npm run dev

Через пару секунд в терминале появится ссылка: http://localhost:5173/

Открой её в браузере — увидишь вращающийся логотип React и счётчик кнопок.

Поздравляю! Твоё первое React-приложение работает.

my-react-app/
├── public/          # статические файлы (иконка, favicon)
├── src/             # ВСЯ ТВОЯ РАБОТА будет здесь
│   ├── assets/      # картинки, шрифты
│   ├── App.jsx      # главный компонент
│   ├── App.css      # стили для него
│   ├── main.jsx     # ТОЧКА ВХОДА — отсюда всё стартует
│   └── index.css    # глобальные стили
├── index.html       # главная HTML-страница (там всего один div#root)
├── package.json     # список всех библиотек и скриптов
└── vite.config.js   # настройки Vite (пока не трогаем)

Самое важное

1. main.jsx — рендерит <App /> в div#root.

2. App.jsx — твой главный компонент, его и будешь менять.

Открой src/App.jsx и замени всё содержимое на:

function App() {
  return (
    <div>
      <h1>Мой первый React-проект!</h1>
      <p>Всё работает 🚀</p>
    </div>
  );
}

export default App;

Сохрани файл — браузер автоматически обновится (это Hot Module Replacement). Ты увидишь свой текст вместо логотипа.

HMR обновляет только те модули, которые были изменены, без полной перезагрузки страницы. Это значит, что состояние компонентов (например, введённый текст в форме или выбранные вкладки) сохраняется, а время ожидания сводится к нулю.

1. Открой src/App.jsx.
2. Добавь ещё один абзац <p> с любым текстом.
3. Поменяй цвет заголовка через style={{ color: 'blue' }}.

Убедись, что изменения отобразились в браузере.

Ошибка: 'vite' is not recognized

Решение: Убедись, что Node.js установлен. Перезапусти терминал после установки.

В следующем уроке разберём JSX — ту самую смесь HTML и JavaScript, которую ты только что написал внутри return (...).