[image: 1776690991727-a388cfec-98b3-4bbe-b4d9-385e9a5290d0-image.webp]
Если кто не знаком с 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
[image: 1776691481161-a904f81a-6621-4629-93a3-2f59694b8869-image.webp]
Шаг 3: Выберите фреймворк
После того как мы начали установку нашего реакт приложение необходим выбрать сам реакт:
[image: 1776691535342-894d9615-6912-403a-9307-d35ebaa9c15c-image.webp]
Далее установщик предложит как мы хотим использовать react с использование TypeScript, React Compiler. Так как эта статья для джунщиков и вкатунов, выбираем 3 вариант просто JavaScript:
[image: 1776691623647-f5fa696e-7fdf-4ace-b4a9-e263ac1e18de-image.webp]
После выбора инструментария установщик спроси установить через npm пакеты и запустить? Нажимаем - yes
[image: 1776691687104-cdcdd36e-fbf9-4f34-a073-cd85b1265c1a-image.webp]
Дожидаемся и видим что наше приложение готово и запустилось:
[image: 1776691736266-41030b5c-e36a-4956-9b99-97a4d9eebb0c-image.webp]
Попробуй перейти по ссылке из терминала: http://localhost:5173/ и если все прошло удачно, то попадете на стартовую страницу react + vite приложения:
[image: 1776691813800-73a06842-7c94-4b68-82b3-75fa8fcb9683-image.webp]
УРА! Теперь все готово для работы, после нажимаем ctrl+c что бы отключиться в терминале:
[image: 1776691859815-d8922379-3b98-46ef-a1dd-a0235f398d40-image.webp]
После можно спокойно переходить в папку с проектом:
cd my-react-app
И запускать редактор кода (vs code или что там у вас):
code .
Если вы уже делали все манипуляции через редактор кода и встроенный терминал то думаю не надо объяснять что куда
Ну все теперь теперь можете работать с React и не париться насчет настройки и билдинга проекта - успехов Вам!
И да, если что подписывайте на меня в МАХ:
https://max.ru/id503118837522_biz
