React js — популярная библиотека на JavaScript для создания приложений реального времени и пользовательских интерфейсов. иногда называемый внешним интерфейсом javascript. Framework.isual Studio Code (VSCode) — это легкий и мощный редактор кода, который обеспечивает отличную поддержку разработки React.js. В этой статье мы проведем вас через процесс настройки React.js с помощью Vite, быстрого и надежного инструмента сборки в VSCode. Давайте быстро установим реагирующее приложение в vs code.

Предварительные требования: Прежде чем приступить к установке, убедитесь, что в вашей системе настроены следующие предварительные условия:

  1. Node.js: Убедитесь, что Node.js установлен на вашем компьютере. Вы можете скачать его с официального сайта Node.js (https://nodejs.org) и следовать инструкциям по установке для вашей операционной системы.
  2. Visual Studio Code: установите последнюю версию VSCode с официального сайта (https://code.visualstudio.com) и завершите процесс установки.

несколько шагов по созданию вашего первого приложения React в 2023 году

Здесь я использую Vite для создания реагирующего приложения. Если вы не знаете о Vite? Я просто определяю vite как интерфейсный инструмент, который используется для создания быстрых и оптимизированных веб-приложений.

Теперь выполните несколько шагов:

Шаг 1. Создайте новый проект React.js с помощью Vite:

  1. Запустите VSCode и откройте встроенный терминал (Вид → Терминал или Ctrl+backtick).
  2. В терминале перейдите в каталог, в котором вы хотите создать новый проект React.js.
  3. Выполните следующую команду, чтобы создать новый проект с помощью Vite:
npx create-vite@latest my-react-app --template react

Шаг 2: Открытие проекта в VSCode:

  1. После создания проекта перейдите в папку проекта в терминале VSCode.
cd my-react-app

Шаг 3: Установка зависимостей:

  1. В терминале VSCode убедитесь, что вы находитесь в каталоге проекта.
  2. Установите зависимости проекта, выполнив следующую команду:
npm install

Шаг 4: Запуск сервера разработки:

  1. В терминале VSCode убедитесь, что вы находитесь в каталоге проекта.
  2. Запустите сервер разработки, выполнив следующую команду:
npm run dev

Шаг 5: Предварительный просмотр приложения React:

  1. После запуска сервера разработки откройте веб-браузер и перейдите к http://localhost:3000
  2. Вы должны увидеть приложение React.js по умолчанию, отображаемое в браузере.
  3. Начните модифицировать компоненты React и увидите, как изменения загружаются в браузере в горячем режиме.