Глава 2. Как устроен проект и что делают команды npm

Зачем эта глава

Когда проект создан, внутри появляется много файлов и папок. Если не понимать, что где находится, легко что-то удалить или сломать.

Мы разберём структуру проекта, основные файлы и команды npm. Это основа для любой разработки.

Теория (коротко)

package.json — главный файл проекта. В нём список библиотек и команды.

node_modules — папка с библиотеками. Она создаётся автоматически и обычно не хранится в Git.

src — папка с нашим кодом. Здесь находятся компоненты, стили и логика.

public — статические файлы: иконки, картинки, шрифты.

Главные команды npm

npm install         # установить зависимости
npm run dev         # запустить сервер разработки
npm run build       # собрать проект для публикации
npm run preview     # локальный просмотр сборки

Пример package.json

{
  "name": "my-react",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

Git: базовые команды

Git помогает сохранять историю изменений. Это важно, когда работаешь с заказчиком или возвращаешься к старой версии.

git init
git status
git add .
git commit -m "init"
git log

Файл .gitignore говорит Git, какие файлы не нужно сохранять (например, node_modules).

node_modules/
.env
dist/

Архитектура проекта: как организовать папки

Есть два популярных подхода:

• По слоям: components, pages, hooks, utils.
• По фичам: каждая функция приложения живёт в своей папке.

src/
features/
  cart/
    components/
    hooks/
    api.js
shared/
  ui/
  utils/

Задания