Node.js, npm
и проект на Vite

Категория

Рабочее место

Уровень

Начальный

Что понадобится

Компьютер с интернетом, VS Code, права на установку программ

Результат

Проект zayavki запускается командой npm run dev и открывается в браузере

§1Зачем нужен Node.js

В главе 0.1 сказано, что браузер выполняет только HTML, CSS и JavaScript. Проект на React пишется на TypeScript и JSX. TypeScript — это JavaScript, в котором у переменных указан тип: число, строка, список. Перед запуском проверка типов находит ошибки вроде «в поле для числа записан текст». JSX — запись разметки внутри кода, она разобрана в главе 0.1. Кроме того, проект разбит на десятки файлов и использует чужие библиотеки. Прежде чем браузер покажет такой проект, его нужно превратить в обычные файлы JavaScript и CSS. Эту работу выполняют инструменты разработчика, и почти все они написаны на JavaScript.

Node.js — программа, которая выполняет JavaScript вне браузера, прямо на компьютере. В сравнении с мастерской Node.js — это электричество, от которого работают станки. Node.js запускает инструменты, написанные на JavaScript: менеджер пакетов npm, который скачивает библиотеки, и Vite, который собирает проект и показывает его в браузере.

React в Node.js не запускается: в Node.js работают инструменты, которые готовят проект, а React выполняется в браузере. Поэтому ошибки при установке и запуске (раздел §9) появляются в терминале, а ошибки в коде компонентов — в браузере.

§2Установка Node.js

У Node.js выходит много версий, и для учёбы и работы берут версию с пометкой LTS (Long Term Support — долгосрочная поддержка). Такая версия получает исправления ошибок и уязвимостей около двух с половиной лет, и её обновления не ломают уже написанные проекты. В октябре 2026 года LTS — версия 24; 28 октября 2026 года статус LTS получит версия 26. Vite 8, на котором создаётся проект, требует Node.js не ниже 20.19 или 22.12, поэтому подходит любая из этих версий.

Установщик скачивается с сайта nodejs.org/en/download. Сайт сам определяет систему и подставляет её в строку «Get Node.js for …». В середине страницы показан блок команд для установки через Docker — программу, которая запускает приложения в отдельных контейнерах. Этот блок нужно пропустить: ниже, в строке «Or get a prebuilt Node.js», находятся кнопки обычного установщика.

На снимке в первой строке выбраны версия v24.21.0 с пометкой LTS и система Windows. Строка «using Docker» относится только к блоку команд под ней. Кнопка, которая нужна студенту на Windows, — Windows Installer (.msi) в нижней строке; рядом выбрано x64 — тип процессора, который стоит в большинстве компьютеров с Windows.

1. Скачайте установщик

   Нажмите Windows Installer (.msi) и откройте скачанный файл.

2. Пройдите окна установщика

   Нажмите Next, примите лицензию, оставьте папку C:\Program Files\nodejs\. В окне Custom Setup ничего не меняйте: компоненты npm и Add to PATH включены по умолчанию. Последний пункт добавляет Node.js в список папок, где терминал ищет программы.

   Место под кадр с компьютера в классе

   Окно установщика Node.js на Windows, шаг Custom Setup: в списке компонентов отмечены Node.js runtime, npm package manager и Add to PATH.

3. Пропустите дополнительные инструменты

   Флажок Automatically install the necessary tools (Tools for Native Modules) оставьте пустым: для проектов дисциплины он не нужен и ставит несколько гигабайт программ.

   Место под кадр с компьютера в классе

   Окно установщика Node.js на Windows, шаг Tools for Native Modules: флажок «Automatically install the necessary tools» снят.

4. Завершите установку и перезапустите VS Code

   Нажмите Install, затем Finish. Если VS Code был открыт, закройте и откройте его заново: терминал загружает список папок, где ищет программы (PATH), только при открытии. В терминале, открытом до установки, Node.js в этом списке нет.

1. Скачайте установщик

   На странице загрузки в нижней строке выбрана система macOS. Нажмите macOS Installer (.pkg).

2. Пройдите окна установщика

   Откройте файл .pkg, нажимайте Продолжить, примите лицензию и введите пароль пользователя. Установщик ставит node и npm в папку /usr/local/bin.

3. Перезапустите VS Code

   Если VS Code был открыт, закройте его полностью (⌘Q) и откройте заново: терминал загружает список папок, где ищет программы (PATH), только при открытии. В терминале, открытом до установки, Node.js в этом списке нет.

1. Установите nvm

   На Linux Node.js удобнее ставить через nvm — программу, которая хранит несколько версий Node.js и переключает их. Команда установки взята со страницы загрузки nodejs.org:

   curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.8/install.sh | bash

2. Подключите nvm в открытом терминале

   \. "$HOME/.nvm/nvm.sh"

   Точка в начале строки выполняет файл в текущем терминале. В новых терминалах nvm подключится сам.

3. Установите Node.js 24

   nvm install 24

Проверка установки

Проверка выполняется в терминале VS Code. Перед ней создаётся папка, в которой будут лежать все проекты дисциплины.

1. Создайте папку для проектов

   Имя — латиницей, без пробелов: react-kurs. Это имя будет видно в терминале и в командах.

   В Проводнике откройте Документы, щёлкните правой кнопкой по пустому месту → Создать → Папку и назовите её react-kurs. Путь получится C:\Users\<ваше имя>\Documents\react-kurs.

   В Finder откройте папку Документы, нажмите ⇧+⌘+N и назовите новую папку react-kurs.

   В домашней папке создайте папку react-kurs в файловом менеджере или командой в терминале:

   mkdir ~/react-kurs

2. Откройте папку в VS Code

   Меню File → Open Folder…, выберите react-kurs и нажмите Выбрать папку (Select Folder). Если VS Code спросит «Do you trust the authors of the files in this folder?», нажмите Yes, I trust the authors. Без этого VS Code откроет папку в ограниченном режиме, где часть функций отключена. Слева в проводнике появится заголовок REACT-KURS.

3. Откройте терминал

   Меню Terminal → New Terminal или сочетание Ctrl+` (клавиша с буквой Ё). Внизу окна появится панель с вкладкой TERMINAL. Строка слева от курсора заканчивается именем папки: react-kurs $ на macOS и Linux, PS C:\Users\…\react-kurs> на Windows.

4. Введите две команды

   Наберите первую команду, нажмите Enter, затем вторую и снова Enter:

   node -v
   npm -v

5. Сверьте результат с кадром

   После каждой команды терминал печатает номер версии. Числа должны начинаться с v24 и 11: последние цифры у вас могут быть больше, если вышли исправления.

   

Set-ExecutionPolicy -Scope CurrentUser RemoteSigned

Ключ -v (от слова version) просит программу назвать свою версию и завершиться. Слева от каждой команды терминал показывает имя текущей папки — react-kurs, справа от знака $ — набранную команду. Первая команда вывела v24.21.0: Node.js установлен и терминал его находит. Вторая вывела 11.19.0: вместе с Node.js установился npm. На Windows в PowerShell строка слева выглядит иначе, а ответы команд те же.

Node.js установлен. Следующая программа — npm — установилась вместе с ним, и с ней студент работает на каждом занятии.

§3npm и файл package.json

Пакет — библиотека или программа, опубликованная в общем хранилище, чтобы ею могли пользоваться другие. Пакетами распространяются React, Vite и TypeScript. Общее хранилище называется реестром npm (npmjs.com), в нём миллионы пакетов. npm (Node Package Manager) — программа, которая скачивает пакеты из реестра в проект и запускает команды проекта.

Список пакетов, которые нужны проекту, хранится в файле package.json в корне проекта — это рецепт из сравнения. Скачанные пакеты npm складывает в папку node_modules — это кладовая. Точные версии всех скачанных пакетов записываются в файл package-lock.json — это чек. Ниже файл package.json проекта, который будет создан в §4. Создавать его вручную не нужно: его запишет генератор. Здесь он показан заранее, чтобы при создании проекта было понятно, что появилось в папке.

{
  "name": "zayavki",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "oxlint",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^19.2.8",
    "react-dom": "^19.2.8"
  },
  "devDependencies": {
    "@types/node": "^24.13.3",
    "@types/react": "^19.2.18",
    "@types/react-dom": "^19.2.7",
    "@vitejs/plugin-react": "^6.1.1",
    "oxlint": "^1.81.0",
    "typescript": "~6.0.2",
    "vite": "^8.3.0"
  }
}

Файл записан в формате JSON: пары «ключ: значение» в фигурных скобках, ключи и строки в двойных кавычках. Поля разобраны по порядку.

• "name" — имя проекта, совпадает с именем папки. "private": true запрещает случайно опубликовать проект в реестр npm. "version" — версия самого проекта, для сайта она не используется.
• "type": "module" — файлы JavaScript в проекте используют запись import … from … для подключения других файлов. Эта запись встретится в §6.
• "scripts" — команды проекта с короткими именами. Команда npm run dev находит здесь имя dev и выполняет записанную справа строку vite. Так же работают ещё три команды. npm run build собирает проект для публикации. Записанная для неё строка состоит из двух команд: tsc -b проверяет типы, vite build собирает файлы. Знак && между ними запускает вторую команду, только если первая прошла без ошибок. npm run lint проверяет код линтером, npm run preview показывает собранную версию.
• "dependencies" — пакеты, которые попадут в готовый сайт. Здесь их два: react — сама библиотека компонентов, и react-dom — часть React, которая выводит компоненты на страницу браузера.
• "devDependencies" — пакеты, которые нужны только при разработке; в готовый сайт они не попадают. Это сборщик vite и его дополнение для React @vitejs/plugin-react, программа проверки типов typescript и линтер oxlint (о нём в §4). Пакеты @types/… содержат описания функций React: по ним редактор подсказывает названия функций и их параметры.

Знаки перед номерами версий задают, какие версии npm может скачать. Номер версии состоит из трёх чисел: 19.2.8 — главная версия 19, дополнительная 2, исправление 8. Знак ^ разрешает новые дополнительные версии и исправления той же главной версии: для ^19.2.8 подойдёт 19.3.0, а 20.0.0 — нет. Знак ~ разрешает только исправления: для ~6.0.2 подойдёт 6.0.5, а 6.1.0 — нет. Главная версия меняется, когда в пакете появляются несовместимые изменения, поэтому её npm сам не повышает.

Проект создаётся командой npm create. Она скачивает пакет-генератор, запускает его один раз и в проект не добавляет. Генератор задаёт несколько вопросов и создаёт папку с готовыми файлами. Для проектов на Vite генератор называется create-vite.

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

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

Проект создаётся одной командой в терминале VS Code. Перед вводом проверьте, что терминал открыт в папке react-kurs: слева от курсора написано react-kurs $ (на Windows строка заканчивается на \react-kurs>). Наберите команду и нажмите Enter:

npm create vite@latest zayavki -- --template react-ts

Команда состоит из пяти частей:

• npm create vite — запустить генератор create-vite; слово create- в имени пакета npm подставляет сам;
• @latest — взять последнюю версию генератора, даже если на компьютере осталась более старая;
• zayavki — имя папки нового проекта; имя пишется латиницей, без пробелов и заглавных букв, потому что оно станет именем пакета в package.json;
• -- — разделитель: всё, что после него, npm передаёт генератору без изменений;
• --template react-ts — шаблон «React и TypeScript». Без этого ключа генератор спросит фреймворк и вариант списком.

1. Разрешите скачать генератор

   

   Генератора ещё нет на компьютере, и npm спрашивает, можно ли его скачать: Need to install the following packages: create-vite@9.2.1 · Ok to proceed? (y). Буква (y) в скобках — ответ по умолчанию. Нажмите y и Enter. При следующих запусках этот вопрос не появится: генератор останется в кэше npm — папке, где npm хранит скачанные пакеты.

2. Выберите линтер

   

   Над вопросом генератор напечатал служебные строки: какие команды он выполнил (строки со знаком >) и как создать проект без вопросов. Их можно пропустить. Первый вопрос — Which linter to use?: какой линтер подключить. Линтер — программа, которая читает код без запуска и сообщает о подозрительных местах: неиспользуемых переменных, нарушениях правил React. Варианты переключаются стрелками ↑ ↓, выбранный отмечен зелёным кружком. Оставьте Oxlint и нажмите Enter: он предложен по умолчанию и работает быстрее ESLint. Для проектов дисциплины подходит любой из двух.

3. Откажитесь от автоматической установки

   

   Ответ на первый вопрос записан серым под ним: Oxlint. Второй вопрос — Install with npm and start now?: установить пакеты и сразу запустить проект. По умолчанию выбрано Yes. В этой главе выберите No стрелкой → и нажмите Enter: установка и запуск будут выполнены отдельными командами, чтобы было видно, что делает каждая. В следующих проектах можно отвечать Yes.

4. Прочитайте итог

   

   Строка Scaffolding project in …/react-kurs/zayavki... сообщает, где создана папка (scaffolding — «возведение лесов», то есть создание каркаса). Ниже генератор перечисляет три команды, которые нужно выполнить дальше: перейти в папку проекта, установить пакеты, запустить сервер. Им посвящён следующий раздел. В проводнике VS Code под заголовком REACT-KURS появилась папка zayavki.

§5Установка зависимостей и запуск

Генератор создал файлы проекта, но не скачал пакеты: в папке zayavki есть package.json, но нет node_modules. Первые две команды переходят в папку проекта и скачивают всё, что перечислено в package.json:

cd zayavki
npm install

Команда cd (change directory) меняет текущую папку терминала: имя слева от $ сменилось с react-kurs на zayavki. Все следующие команды выполняются в папке проекта — там, где лежит package.json. Команда npm install прочитала package.json, скачала пакеты в папку node_modules и записала точные версии в package-lock.json. Строка added 27 packages, and audited 28 packages in 15s означает, что добавлено 27 пакетов. В package.json их перечислено 9; остальные нужны этим девяти для работы, и npm скачал их сам. Проверено 28 пакетов — 27 скачанных и сам проект. Установка заняла 15 секунд; на другом компьютере время будет другим. Строка found 0 vulnerabilities означает, что известных уязвимостей в пакетах не найдено.

Теперь можно запустить сервер разработки:

npm run dev

npm нашёл в package.json команду dev и запустил vite. Первая строка — версия Vite и время запуска: VITE v8.3.4 ready in 504 ms. Строка Local: http://localhost:5173/ — адрес, по которому проект открывается в браузере. localhost означает «этот же компьютер». 5173 — номер порта. Порт похож на номер квартиры: дом один, а письмо попадает в ту квартиру, номер которой указан. Так и запрос попадает к той программе на компьютере, которая заняла этот номер, — здесь к Vite. Строка Network: use --host to expose сообщает, что с других устройств сайт пока не открыть. Последняя строка подсказывает, что сочетание h и Enter покажет справку.

Откройте адрес в браузере: щёлкните по ссылке в терминале с зажатой клавишей Ctrl (на macOS — ⌘) или скопируйте адрес из блока ниже в адресную строку браузера.

http://localhost:5173/

Это стартовая страница шаблона. Под заголовком Get started шаблон подсказывает: Edit src/App.tsx and save to test HMR — измените файл src/App.tsx, сохраните и проверьте HMR. Что такое HMR, разобрано в §7. Кнопка Count is 0 — счётчик: каждое нажатие увеличивает число на единицу. Ниже идут ссылки на документацию Vite и React и на сообщества разработчиков Vite.

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

§6Из чего состоит проект

Слева на снимке — проводник VS Code с деревом проекта, справа открыт файл src/main.tsx. Файлы в корне проекта настраивают инструменты, а код приложения лежит в папке src. Ниже все файлы с пояснениями; выделены те, с которыми студент работает в модуле 1.

Из всех файлов браузер в первую очередь получает index.html. С него начинается цепочка, которая приводит к компоненту на экране. Ниже она разобрана по звеньям.

Звено 1: index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>zayavki</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

В голове страницы (<head>) — кодировка, значок вкладки, настройка для телефонов (viewport) и заголовок вкладки zayavki. Тело страницы (<body>) содержит две строки, от которых зависит работа React. Первая — пустой блок <div id="root"></div>. Атрибут id даёт элементу уникальное имя root (корень), по которому его найдёт код. Всё, что React нарисует, окажется внутри этого блока. Вторая строка подключает скрипт /src/main.tsx. Атрибут type="module" разрешает в скрипте запись import, то есть подключение других файлов. Браузер не выполняет TypeScript и JSX, поэтому, когда он запрашивает main.tsx, Vite переводит файл в JavaScript и отдаёт уже готовый код.

Звено 2: main.tsx

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

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

Файл из десяти строк связывает HTML-страницу с React. Первые четыре строки подключают то, что понадобится, оператором import:

• import { StrictMode } from 'react' — взять из пакета react компонент StrictMode. Фигурные скобки означают, что из пакета берётся часть с этим именем: в пакете их много. Имя без пути ('react') npm ищет в папке node_modules.
• import { createRoot } from 'react-dom/client' — взять функцию createRoot из части пакета react-dom, предназначенной для браузера.
• import './index.css' — подключить файл стилей. Путь начинается с ./ — «из этой же папки». Из файла ничего не берётся по имени: Vite добавит его стили на страницу.
• import App from './App.tsx' — взять компонент App из соседнего файла. Скобок нет, потому что App.tsx отдаёт компонент как главную часть файла (в конце App.tsx стоит export default App).

Строка 6 выполняет основную работу, и её удобнее читать по частям изнутри наружу. document.getElementById('root') находит на странице элемент с именем root — пустой блок из index.html. Восклицательный знак после скобки — запись TypeScript: она сообщает проверке типов, что элемент точно существует. Без него TypeScript предупредил бы, что функция может вернуть «ничего», если элемента нет. createRoot(…) создаёт в этом блоке корень React — блок, содержимое которого дальше меняет только React. Метод .render(…) выводит в корень то, что передано в скобках.

Внутри render записан JSX — разметка внутри кода (глава 0.1). <App /> означает «вывести компонент App»; косая черта перед закрывающей скобкой ставится, когда у элемента нет содержимого. Обёртка <StrictMode> — строгий режим: во время разработки React специально выполняет некоторые действия дважды и выводит предупреждения, чтобы раньше найти ошибки. На опубликованный сайт строгий режим не влияет.

Звено 3: App.tsx

Файл App.tsx содержит компонент — функцию App, которая возвращает разметку страницы. В строке 8 создаётся состояние счётчика count, в строках 24–30 описана кнопка, нажатие которой увеличивает счётчик. Состояние и события подробно разбираются в главе 1.4. Пока достаточно увидеть, что заголовок, картинки и кнопка стартовой страницы записаны в этом одном файле. Из него же в §8 будет сделана заготовка доски заявок.

§7Живое обновление страницы

HMR (Hot Module Replacement — горячая замена модулей; модулем здесь называется отдельный файл кода) — способ обновить изменённый файл на открытой странице без её перезагрузки. Когда файл сохранён, Vite замечает изменение, переводит только этот файл и отправляет его в браузер. React заменяет старую версию компонента новой и сохраняет его состояние. Поэтому, если на странице что-то было введено или нажато, после правки это остаётся на месте.

Проверить HMR можно на счётчике шаблона. Сервер должен быть запущен (§5), а страница localhost:5173 — открыта в браузере.

1. Нажмите счётчик три раза

   На странице нажмите кнопку Count is 0 три раза. На ней появится Count is 3.

   

2. Откройте файл App.tsx

   В проводнике VS Code раскройте zayavki → src и щёлкните по App.tsx. Файл откроется справа, слева от кода — номера строк.

3. Измените строку 19

   Найдите строку 19 по номеру слева или перейдите к ней сочетанием Ctrl+G (на macOS ⌃+G), введите 19 и Enter. Замените текст между тегами <h1> и </h1>; сами теги не трогайте:

   было:  <h1>Get started</h1>
   стало: <h1>Доска заявок</h1>

   Можно выделить строку 19 целиком и вставить вместо неё готовую строку из блока ниже — отступ в начале строки сохраняется:

             <h1>Доска заявок</h1>

4. Сохраните файл

   Нажмите Ctrl+S (на macOS ⌘+S). Пока файл не сохранён, на его вкладке вместо крестика стоит белая точка; после сохранения точка исчезает.

   

5. Посмотрите на страницу, не обновляя её

   Вернитесь в браузер. Обновлять страницу не нужно.

   

Заголовок на странице сменился через мгновение после сохранения, и кнопка по-прежнему показывает Count is 3. Если бы страница перезагрузилась, счётчик начал бы с нуля: состояние хранится в памяти браузера и при перезагрузке теряется. По сохранённому числу видно, что сработала горячая замена. При работе с формами это значит, что заполненную форму после правки кода не нужно заполнять заново.

§8Заготовка проекта «Доска заявок»

Стартовая страница шаблона нужна только для проверки, что всё работает. Для проекта модуля 1 из шаблона убирается всё лишнее, и остаётся пустая страница с заголовком. Сервер можно не останавливать: изменения будут видны сразу. Сначала заменяется App.tsx, и только потом удаляются файлы, которые он подключал; что будет при обратном порядке, описано в блоке после шагов.

1. Замените содержимое App.tsx

   Откройте src/App.tsx, выделите весь текст (Ctrl+A, на macOS ⌘+A) и удалите его. Скопируйте код ниже кнопкой «копировать» в шапке блока, вставьте в пустой файл (Ctrl+V) и сохраните (Ctrl+S). В файле должно получиться 10 строк.

   function App() {
     return (
       <main>
         <h1>Доска заявок</h1>
         <p>Здесь появятся форма заявки и список карточек.</p>
       </main>
     )
   }
   
   export default App

2. Замените содержимое index.css

   Так же откройте src/index.css, выделите и удалите весь текст, вставьте код ниже и сохраните.

   :root {
     font-family: system-ui, 'Segoe UI', Roboto, sans-serif;
     color: #1f2430;
     background: #f6f7f9;
   }
   
   body {
     margin: 0;
   }
   
   main {
     max-width: 960px;
     margin: 0 auto;
     padding: 32px 20px;
   }

3. Удалите лишние файлы

   В проводнике щёлкните правой кнопкой по файлу src/App.css → Delete и подтвердите. Так же удалите папку src/assets. Новый App.tsx эти файлы уже не подключает, поэтому после удаления ошибок не появится.

4. Проверьте результат

   В папке src должны остаться три файла: App.tsx, index.css, main.tsx (первый кадр ниже). В браузере — заголовок «Доска заявок» и строка под ним; если страница не обновилась сама, нажмите F5. В терминале не должно быть красных строк.

   

   

В новом App.tsx осталось только то, что нужно любому компоненту. function App() { … } объявляет функцию с именем App; имя компонента всегда пишется с заглавной буквы, иначе React примет <app /> за обычный тег HTML. Внутри функции return ( … ) возвращает разметку: тег <main> — основная часть страницы, в нём заголовок и абзац. Круглые скобки вокруг разметки позволяют записать её на нескольких строках. Последняя строка export default App отдаёт компонент наружу — его берёт import App from './App.tsx' в main.tsx.

В index.css три правила. Правило :root задаёт для всей страницы шрифт (первый доступный из списка: системный, Segoe UI на Windows, Roboto на Android), цвет текста и цвет фона. Правило body убирает отступ, который браузер по умолчанию ставит вокруг страницы. Правило main ограничивает ширину содержимого 960 пикселями, ставит его по центру (margin: 0 auto) и даёт внутренние отступы: 32 пикселя сверху и снизу, 20 — слева и справа.

С этой заготовки начинается глава 1.2: в ней доска заявок разбивается на компоненты — шапку, форму и карточку.

Как вернуться к проекту на следующем занятии

Сервер разработки работает, только пока открыт терминал. На следующем занятии проект запускается так:

1. Откройте папку react-kurs в VS Code

   Меню File → Open Recent → react-kurs, или File → Open Folder…, как в §2.

2. Откройте терминал и перейдите в папку проекта

   cd zayavki

3. Запустите сервер

   npm run dev

   Команду npm install повторять не нужно: пакеты уже лежат в node_modules. Её выполняют заново, только если проект скачан на другой компьютер или в package.json добавлен пакет.

4. Откройте адрес из терминала

   http://localhost:5173/

   На странице должна быть заготовка доски заявок.

§9Частые ошибки

§10Проверьте себя

Шпаргалка

Итог главы

Node.js выполняет JavaScript на компьютере разработчика и нужен для инструментов: npm скачивает пакеты по списку из package.json в папку node_modules, Vite раздаёт проект браузеру и собирает его для публикации. Проект создаётся командой npm create vite@latest zayavki -- --template react-ts, пакеты ставятся командой npm install, сервер разработки запускается командой npm run dev и работает по адресу localhost:5173. Браузер получает index.html с пустым блоком root, файл main.tsx выводит в этот блок компонент App. При сохранении файла Vite и React заменяют изменённый компонент без перезагрузки страницы и сохраняют его состояние. Проект zayavki очищен от шаблона и готов к главе 1.2.

Источники

1. nodejs.org — Download Node.js
2. nodejs.org — Node.js Releases: график LTS-версий
3. vite.dev — Getting Started
4. react.dev — Build a React app from Scratch
5. docs.npmjs.com — package.json
6. docs.npmjs.com — About semantic versioning