Введение
Начать работу с React стало не так сложно, как раньше.
В этом видео мы расскажем о самом быстром способе создания современного React проекта.
Нет, мы не будем использовать устаревшие CRA или create-react-app, которые веками доставляли разработчикам столько хлопот.
Но мы воспользуемся инструментом под названием Vite, что в переводе с французского означает «молниеносно быстрый».
Предварительные условия
Итак, что же является единственным препятствием на пути к созданию вашего первого React приложения? Вам нужна среда выполнения, которая позволит вам запускать Javascript приложения вне браузера — Node.js.
Для начала зайдите на официальный сайт Node.js, нажмите кнопку Get Node.js и выберите свою операционную систему. Либо скопируйте и вставьте показанные команды в терминал, либо просто скачайте соответствующий бинарный файл.
После выполнения команды или загрузки бинарного файла давайте убедимся, что он действительно установлен. Для этого откройте терминал и введите
node —version
Если после выполнения команды появится сообщение, похожее на это, поздравляем — Node.js успешно установлен.
Подтвердите Установку Node.js
Настройка Vite
Теперь, когда Node.js готово, для запуска всего вашего React-проекта достаточно одной команды.
Перейдите на сайт Vite, нажмите get started и прокрутите страницу вниз, пока не найдете эту команду.
Эта команда создает шаблон вашего проекта и устанавливает для вас Vite и React. Vite в основном выполняет две функции:
Он обслуживает ваш код во время разработки, предлагая такие функции, как горячая перезагрузка.
Он объединяет ваш JavaScript, HTML и другие ресурсы, когда вы готовы к запуску.
Команда для установки Vite
Node.js В комплект поставки входит npm — менеджер пакетов, который устанавливает зависимости вашего проекта. Но лично я использую pnpm и вот почему он лучше:
Он кэширует ваши зависимости на глобальном уровне.
Он повторно использует их в разных проектах.
Это значительно ускоряет процесс и делает его более экономичным, особенно если вы используете мобильный интернет.
npm create vite@latest
Так что вы можете либо скопировать эту команду npm и сразу запустить ее, либо установить pnpm глобально:
npm install -g pnpm
Если вы выбрали путь pnpm и установили его глобально, просто замените npm на pnpm в предыдущей команде.
pnpm create vite@latest
Конфигурация проекта
Теперь, когда мы выполнили команду, Vite-cli проведет вас по быстрой настройке.
Давайте назовем проект hello-world .
Vite CLI предлагает пользователю выбрать название проекта
Поскольку мы создаем приложение на React, выберем React.
Vite CLI предлагает пользователю выбрать фреймворк
Теперь нам нужно выбрать между JavaScript и TypeScript. Честно говоря, я предпочитаю TypeScript, потому что его статическая типизация улучшает автодополнение в IDE и значительно упрощает работу разработчика.
Vite CLI предлагает пользователю выбрать Javascript или Typescript
Возможно, вам интересно, что же такое SWC? Это сверхбыстрый компилятор, который ускорит вашу разработку почти в 20 раз. Скорость — это всегда хорошо, так что давайте выберем Typescript + SWC и нажмем Enter.
Давайте просто пропустим два оставшихся варианта.
Установка зависимостей
Как только вы нажмете Enter, Vite-Cli создаст ваш проект.
Как только это произойдет, перейдите в него, набрав cd hello-world.
После этого установите зависимости, выполнив команду «npm install» или «pnpm install».
npm install
# или
pnpm install
Запуск сервера разработки
После завершения установки выполните следующую команду.
pnpm run dev
Последний запустит сервер разработки на http://localhost:5173.
Просто нажмите на этот URL, удерживая клавишу Ctrl, или скопируйте его в адресную строку браузера.
Наконец, ваш проект готов.
Откройте его в предпочитаемой вами среде разработки, перейдите в файл App.tsx, расположенный в папке src, внесите изменения и — вуаля! — они мгновенно отобразятся на веб-странице.
Заключение
Вот и все, что нужно для запуска вашего проекта с помощью VITE, БУКВАЛЬНО, одной-единственной команды!
Но вид этого дерева файлов может вызывать беспокойство, не так ли?
Поэтому вместо того, чтобы все испортить, давайте разберемся в сгенерированном шаблонном коде.
В следующей статье этой серии мы рассмотрим каждый файл и папку в этом устрашающем «дереве» на Хэллоуин.
А пока… счастливого кодинга!