установка React в подсистеме Windows для Linux.

В этом руководстве описывается настройка среды разработки React в WSL (подсистема Windows для Linux) с помощью интерфейса Vite .

WSL рекомендуется, если планируется развернуть на сервере Linux, использовать контейнеры Docker или работать с инструментами на основе Bash. Если вы не знакомы с React и хотите быстро приступить к работе, попробуйте установить React непосредственно в Windows .

Общие сведения об React и различных сценариях— веб-приложениях, мобильных приложениях (React Native) и собственных классических приложениях (React Native для рабочего стола) см. в обзоре React.

Требуемые условия

• WSL 2. Установите WSL с дистрибутивом Linux (рекомендуется Ubuntu) и убедитесь, что он работает в режиме WSL 2: wsl -l -v Требуется Windows 10 версии 2004 или более поздней версии или Windows 11.
• Node.js в WSL 2. Установите Node.js внутри дистрибутива WSL с помощью nvm. Не используйте установленную в Windows версию Node.js в WSL.

Внимание

Сохраните файлы проекта в файловой системе WSL (например, ~/projects), а не на подключенном диске Windows (/mnt/c/). Работа по границе файловой системы значительно замедляет установку и время сборки.

Создание приложения React

1. Откройте терминал WSL (например, Ubuntu).

2. Создайте папку проекта и введите ее:

   mkdir ~/ReactProjects
   cd ~/ReactProjects
   

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

   npm create vite@latest my-react-app -- --template react
   

   Vite создаст шаблон нового проекта React в папке my-react-app .

4. Перейдите в новую папку приложения и установите зависимости:

   cd my-react-app
   npm install
   

5. Запустите локальный сервер разработки:

   npm run dev
   

   Ваше приложение будет доступно по адресу http://localhost:5173. Нажмите клавиши CTRL+C , чтобы остановить сервер.

6. Когда вы будете готовы к развертыванию, создайте рабочий пакет:

   npm run build
   

   Выходные данные помещаются в папку dist . См. статью "Развертывание статического сайта" для вариантов хостинга.

Примечание.

Vite идеально подходит для одностраничных приложений (SPA). Если вам нужен серверный рендеринг или бэкенд на Node.js, рассмотрите Next.js. Сведения о создании статических сайтов см. в разделе Gatsby.

Дополнительные ресурсы

• Документация по React
• Документация Vite
• Использование React в Visual Studio Code
• Схема обучения React в Microsoft Learn
• Установка Node.js в WSL
• React Native для рабочего стола (UWP/WPF)