React js — популярная библиотека на JavaScript для создания приложений реального времени и пользовательских интерфейсов. иногда называемый внешним интерфейсом javascript. Framework.isual Studio Code (VSCode) — это легкий и мощный редактор кода, который обеспечивает отличную поддержку разработки React.js. В этой статье мы проведем вас через процесс настройки React.js с помощью Vite, быстрого и надежного инструмента сборки в VSCode. Давайте быстро установим реагирующее приложение в vs code.
Предварительные требования: Прежде чем приступить к установке, убедитесь, что в вашей системе настроены следующие предварительные условия:
- Node.js: Убедитесь, что Node.js установлен на вашем компьютере. Вы можете скачать его с официального сайта Node.js (https://nodejs.org) и следовать инструкциям по установке для вашей операционной системы.
- Visual Studio Code: установите последнюю версию VSCode с официального сайта (https://code.visualstudio.com) и завершите процесс установки.
несколько шагов по созданию вашего первого приложения React в 2023 году
Здесь я использую Vite для создания реагирующего приложения. Если вы не знаете о Vite? Я просто определяю vite как интерфейсный инструмент, который используется для создания быстрых и оптимизированных веб-приложений.
Теперь выполните несколько шагов:
Шаг 1. Создайте новый проект React.js с помощью Vite:
- Запустите VSCode и откройте встроенный терминал (Вид → Терминал или
Ctrl
+backtick
). - В терминале перейдите в каталог, в котором вы хотите создать новый проект React.js.
- Выполните следующую команду, чтобы создать новый проект с помощью Vite:
npx create-vite@latest my-react-app --template react
Шаг 2: Открытие проекта в VSCode:
- После создания проекта перейдите в папку проекта в терминале VSCode.
cd my-react-app
Шаг 3: Установка зависимостей:
- В терминале VSCode убедитесь, что вы находитесь в каталоге проекта.
- Установите зависимости проекта, выполнив следующую команду:
npm install
Шаг 4: Запуск сервера разработки:
- В терминале VSCode убедитесь, что вы находитесь в каталоге проекта.
- Запустите сервер разработки, выполнив следующую команду:
npm run dev
Шаг 5: Предварительный просмотр приложения React:
- После запуска сервера разработки откройте веб-браузер и перейдите к
http://localhost:3000
- Вы должны увидеть приложение React.js по умолчанию, отображаемое в браузере.
- Начните модифицировать компоненты React и увидите, как изменения загружаются в браузере в горячем режиме.