Настройка проекта Vite + React + TypeScript

Куда мы идём

Прежде чем ставить инструменты, посмотрите на целевую архитектуру, которую предстоит собрать за курс. В верхней зоне — dev-стенд, поднимаемый одной командой docker compose up: NGINX как единая точка входа, фронтенд, backend, база и Scalar с документацией API. В нижней — продакшн, куда всё это уезжает автоматически при каждом пуше.

Каждая лабораторная добавляет к этой картине один блок, так что возвращайтесь к схеме, чтобы понимать, где вы находитесь.

Настройка окружения

Менеджер версий Node (NVM) — это утилита, которая позволяет устанавливать разные версии Node.js и переключаться между ними на одном компьютере или профиле. Так можно учесть ситуацию, когда проект A требует Node 22, а проект B — Node 20. В этом случае можно просто переключить текущую версию при помощи nvm use {версия} и запустить нужный проект без дополнительных переустановок.

Установка NVM

# установка / обновление nvm (пример с curl)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.7/install.sh | bash

# перезапустите терминал или source ~/.bashrc / ~/.zshrc, затем:
command -v nvm   # должно вывести "nvm"

nvm install lts
nvm use <version>

npm и Vite

npm — это менеджер пакетов экосистемы JavaScript/Node, который ставит зависимости, запускает скрипты и управляет версиями.

Vite — современный инструмент сборки и dev-сервера. Основное отличие — высокая скорость работы, которую обеспечивают нативные ES-модули в dev-режиме и быстрый HMR (горячая замена модулей) без полной перезагрузки страницы. Начиная с Vite 8 сборкой внутри занимается Rolldown — бандлер на Rust, сделавший dev-сервер и сборку ещё заметно быстрее. Для работы Vite нужен Node 20.19+ или 22.12+. Также обладает достаточно обширной и детализированной документацией.

Инициализация проекта (Vite + React + TypeScript)

Для начала кратко упомянем, почему был выбран именно такой инструментарий. Одна из основных «болей» при разработке с JS — отсутствие строгой типизации, что значительно увеличивает цикл разработки и дальнейшего тестирования для разработчиков.

В качестве альтернативы можно использовать TypeScript (TS). Это надстройка над JS с системой типов. Она помогает ловить ошибки на этапе разработки и автоматически генерировать документацию для кода. Для первоначального знакомства рекомендую изучить «The TypeScript Handbook». Также есть официальный перевод от сообщества на русский язык. Отдельно их можно похвалить за страницу с описанием основных различий языков при миграции с Java/C#.

В лабораторных мы используем TypeScript 7 — первый выпуск с нативным компилятором (порт на Go). Снаружи ничего не поменялось, это тот же пакет и тот же tsc, но проверка типов ускорилась в 8–12 раз, что особенно заметно на сборке крупных проектов и в отзывчивости подсказок редактора.

TS мы с вами будем использовать в паре со ставшим уже классическим фронтенд-фреймворком — React. У него есть много ответвлений — Preact, Next.js (наверное, наиболее популярный — продвигает и развивает концепцию SSR, Server Side Rendering) и др. Поэтому если один раз разберётесь в его ключевых концепциях, проблем с освоением форков возникнуть не должно.

Основная особенность React — интерфейс строится из переиспользуемых компонентов (например, вы один раз создали кнопку, описали все её возможные стили и вариации, а потом вставляете её на необходимую страницу и через свойства просто выбираете нужную комбинацию). Также ещё одна ключевая составляющая этого фреймворка — хуки. Они позволяют контролировать состояния элемента, выполнять различные действия при его изменениях и т.д. (useState, useEffect и др.).

Стартовый процесс инициализации в принципе уже указан в руководстве по созданию нового React-проекта «с нуля», однако кратко пройдёмся по этому процессу. При создании проекта будем использовать базовый шаблон Vite: React + TS (за это отвечает флаг --template react-ts):

npm create vite@latest room-assets -- --template react-ts
cd room-assets
npm install   # создаст node_modules и package-lock.json

Теперь можно запустить dev-сервер при помощи команды:

npm run dev

После этого у вас в консоли отобразится базовый адрес, на котором была запущена dev-страница. Если вы не меняли никаких стандартных настроек, тогда откройте страницу по адресу http://localhost:5173/ и увидите базовый экран React.