Udostępnij za pośrednictwem

Instalowanie oprogramowania React w podsystemie Windows dla systemu Linux

W tym przewodniku opisano konfigurowanie środowiska deweloperskiego React w podsystemie WSL (Podsystem Windows dla systemu Linux) przy użyciu narzędzi frontonu Vite .

WSL jest zalecany, jeśli planujesz wdrożenie na serwerze z systemem Linux, używanie kontenerów Docker lub pracę z narzędziami opartymi na powłoce Bash. Jeśli dopiero zaczynasz pracę z platformą React i chcesz szybko rozpocząć pracę, rozważ zainstalowanie oprogramowania React bezpośrednio w systemie Windows .

Informacje na temat platformy React i różnych scenariuszy — aplikacji internetowych, aplikacji mobilnych (React Native) i natywnych aplikacji klasycznych (React Native for Desktop) — zobacz Omówienie platformy React.

Wymagania wstępne

  • WSL 2: Zainstaluj program WSL z dystrybucją systemu Linux (zalecane w systemie Ubuntu) i upewnij się, że działa w trybie WSL 2: wsl -l -v. Wymaga systemu Windows 10 w wersji 2004 lub nowszej lub Windows 11.
  • Node.js w programie WSL 2: zainstaluj Node.js wewnątrz dystrybucji WSL przy użyciu nvm. Nie należy używać zainstalowanej w systemie Windows wersji Node.js wewnątrz programu WSL.

Ważne

Zapisz pliki projektu w systemie plików WSL (np. ~/projects), a nie na zainstalowanym dysku systemu Windows (/mnt/c/). Praca w granicach systemu plików znacznie spowalnia czas instalacji i kompilacji.

Tworzenie aplikacji React

  1. Otwórz terminal programu WSL (np. Ubuntu).

  2. Utwórz nowy folder projektu i wprowadź go:

    mkdir ~/ReactProjects
cd ~/ReactProjects

  3. Utwórz nową aplikację React przy użyciu narzędzia Vite:

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

    Aplikacja Vite utworzy szkielet nowego projektu React w folderze my-react-app .

  4. Przejdź do nowego folderu aplikacji i zainstaluj zależności:

    cd my-react-app
npm install

  5. Uruchom lokalny serwer deweloperów:

    npm run dev

    Aplikacja będzie dostępna pod adresem http://localhost:5173. Użyj klawiszy Ctrl+C , aby zatrzymać serwer.

  6. Gdy wszystko będzie gotowe do wdrożenia, skompiluj pakiet produkcyjny:

    npm run build

    Dane wyjściowe są umieszczane w folderze dist . Aby uzyskać informacje na temat opcji hostingu, zobacz Wdrażanie witryny statycznej .

Uwaga

Vite jest idealnym rozwiązaniem dla aplikacji jednostronicowych (SPA). Jeśli potrzebujesz renderowania po stronie serwera lub zaplecza Node.js, rozważ Next.js zamiast tego. W przypadku generowania witryn statycznych zobacz Gatsby.

Dodatkowe zasoby

  • Last updated on