Ensimmäinen komponentti ja renderöinti
Kirjoittakaa ensimmäinen komponenttifunktionne, renderöikää se DOM-puuhun createRootilla ja tutustukaa hot reload -toimintaan.
Ensimmäinen komponentti ja renderöinti on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/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.
Yleiskatsaus
Tavoite: kirjoita ensimmäinen React-komponenttisi, liitä se kutsumalla createRoot-funktiota ja tarkista hot reload -toiminto.
Funktiokomponentit
React-komponentti on yksinkertaisesti JSX:ää palauttava funktio. Esimerkki: function App() { return <h1>Hi</h1> }.
Liittäminen createRoot-funktiolla
Käytä ReactDOM.createRoot-funktiota yhdessä document.getElementById("root")-kutsun kanssa ja kutsu sitten root.render(<App/>).
Koodiesimerkki
Ensimmäinen renderöintisi: liitä App-komponentti ja napsauta nähdäksesi tilapäivitykset.
<div id="root"></div>
Hot reload -toiminnon perusteet
Hot reload: tallenna tiedosto, niin kehityspalvelin rakentaa sovelluksen uudelleen ja käyttöliittymä päivittyy tilaa menettämättä.
Vinkkejä ensimmäisiin sovelluksiin
Vinkit:
- Pidä komponentit pieninä.
- Käytä selkeitä nimiä, kuten App.
- Tarkista konsoli virheiden varalta, jos renderöinti epäonnistuu.
Juuren luomisen tarkistus
Kertaus
Kertaus: määritä App(), liitä se kutsumalla createRoot-funktiota ja hyödynnä hot reload -toimintoa saadaksesi palautetta heti.
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 ”Ensimmäinen komponentti ja renderöinti” ilmainen?
Kyllä – oppitunnin ”Ensimmäinen komponentti ja renderöinti” 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 ”Ensimmäinen komponentti ja renderöinti”?
Kirjoittakaa ensimmäinen komponenttifunktionne, renderöikää se DOM-puuhun createRootilla ja tutustukaa hot reload -toimintaan. 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 3/3.
Kuinka kauan ”Ensimmäinen komponentti ja renderöinti”-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