Как настроить React с Vite?

[kirilljsx]

Если кто не знаком с Vite или только вкатывается в веб-разработку начиная свои первые шаги с React, то эта статья определенно для Вас!

Vite - это быстрый и современный инструмент сборки для создания веб-приложений. Он ускоряет процесс разработки, обеспечивая более быстрое время сборки и лучшую производительность. Ранее для работы с React самим вручную необходимо было прикручивать webpack, babel и другие штуки для работы, но с приходом Vite он делает все сам, а мы лишь занимаемся разработкой не отвлекаясь на не нужные нам настройки.

Ниже перечислены некоторые преимущества использования React с Vite:

• Быстрые обновления без перезагрузки страниц.
• Более быстрые и компактные сборки для продакшена.
• Автоматическая обработка JSX.
• Более быстрая сборка.

Ну и конечно же стандартные настройки что бы начать программировать сразу!

Пошаговая инструкция по настройке React с Vite

Шаг 1- Установка node
Для работы с Vite и конечно же с React требуется node js и npm, если Вы их еще не установили сделайте это, вот ссылки:

• https://nodejs.org/en/download
• https://docs.npmjs.com/downloading-and-installing-node-js-and-npm

Шаг 2 - Создаем новый проект с Vite

Vite предоставляет простой способ создания новых проектов. Для создания нового проекта React с помощью Vite можно использовать следующую команду:

npm create vite@latest my-react-app

Шаг 3: Выберите фреймворк

После того как мы начали установку нашего реакт приложение необходим выбрать сам реакт:

Далее установщик предложит как мы хотим использовать react с использование TypeScript, React Compiler. Так как эта статья для джунщиков и вкатунов, выбираем 3 вариант просто JavaScript:

После выбора инструментария установщик спроси установить через npm пакеты и запустить? Нажимаем - yes

Дожидаемся и видим что наше приложение готово и запустилось:

Попробуй перейти по ссылке из терминала: http://localhost:5173/ и если все прошло удачно, то попадете на стартовую страницу react + vite приложения:

УРА! Теперь все готово для работы, после нажимаем ctrl+c что бы отключиться в терминале:

После можно спокойно переходить в папку с проектом:

cd my-react-app

И запускать редактор кода (vs code или что там у вас):

code .

Если вы уже делали все манипуляции через редактор кода и встроенный терминал то думаю не надо объяснять что куда

Ну все теперь теперь можете работать с React и не париться насчет настройки и билдинга проекта - успехов Вам!

И да, если что подписывайте на меня в МАХ:

Кирилл Дворянинов

Обо всем и не о чем сразу! IT форум - forum.exlends.com

MAX (max.ru)