Summary  
This chapter covers scaffolding a code project using a CLI tool, managing dependencies with a package manager, and launching a live-reloading development server to begin customizing the application structure.

General domain of usage  
Front-end web development

## Vaihe 6: Projektin alustaminen
Projektin asennus tapahtuu terminaalin kautta. Avaa terminaali koodieditorissasi (jos se ei ole jo auki), suorita seuraava komento ja paina Enter:
```
npm create vite@latest .
```


Kun sinulta kysytään, valitse nuolinäppäimillä **React** kehykseksi:

Valitse tämän jälkeen joko **JavaScript** tai **TypeScript** oman mieltymyksesi mukaan:

Kun asennus on valmis, Vite kehottaa asentamaan riippuvuudet. Suorita seuraava komento:
```
npm install
```

Kun asennus on valmis, käynnistä kehityspalvelin suorittamalla:
```
npm run dev
```

Näiden komentojen suorittamisen jälkeen näet paikallisen kehitysosoitteen — tyypillisesti: `http://localhost:5173/`. Voit avata tämän linkin selaimessa nähdäksesi sovelluksen livenä.

## Vaihe 7: Aloita mukauttaminen
Projekti on nyt valmis, voit aloittaa sen mukauttamisen:
- Pääasiallinen työ tapahtuu **src**-kansiossa;
- Löydät oletustiedostot kuten `App.jsx` ja `main.jsx`, joita voit muokata tai korvata projektisi tarpeiden mukaan;
- Jos olet aiemmin työskennellyt CodeSandboxissa, luo tuttu rakenne uudelleen: varmista, että sinulla on `main.jsx` (Viten vastine tiedostolle `index.js`) aloituspisteenä ja rakenna pääsovelluksesi tiedostoon `App.jsx`;
- Luo tarvittaessa lisää kansioita komponenttien, tyylien ja resurssien järjestämistä varten.

Mikä komento käynnistää uuden React-projektin Viten avulla?

Opi rakentamaan dynaamisia, interaktiivisia käyttöliittymiä Reactilla. Ymmärrä keskeiset käsitteet, kuten JSX, virtuaalinen DOM ja uudelleenkäytettävä komponenttipohjainen arkkitehtuuri. Hyödynnä tyylittelytekniikoita käyttämällä sisäisiä tyylejä, ulkoista CSS:ää ja CSS-moduuleja skaalautuvaa suunnittelua varten. Hallitse tilaa ja sivuvaikutuksia tehokkaasti React Hookien avulla ja jaa dataa komponenttien välillä Contextin kautta.

Ymmärrä Reactin ydinkäsitteet. Opit tuntemaan JSX:n (JavaScript XML), uudelleenkäytettävien käyttöliittymäkomponenttien rakentamisen sekä elementtien renderöinnin. Lisäksi perehdyt tiedon keräämisen ja ehdollisen renderöinnin merkitykseen React-sovelluksissa. Tämän osion lopussa hallitset Reactin keskeiset periaatteet, mikä luo vahvan pohjan seuraavien osioiden edistyneemmille aiheille.

Tutustu erilaisiin tapoihin lisätä tyylejä React-sovelluksiin. Opit, kuinka tyylejä sovelletaan yksittäisiin komponentteihin, käytetään dynaamisia tyylejä sekä ylläpidetään skaalautuvaa ja ylläpidettävää tyylittelytapaa projekteissasi.

Tehokkaita ominaisuuksia modernissa React-kehityksessä. Hookit mullistavat tapamme kirjoittaa funktiokomponentteja tarjoten tiiviin ja intuitiivisen tavan hallita tilaa ja suorittaa sivuvaikutuksia. Konteksti puolestaan mahdollistaa datan jakamisen komponenttipuun läpi ilman propseja. Hookien ja kontekstin yhdistäminen mahdollistaa tehokkaan tilanhallinnan ja yksinkertaistetun datan jakamisen React-sovelluksissa.

Vaiheittainen opas reaalimaailman React-projektin aloittamiseen. Kehitysympäristön perustamisesta projektin rakenteen ja keskeisten työkalujen ymmärtämiseen saat tiedot ja varmuuden React-matkasi aloittamiseen.

React-projektin Käynnistäminen ja Suorittaminen Viten Avulla

Vaihe 6: Projektin alustaminen

Vaihe 7: Aloita mukauttaminen

Awesome!

React-projektin Käynnistäminen ja Suorittaminen Viten Avulla

Vaihe 6: Projektin alustaminen

Vaihe 7: Aloita mukauttaminen