Поделиться через

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

  • Статья

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

Мы рекомендуем использовать эти инструкции, если вы создаете одностраничное приложение (SPA), которое будет использоваться с командами или средствами Bash, а также планируете развертывание на сервере Linux или работу с контейнерами Docker. Если вы не знакомы с React и просто заинтересованы в обучении, вы можете рассмотреть возможность установки с vite непосредственно в Windows.

Дополнительные сведения о React, выборе между React (веб-приложения), React Native (мобильные приложения) и React Native для Windows (классические приложения) см. в статье Общие сведения о React.

Необходимые компоненты

  • Установите последнюю версию Windows 10 (версия 1903+, сборка 18362+) или Windows 11.
  • Установите подсистему Windows для Linux (WSL), включая дистрибутив Linux (например, Ubuntu), и убедитесь, что она работает в режиме WSL 2. что можно проверить, открыв PowerShell и выполнив команду wsl -l -v;
  • Установите Node.js в WSL 2. Эти инструкции используют Node Version Manager (nvm) для установки, вам потребуется последняя версия NodeJS для запуска vite, а также последней версии Node диспетчер пакетов (npm).

Внимание

При установке дистрибутива Linux в WSL будет создан каталог \\wsl\Ubuntu-20.04 для хранения файлов (замените Ubuntu-20.04 дистрибутивом Linux, который вы используете). Чтобы открыть этот каталог в проводнике Windows, откройте командную строку WSL, выберите корневой каталог с помощью команды cd ~, а затем введите команду explorer.exe .. Не устанавливайте Node.js и не настраивайте хранение файлов, с которыми вы будете работать, на подключенном диске C (/mnt/c/Users/yourname$). Это существенно замедлит установку и сборку.

Установка React

Чтобы установить полную цепочку инструментов React в WSL, рекомендуется использовать vite.

  1. Откройте командную строку WSL (например, в Ubuntu).

  2. Создайте новую папку проекта mkdir ReactProjects и войдите в этот каталог: cd ReactProjects.

  3. Установка React с помощью vite:

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

  4. После установки измените каталоги в новое приложение (my-react-app или любое, что вы выбрали для вызова): cd my-react-appустановите зависимости: npm install и запустите локальный сервер разработки: npm run dev

    Эта команда запустит сервер Node.js и откроет новое окно браузера с приложением. Вы можете использовать клавиши CTRL+С, чтобы прерывать выполнение приложения React в командной строке.

Примечание.

Vite включает конвейер интерфейсной сборки с помощью Babel, esbuild и Rollup, но не обрабатывает логику серверной части или базы данных. Если вы хотите создать серверный веб-сайт с помощью React, использующего серверную часть Node.js, рекомендуется установить Next.js, а не эту установку Vite, которая предназначена для одностраничных приложений (SPAs). Вы также можете установить Gatsby, если хотите создать статический веб-сайт, ориентированный на содержимое.

  1. Когда вы будете готовы развернуть веб-приложение в рабочей среде, выполните запуск npm run build для создания сборки приложения в папке Dist. Дополнительные сведения см. в разделе "Развертывание статического сайта".

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