Урок 02

Установка и первый проект

Требования

Node.js версии 20 или выше
npm, yarn или pnpm

Проверить версии:

node --version
npm --version

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

Самый быстрый способ — Vite:

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev

Открой http://localhost:5173.

Vite запускается мгновенно и обновляет страницу при изменении файлов через HMR (Hot Module Replacement).

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

my-app/
├── public/              # статика (favicon, картинки)
├── src/
│   ├── assets/          # ресурсы
│   ├── App.tsx          # корневой компонент
│   ├── App.css
│   ├── main.tsx         # точка входа
│   └── index.css
├── index.html           # HTML-шаблон
├── package.json
├── tsconfig.json
└── vite.config.ts

Точка входа

src/main.tsx:

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
import './index.css';

createRoot(document.getElementById('root')!).render(
    <StrictMode>
        <App />
    </StrictMode>,
);

createRoot монтирует React в DOM-узел #root. StrictMode включает дополнительную проверку в dev-режиме.

Корневой компонент

src/App.tsx:

export default function App() {
    return (
        <div>
            <h1>Hello, React</h1>
        </div>
    );
}

HTML-шаблон

index.html содержит <div id="root"></div> — контейнер, в который рендерится приложение.

Альтернативы

Next.js — фреймворк с SSR, роутингом, API. npx create-next-app@latest
Remix — фреймворк для фулстека
CRA (Create React App) — устарел, не используй

Команды

npm run dev      # запуск dev-сервера
npm run build    # сборка продакшен-версии
npm run preview  # просмотр собранной версии

Vite vs Next.js

Vite + React — чистый SPA. Легко, быстро, всё на клиенте.

Next.js — если нужен SSR, SEO, API-роуты, фулстек. Сложнее, но функциональнее.

Для обучения React начинай с Vite.