Tähän asti olet työskennellyt erillisten React-esimerkkien parissa. Todellisessa kehitystyössä React-sovellukset luodaan ja suoritetaan projekteina, joilla on ennalta määritelty rakenne ja työkalut.

Tässä luvussa opit, kuinka React-projekti luodaan ja käynnistetään käyttämällä Viteä, modernia rakennustyökalua, joka on nopea, kevyt ja yleisesti käytetty tuotantoprojekteissa.

React-projektin luominen Viten avulla

Uuden React-projektin luomiseksi avaa komentorivi ja suorita seuraava komento:

npm create vite@latest

Sinua pyydetään:

1. Syöttämään projektin nimi;
2. Valitsemaan kehys → valitse React;
3. Valitsemaan variantti → valitse JavaScript.

Kun asennus on valmis, siirry projektikansioon:

cd project-name

Asenna projektin riippuvuudet:

npm install

Kehityspalvelimen käynnistäminen

Käynnistäksesi React-kehityspalvelimen, suorita:

npm run dev

Tämän komennon jälkeen:

• Vite käynnistää paikallisen kehityspalvelimen;
• Paikallinen URL (yleensä http://localhost:5173) näkyy terminaalissa;
• Avaamalla tämän URL-osoitteen selaimessa näet React-sovelluksesi.

Kaikki tekemäsi muutokset koodiin päivittyvät automaattisesti selaimessa.

Ymmärrys tapahtuneesta

Kun käynnistit kehityspalvelimen:

• Vite niputti React-koodisi;
• React renderöi sovelluksen selaimeen;
• Sovellus siirtyi kehitystilaan, joka on optimoitu nopeaa palautetta varten.

Sinulla on nyt oikea React-projekti käynnissä paikallisesti.