React.js — это библиотека JavaScript, используемая для создания внешнего интерфейса одностраничного веб-приложения. Это снижает сложность приложения, разделяя пользовательский интерфейс на небольшие и более управляемые компоненты. В этой статье обсуждается альтернативный способ настройки приложения React с помощью Vite. прежде чем следовать, вы должны сначала понять основы реакции js. reactjs.org.

Что такое Вите?

Vite — это инструмент сборки, который способствует более быстрой разработке для разработчиков. Его создал Эван Ю.

Vite поддерживает следующее:

  1. Горячая замена модуляБыстрый сервер разработки, обеспечивающий быструю замену модуля (HMR) благодаря расширенным функциям. Подробнее о ES native modules можно прочитать здесь.
  2. Rollup В Vite есть команда сборки, которая связывает код разработчика с Rollup. Это сборщик модулей JavaScript, который компилирует простые фрагменты кода и встраивает их в сложные приложения. Поскольку Rollup предварительно настроен, можно легко создавать статические приложения, оптимизированные для производства. Вы можете получить дополнительную информацию о Rollup здесь.

Преимущества Вайта

На продуктивность разработчика влияет множество факторов, включая производительность и скорость. JavaScript может замедлять работу приложения в зависимости от его сложности. Vite решает эту проблему с помощью Esbuild. EsBuild — это средство предварительной сборки зависимостей, которое улучшает предварительное объединение зависимостей по сравнению с другими платформами. Это приводит к увеличению скорости сервера и горячей замене модулей.

Особенности Вайт

Ключевые особенности Vite включают в себя:

  1. Мгновенный запуск сервера.
  2. Быстрая замена горячего модуля.
  3. Оптимизирован процесс сборки.

Давайте теперь создадим приложение React с помощью Vite.

Создание приложения для реагирования с использованием Vite.

  1. Откройте терминал и создайте новую папку, затем войдите в созданную папку. здесь мы создадим react.js, используя vite.it здесь.

2. После этого давайте создадим react.js с помощью vite. Обратите внимание, что в этом руководстве мы будем использовать npm. Однако, если вы предпочитаете пряжу, вы можете получить к ней доступ здесь.

3. Далее заполняем название проекта, который будем создавать вместе с фреймворком, здесь я выбираю react.js и выбираю вариант java script.

4. Теперь, когда мы создали React.js с помощью Vite, выполните следующие действия.

5. Прежде чем мы выполним последний шаг — npm run dev, я предпочитаю сначала войти в Visual Code, выполнив code. затем откройте терминал в визуальном коде, выполнив ctrl+`, затем npm run dev

примечания: Ваш файл package.json должен выглядеть, как показано ниже:

6. После того, как вы наберете npm run dev, вы можете выбрать параметры….
I. Нажмите h, чтобы отобразить справку
II. Нажмите r, чтобы перезапустить сервер
III. щелкните u, чтобы показать URL-адрес сервера
IV. Нажмите o, чтобы открыть в браузере
V. нажмите q, чтобы выйти

7. И это результат, который мы создали

I hope this article can help you. Thanks for everything