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

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

Менеджер версий 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.3/install.sh | bash

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

nvm install lts
nvm use <version>

npm и Vite

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

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

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

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

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

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   # установка всех базовых зависимостей проекта
              # (сгенерирует package-lock.json и node_modules)

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

npm run dev

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