React Academy · Oppitunti

React DevToolsin asentaminen ja avaaminen

Ottakaa React DevTools käyttöön Chromessa tai Firefoxissa ja tutustukaa Components-paneeliin.

Oppitunti 1/413 vaihetta

React DevToolsin asentaminen ja avaaminen on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. 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ä 4 oppituntia.

Tervetuloa

Tällä oppitunnilla asennat React DevTools -selainlaajennuksen ja opit liikkumaan Components-paneelissa tarkastellaksesi käynnissä olevaa React-sovellustasi.

Mikä React DevTools on?

React DevTools on selainlaajennus, joka lisää Chrome/Firefox DevToolsiin kaksi uutta paneelia: **Components** (puun tarkastelua varten) ja **Profiler** (suorituskyvyn mittaamista varten). Se toimii minkä tahansa React-sovelluksen kanssa kehitystilassa.

Laajennuksen asentaminen

Siirry Chrome Web Storeen (tai Firefox Add-ons -sivustolle) ja etsi **React Developer Tools**. Napsauta **Add to Chrome** (tai Firefox). Työkalupalkin React-kuvake aktivoituu sivuilla, jotka käyttävät Reactia.

DevToolsin avaaminen

Avaa selaimen DevTools painamalla **F12** (Macissa Cmd+Option+I). Näet uudet **Components**- ja **Profiler**-välilehdet Elements- ja Console-välilehtien rinnalla.

Components-paneeli

Components-välilehti näyttää nykyisen sivun koko React-komponenttipuun. Voit napsauttaa mitä tahansa komponenttia tarkastellaksesi sen props-arvoja, tilaa, hookeja ja lähdetiedostoa, jossa se renderöitiin.

Puussa liikkuminen

Suodata komponentteja nimen perusteella käyttämällä Components-paneelin yläreunassa olevaa hakukenttää. Napsauta puussa olevaa komponenttia nähdäksesi sen tiedot oikealla. Laajenna tai supista alikomponentit nuolilla.

Props-arvojen tarkasteleminen reaaliajassa

Kun napsautat komponenttia, sen nykyiset **props**-arvot näkyvät oikeanpuoleisessa paneelissa. Voit jopa muokata props-arvoja suoraan DevToolsissa esikatsellaksesi käyttöliittymän muutoksia ilman lähdekoodin muokkaamista.

Tilan ja hookien tarkasteleminen

Props-arvojen alapuolella näet **hooks**-hookit, kuten State-, Effect-, Memo- ja Ref-hookit. State-kohdan laajentaminen näyttää komponentin jokaisen useState-kutsun nykyisen arvon.

Kehitystilan vaatimus

React DevTools näyttää komponenttien nimet vain, kun sovellus suoritetaan **development mode** -tilassa. Tuotantoversioissa React poistaa komponenttien nimet pienempien pakettien luomiseksi, joten käytä aina paikalliseen vianmääritykseen komentoa npm start tai npm run dev.

Päivitysten korostaminen

Ota DevToolsin asetuksissa (rataskuvake) käyttöön **Highlight updates when components render**. Uudelleenrenderöityvät komponentit välähtävät värillisen peitteen alla, jolloin tarpeettomat renderöinnit tulevat heti näkyviin.

Pikatarkistus

Mitkä kaksi välilehteä React DevTools -laajennus lisää selaimen kehittäjätyökaluihin?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Asensit React DevToolsin ja tutustuit Components-paneeliin. Nyt osaat tarkastella komponenttipuuta, lukea reaaliaikaisia props-arvoja ja tilaa, muokata arvoja suoraan sekä korostaa uudelleenrenderöinnit — ilman lähdekoodin koskemista.

Seuraavaksi

Seuraava oppitunti: **Inspecting Component Trees & Props** — tutustut syvällisesti sisäkkäisiin hierarkioihin ja opit lukemaan monimutkaisia props- ja tilarakenteita DevToolsin sivupalkissa.

Aloita maksutta

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

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”React DevToolsin asentaminen ja avaaminen” ilmainen?

Kyllä – oppitunnin ”React DevToolsin asentaminen ja avaaminen” 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ä 4 oppituntia.

Mitä opin oppitunnilla ”React DevToolsin asentaminen ja avaaminen”?

Ottakaa React DevTools käyttöön Chromessa tai Firefoxissa ja tutustukaa Components-paneeliin. 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 1/4.

Kuinka kauan ”React DevToolsin asentaminen ja avaaminen”-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

React DevToolsin asentaminen ja avaaminen
Komponenttipuiden ja propsien tarkastelu
Profiler-välilehden käyttö
Yleisten React-virheiden vianmääritys

← Takaisin: React Academy