Sdílet prostřednictvím

Instalace Reactu v subsystému Windows pro Linux

Tato příručka vás provede nastavením vývojového prostředí React ve WSL (Subsystém Windows pro Linux) pomocí nástrojů front-endu Vite .

WSL se doporučuje, pokud plánujete nasazení na server s Linuxem, použít kontejnery Dockeru nebo pracovat s nástroji založenými na Bash. Pokud s Reactem teprve začínáte a chcete rychle začít, zvažte místo toho instalaci Reactu přímo ve Windows .

Základní informace o Reactu a různých scénářích – webové aplikace, mobilní aplikace (React Native) a nativní desktopové aplikace (React Native for Desktop) – najdete v přehledu Reactu.

Požadavky

  • WSL 2: Nainstalujte WSL s linuxovou distribucí (doporučuje se Ubuntu) a ověřte, že je spuštěný v režimu WSL 2: wsl -l -v. Vyžaduje Windows 10 verze 2004 nebo novější nebo Windows 11.
  • Node.js ve WSL 2: Nainstalujte Node.js do distribuce WSL pomocí nvm. Nepoužívejte windows nainstalovanou verzi Node.js uvnitř WSL.

Důležité

Uložte soubory projektu do systému souborů WSL (např ~/projects. ), ne na připojené jednotce Windows (/mnt/c/). Práce v rámci hranice systému souborů výrazně zpomalí dobu instalace a sestavení.

Vytvoření aplikace React

  1. Otevřete terminál WSL (např. Ubuntu).

  2. Vytvořte novou složku projektu a zadejte ji:

    mkdir ~/ReactProjects
cd ~/ReactProjects

  3. Vytvořte novou aplikaci React pomocí Vite:

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

    Vite vygeneruje nový projekt React ve složce my-react-app.

  4. Přejděte do nové složky aplikace a nainstalujte závislosti:

    cd my-react-app
npm install

  5. Spusťte místní vývojový server:

    npm run dev

    Vaše aplikace bude k dispozici na adrese http://localhost:5173. K zastavení serveru použijte kombinaci kláves Ctrl+C .

  6. Až budete připraveni k nasazení, vytvořte produkční sadu:

    npm run build

    Výstup se umístí do dist složky. Informace o možnostech hostování najdete v tématu Nasazení statického webu .

Poznámka:

Vite je ideální pro jednostrákové aplikace (SPA). Pokud potřebujete vykreslování na straně serveru nebo backend Node.js, zvažte místo toho Next.js. Informace o generování statického webu najdete v tématu Gatsby.

Další zdroje informací

  • Last updated on