Теория

Настоящий проект: Vite, модули и итоговый магазин

С сайта — на свой компьютер

До сих пор React работал прямо на странице курса: библиотека была подключена, а JSX превращался в JavaScript за кулисами. Настоящие приложения делают иначе: проект — это папка с файлами на компьютере, где каждый компонент лежит в своём файле, а специальный инструмент — сборщик — собирает их в готовый сайт. В этой теме — как это устроено и как начать свой проект.

Node.js и npm

Сборщик и другие инструменты разработчика написаны на JavaScript и работают в Node.js — JavaScript вне браузера. Вместе с Node.js ставится npm — менеджер пакетов: он скачивает библиотеки (React, React Router и тысячи других) из общего каталога npmjs.com.

Установи Node.js с сайта nodejs.org (версию LTS) и проверь в терминале:

node --version
npm --version

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

Vite — быстрый и самый популярный сборщик для React-проектов. Создай проект одной командой:

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

npm create vite@latest my-shop — создать папку my-shop с заготовкой проекта;
npm install — скачать все библиотеки, которые нужны проекту;
npm run dev — запустить сервер разработки. Он напишет адрес, например http://localhost:5173 — открой его в браузере.

Сервер разработки следит за файлами: сохранил изменения — страница обновилась сама за долю секунды, причём состояние компонентов по возможности сохраняется.

Что внутри проекта

my-shop/
├── index.html          ← единственная HTML-страница с <div id="root">
├── package.json        ← описание проекта: зависимости и команды
├── package-lock.json   ← точные версии всех установленных пакетов
├── vite.config.js      ← настройки сборщика
├── node_modules/       ← скачанные библиотеки (не редактируют и не хранят в git)
├── public/             ← файлы «как есть»: иконка, картинки
└── src/
    ├── main.jsx        ← точка входа: createRoot(...).render(<App />)
    ├── App.jsx         ← корневой компонент
    ├── App.css
    └── index.css

package.json — паспорт проекта:

{
  "name": "my-shop",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }
}

Новую библиотеку добавляют командой npm install имя — она скачается в node_modules и запишется в dependencies. Например, npm install react-router-dom.

Модули: import и export

На сайте весь код был в одном файле. В проекте каждый файл — отдельный модуль со своей областью видимости: переменные одного файла не видны в другом, пока их явно не экспортировали и не импортировали.

Именованный экспорт — модуль отдаёт несколько вещей по именам:

// src/utils/money.js
export function formatPrice(price) {
  return price.toFixed(2) + " сомони";
}

export const CURRENCY = "TJS";

// src/components/ProductCard.jsx
import { formatPrice, CURRENCY } from "../utils/money.js";

Экспорт по умолчанию — одна главная вещь модуля. Так обычно экспортируют компоненты:

// src/components/ProductCard.jsx
import { formatPrice } from "../utils/money.js";

export default function ProductCard({ product }) {
  return (
    <div className="card">
      <h3>{product.title}</h3>
      <p>{formatPrice(product.price)}</p>
    </div>
  );
}

// src/App.jsx
import ProductCard from "./components/ProductCard.jsx";   // имя выбираешь при импорте

Что	Экспорт	Импорт
Именованный	`export function f() {}` / `export const x = 1`	`import { f, x } from "./file.js"`
По умолчанию	`export default function App() {}`	`import App from "./App.jsx"`
Переименовать	—	`import { f as format } from "./file.js"`
Из библиотеки	—	`import { useState } from "react"`
Стили	—	`import "./App.css"`

Пути: ./ — та же папка, ../ — на уровень выше. Если путь начинается без точки ("react", "react-router-dom"), это пакет из node_modules.

Теперь понятно, откуда во всех примерах курса строка const { useState } = React;: в проекте её заменяет import { useState } from "react";.

Как разложить проект по файлам

Нет единственно правильной структуры, но для начала хватит такой:

src/
├── main.jsx
├── App.jsx                 ← маршруты
├── api/products.js         ← функции запросов к серверу
├── context/CartContext.jsx ← CartProvider и хук useCart
├── hooks/useFetch.js       ← свои хуки
├── components/             ← переиспользуемые части: Header, ProductCard, Button
└── pages/                  ← страницы: HomePage, ProductPage, CartPage

Правило: компонент, который больше ~100 строк или используется в нескольких местах, — повод вынести его в свой файл.

Стили

В Vite CSS-файл просто импортируют в компонент — и стили попадают на страницу:

import "./ProductCard.css";

Чтобы классы разных компонентов не конфликтовали, используют CSS-модули: файл ProductCard.module.css и import styles from "./ProductCard.module.css" → className={styles.card}. Также популярен Tailwind CSS — готовые маленькие классы прямо в разметке.

Сборка и публикация

npm run dev — для разработки. Чтобы выложить сайт, его собирают:

npm run build

Vite превращает JSX в JavaScript, склеивает все модули в несколько файлов, сжимает их и кладёт результат в папку dist/. Это обычные статические файлы — HTML, CSS и JS. Их можно выложить на любой хостинг, многие бесплатны: Netlify, Vercel, Cloudflare Pages, GitHub Pages. Обычно достаточно подключить репозиторий на GitHub — хостинг сам будет запускать npm run build после каждого изменения.

Не забудь про настройку для React Router из прошлой темы: на любой адрес хостинг должен отдавать index.html.

Полезные инструменты

React Developer Tools — расширение браузера: дерево компонентов, их props и состояние, Profiler.
ESLint (уже настроен в шаблоне Vite) — находит ошибки, в том числе нарушения правил хуков и забытые зависимости эффектов.
Git — история изменений проекта; node_modules и dist в него не добавляют (файл .gitignore).
TypeScript — шаблон --template react-ts: типы для props и состояния ловят ошибки ещё до запуска.
Next.js — фреймворк поверх React: маршруты по файлам, загрузка данных на сервере, SEO. Этот сайт сделан на нём.

Итоговый проект

Последняя задача темы — мини-магазин, в котором встречается почти всё из курса: компоненты и props, списки и key, состояние и неизменяемые обновления, эффект с загрузкой данных, маршруты с параметрами, вычисления при отрисовке. Реши его, а потом попробуй повторить на своём компьютере в проекте Vite, разложив по файлам: pages/, components/, context/CartContext.jsx. Это и будет твой первый настоящий React-проект для портфолио.

Итог

Node.js + npm — среда и менеджер пакетов; npm create vite@latest, npm install, npm run dev.
package.json — зависимости и команды; библиотеки — npm install имя.
Каждый файл — модуль: export / export default и import.
Пакеты импортируют по имени ("react"), свои файлы — по пути ("./App.jsx").
npm run build → папка dist/ → бесплатный хостинг.