Projektin asetukset: Vite, asettelu ja kehityspalvelin
Luokaa React-sovellus Vitellä tai vastaavalla työkalulla, ymmärtäkää kansiorakenteen perusteet, käynnistäkää kehityspalvelin ja varmistakaa renderöinti pienellä komponentilla.
Projektin asetukset: Vite, asettelu ja kehityspalvelin on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/3. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu React Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Academy-kurssilla on yhteensä 3 oppituntia.
Määrityksen yleiskatsaus
Tavoite: luo projekti nopeasti, opi kansiorakenne ja käynnistä kehityspalvelin hot reload -toiminnolla.
- Vite-projektin (tai vastaavan) alustus
- Tiedostojen sijainti
- Sovelluksen käynnistäminen ja toiminnan varmistaminen
Edellytykset
Edellytykset:
- Node.js LTS ja npm asennettuina
- Pääsy päätelaitteeseen
- CLI:n peruskäyttö (cd, ls)
Alustus Vitellä
Luo projekti nopealla työkalulla:
- Alusta projekti (esim. npm create vite@latest)
- Valitse React (JavaScript)
- Asenna riippuvuudet (npm install)
Kansiorakenteen perusteet
Rakenne (tyypillinen):
- index.html: sisältää
div#root-elementin - src/main.jsx: luo juuren ja renderöi App-komponentin
- src/App.jsx: oma komponenttisi
Kehityspalvelimen käynnistäminen
Kehityspalvelin:
- Käynnistä komennolla npm run dev
- Avaa paikallinen URL-osoite
- Muokkaa tiedostoa App.jsx; muutokset näkyvät heti (hot reload)
Renderöinnin varmistaminen
Renderöi pieni App-komponentti varmistaaksesi, että määritys toimii; muokkaa tekstiä nähdäksesi hot reload -toiminnon.
<div id="root"></div>
Liitospistetiedosto
Kertaus
Kertaus: alusta projekti Vitellä, opi, missä index.html, main.jsx ja App.jsx sijaitsevat, käynnistä kehityspalvelin ja varmista renderöinti pienellä komponentilla.
Opi React tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 88
- Oppitunnit
- 324
Usein kysytyt kysymykset
Onko oppitunti ”Projektin asetukset: Vite, asettelu ja kehityspalvelin” ilmainen?
Kyllä – oppitunnin ”Projektin asetukset: Vite, asettelu ja kehityspalvelin” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko React Academy-kurssin, päivitä CoddyKit PROhon. React Academy-kurssilla on yhteensä 3 oppituntia.
Mitä opin oppitunnilla ”Projektin asetukset: Vite, asettelu ja kehityspalvelin”?
Luokaa React-sovellus Vitellä tai vastaavalla työkalulla, ymmärtäkää kansiorakenteen perusteet, käynnistäkää kehityspalvelin ja varmistakaa renderöinti pienellä komponentilla. Harjoittelet React Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni React Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin React Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/3.
Kuinka kauan ”Projektin asetukset: Vite, asettelu ja kehityspalvelin”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä React Academy-oppitunnilla?
Kyllä. Jokainen React Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Reactin aloitus: käsitteet ja asetukset
- Projektin asetukset: Vite, asettelu ja kehityspalvelin
- Ensimmäinen komponentti ja renderöinti