Udostępnij za pośrednictwem

Instalowanie oprogramowania React bezpośrednio w systemie Windows

W tym przewodniku opisano konfigurowanie środowiska deweloperskiego React bezpośrednio w systemie Windows przy użyciu narzędzi frontonu Vite .

Zalecamy te instrukcje, jeśli dopiero zaczynasz korzystać z platformy React lub kompilujesz projekt, który nie potrzebuje środowiska systemu Linux. Jeśli planujesz intensywnie używać narzędzi powłoki Bash lub wdrażać na serwerze z systemem Linux, rozważ zamiast tego zainstalowanie React w programie WSL.

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

  • Node.js: wymagane do uruchomienia narzędzia Vite i narzędzia npm. Instalowanie przy użyciu systemu nvm-windows w celu łatwego zarządzania wersjami.

Tworzenie aplikacji React

  1. Otwórz terminal (wiersz polecenia systemu Windows lub program PowerShell).

  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 / Notatka

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