React telepítése a Windows alrendszeren Linuxhoz

Ez az útmutató bemutatja, hogyan állíthat be Egy React fejlesztői környezetet a WSL-en (Windows Alrendszer Linuxhoz) a Vite előtérbeli eszközkészletével.

A WSL használata akkor ajánlott, ha Linux-kiszolgálón szeretne üzembe helyezni, Docker-tárolókat használ, vagy Bash-alapú eszközökkel dolgozik. Ha még csak most ismerkedik a React szolgáltatással, és csak szeretne gyorsan hozzákezdeni, érdemes lehet inkább közvetlenül a Windowsra telepítenie a Reactet .

A React hátteréről és a különböző forgatókönyvekről – webalkalmazásokról, mobilalkalmazásokról (React Native) és natív asztali alkalmazásokról (React Native for Desktop) – a React áttekintésében olvashat.

Előfeltételek

  • WSL 2: Telepítse a WSL-t Linux-disztribúcióval (Ubuntu ajánlott), és ellenőrizze, hogy A WSL 2 módban fut-e: wsl -l -v. A Windows 10 2004-es vagy újabb verzióját vagy a Windows 11-et igényli.
  • Node.js a WSL 2-n: Telepítse a Node.js-t az nvm használatával a WSL disztribúció részeként. A WSL-ben ne használja a Node.js Windowsra telepített verzióját.

Fontos

A projektfájlokat a WSL fájlrendszerben (például ~/projects), ne a csatlakoztatott Windows-meghajtón (/mnt/c/) tárolja. A fájlrendszer határán végzett munka jelentősen lelassítja a telepítési és létrehozási időt.

A React-alkalmazás létrehozása

  1. Nyissa meg a WSL-terminált (pl. Ubuntu).

  2. Hozzon létre egy új projektmappát, és lépjen be abba.

    mkdir ~/ReactProjects
cd ~/ReactProjects

  3. Hozzon létre egy új React-alkalmazást a Vite használatával:

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

    A Vite létrehoz egy új React-projektet a my-react-app mappában.

  4. Lépjen az új alkalmazásmappába, és telepítse a függőségeket:

    cd my-react-app
npm install

  5. Indítsa el a helyi fejlesztési kiszolgálót:

    npm run dev

    Az alkalmazás a következő címen http://localhost:5173lesz elérhető: . Állítsa le a kiszolgálót a Ctrl+C billentyűkombinációval .

  6. Ha készen áll az üzembe helyezésre, hozzon létre egy termelési csomagot:

    npm run build

    A kimenet a dist mappába kerül. Lásd: Statikus webhely üzembe helyezése üzemeltetési lehetőségekhez.

Megjegyzés:

A Vite ideális egyoldalas alkalmazásokhoz (SPA-khoz). Ha kiszolgálóoldali renderelésre vagy Node.js háttérrendszerre van szüksége, fontolja meg inkább aNext.js . A statikus webhely létrehozásához lásd a Gatsbyt.

További erőforrások

  • Last updated on