Opi React & harjoittele
Opi React & harjoittele — Opi React-ohjelmointia kirjoittamalla JSX:ää ja suorittamalla koodia puhelimellasi
Opi React & harjoittele on maksutta aloitettava iOS- ja Android-sovellus, joka opettaa React-ohjelmointia aloittelijoille, joilla on hieman HTML-, CSS- tai JavaScript-osaamista, sekä toisesta frameworkista siirtyville kehittäjille. Kirjoita JSX:ää koodieditorissa, napauta Suorita ja katso komponenttisi renderöityvän reaaliaikaisessa esikatselussa sovelluksen sisällä. 88 kurssia ja 324 oppituntia vievät sinut ensimmäisestä komponentista hookseihin ja state managementiin ja lopulta Next.js:ään. Matkan varrella teet 20 ohjattua projektia.
- Hinta
- Maksuton, Pro-päivitys
- Alustat
- iOS ja Android
- Kielet
- 22
- Ikäraja
- 4+
- Versio
- 82.6.1
- Vaatimukset
- iOS 15.1 tai uudempi
- App Store
- 3.8 ★ (4)
Komponenttisi renderöityy puhelimessa, ei palvelimella.
Runtime, ReactDOM ja Babel on paketoitu sovellukseen, joten kirjoittamasi JSX käännetään ja näytetään laitteella. Voit napauttaa juuri rakentamaasi painiketta, kirjoittaa lomakkeeseen ja nähdä, miten käyttöliittymä reagoi. Tämä palautesilmukka auttaa ymmärtämään hookseja.
Mikä se on
Opi React & harjoittele on maksutta aloitettava React-kurssi iOS:lle ja Androidille. Se sisältää 88 kurssia ja 324 interaktiivista oppituntia ensimmäisestä JSX-rivistä hookseihin, state managementiin, React 19:ään ja Next.js App Routeriin. Sisäänrakennettu editori kääntää koodisi laitteella ja renderöi komponentin reaaliaikaisessa esikatselussa, ja 20 ohjattua projektia tarkistavat jokaisen vaiheen ennen etenemistä. Se on itsenäinen oppimissovellus, eikä sillä ole yhteyttä Metaan tai Verceliin.
Sovelluksen sisältö
Miltä se näyttää
Kurssi
Mitä React-kurssi sisältää
88 kurssia sovelluksen omasta luettelosta siinä järjestyksessä, jossa React yleensä käydään ensimmäisellä kierroksella.
React Kickoff, JSX ja Props & Composition
Komponentit, deklaratiivinen käyttöliittymä ja se, miten React päivittää DOM:n, minkä jälkeen käsitellään JSX:n säännöt, listojen renderöinti ja tietojen välittäminen alaspäin propsien avulla.
State, Events, Forms ja useRef
useState ja tapahtumien käsittely, validoitavat kontrolloidut lomakkeet sekä useRef arvoille ja DOM:n käsittelyyn tavalla, joka ei käynnistä renderöintiä.
useEffect, Data Fetching ja Custom Hooks
Milloin efektit suoritetaan, riippuvuustaulukot, API-kutsujen lataus- ja virhetilat sekä uudelleenkäytettävän logiikan erottaminen omiin hookeihin.
Context, Redux Toolkit ja Zustand
Tilan jakaminen ilman propsien ketjuttamista Contextin ja useReducerin avulla, minkä jälkeen käsitellään Redux Toolkit RTK Querylla, Zustandilla ja Jotaiilla suurempia sovelluksia varten.
Routing, React Query ja Forms at Scale
Asiakaspuolen reititys ja React Router -mallit, palvelintila TanStack Querylla ja SWR:llä, React Hook Form sekä optimistinen käyttöliittymä.
Suorituskyky, testaus ja TypeScript
Renderöinti ja memoisaatio, koodin jakaminen, virtualisoidut listat, testaus React Testing Librarylla sekä komponenttien ja hookien tyypitys.
React 19, Server Components ja Next.js
Server Components ja Actions, SSR ja hydraus sekä Next.js:n App Router tietojen hakuun, välimuistien käyttöön ja autentikointiin.
Miten se toimii
Miten oppitunti toimii
Oppitunti alkaa lyhyellä käsitteellä, jota seuraa heti kirjoittamasi ja suorittamasi koodi, joten idea ja tulos näkyvät samalla näytöllä.
Lue yksi käsite
Avaa oppimispolulta kurssi ja lue lyhyt oppitunti, esimerkiksi miten staten päivitykset toimivat tai miksi lista tarvitsee keyt. Kurssin yleiskatsaus merkitsee maksuttomat oppitunnit, joten voit tutustua formaattiin ennen sitoutumista.
Kirjoita JSX:ää ja napauta Suorita
Kirjoita komponentti koodieditorissa ja suorita se. Reaaliaikainen esikatselu renderöi komponenttisi sovelluksen sisällä, joten voit napsauttaa painiketta, kirjoittaa kenttään ja nähdä, mitä koodi tekee.
Tarkista se ja rakenna sen päälle
Tietovisat, koodaustehtävät ja ohjatut projektit varmistavat, että asia jäi mieleen, ja AI-mentori selittää hookin tai virheen, jota et osaa tulkita. Bug Hunt ja UI Match tarjoavat käsitteelle lisäharjoitusta.
Mitä se sisältää
Mitä sovellus sisältää
88
Kurssia, 324 oppituntia
JSX:stä, propseista ja statesta custom hookseihin, lomakkeisiin, Contextiin ja Redux Toolkitiin sekä Server Componentseihin, SSR:ään ja Next.js App Routeriin. Sisältö on ryhmitelty tasoille A1–C1.
Live
Editori reaaliaikaisella esikatselulla
JSX:ää varten suunniteltu koodieditori, jossa komponentti renderöityy sovelluksen sisällä. Monitiedostoprojekteissa voit importata yhden komponentin toiseen, kuten oikeita sovelluksia rakennetaan.
20
Ohjattua projektia
Rakenna tykkäyspainike, profiilikortteja, juomarahalaskuri, tietovisapeli, ostoskori ja paljon muuta yksi pieni askel kerrallaan. Jokainen vaihe tarkistaa, että komponentti todella toimii.
Lab
Hooks Lab ja props-säätimet
Seuraa jokaista staten muutosta ja uudelleenrenderöintiä niiden tapahtuessa ja muuta propsia liukusäätimellä nähdäksesi komponentin päivittyvän. Renderöintiprofiili ja state-aikajana ovat osa Pro-versiota.
30
Koodaustehtävää
Helpon, keskitason ja vaikean tason tehtäviä hookseista, renderöinnistä, lomakkeista, contextista ja suorituskyvystä sekä UI Match, Bug Hunt ja Component Recall spaced repetition -menetelmällä.
AI
AI-mentori
Pyydä selitystä, anna AI:n tarkistaa koodisi ja ehdottaa korjausta tai luo räätälöity oppitunti mistä tahansa aiheesta. Mentori ja sertifikaattikoe ovat osa Pro-versiota.
Taustaa
Mitä Reactin kirjoittamiseen oikeastaan tarvitsee ymmärtää, ja missä järjestyksessä?
React on JavaScript-kirjasto, jolla käyttöliittymät rakennetaan pienistä, uudelleenkäytettävistä komponenteista, jotka piirtyvät uudelleen datansa muuttuessa. Useimmat aloittelijat eivät juutu syntaksiin vaan sen taustalla olevaan malliin: mitä renderöinti tarkoittaa, mikä lasketaan stateksi ja milloin effects ajetaan. Kun opit nämä asiat järjestyksessä ja voit testata jokaista niistä näytöllä, opit nopeammin kuin lukemalla kaikista kerralla.
Komponentit ja propsuudelleenkäytön yksikkö
Komponentti on funktio, joka palauttaa osan käyttöliittymästä, ja propsit ovat syötteitä, jotka se vastaanottaa parent-komponentiltaan. Koska data kulkee alas propsien kautta, voit lukea komponenttia ja päätellä, mitä se piirtää.
Statemikä muuttuu ajan mittaan
State on dataa, jonka komponentti muistaa renderöintien välillä, kuten kentässä oleva teksti tai tieto siitä, onko valikko avoinna. Staten päivittäminen ajoittaa uuden renderöinnin, ja tämä on lähes jokaisen interaktiivisen näytön taustalla oleva mekanismi.
Hooks ja effectskohta, jossa aloittelijat jumittuvat
Hookit, kuten useState, useRef ja useReducer, antavat komponentille mahdollisuuden säilyttää statea ja käyttää DOMia. useEffect suorittaa koodia renderöinnin jälkeen, ja väärä dependency array on yleisin loopien ja vanhentuneiden arvojen aiheuttaja.
Renderöinti ja uudelleenrenderöintimiksi sovellus tuntuu hitaalta
Komponentti renderöidään uudelleen, kun sen state tai propsit muuttuvat, ja sama koskee sen sisällä olevia komponentteja. Renderöinnin aiheuttajan tunnistaminen on jokaisen suorituskykykorjauksen lähtökohta memoisationista code splittingiin.
Sopivuus
Kenelle se sopii – ja kenelle ei
Se sopii sinulle, jos
- Osaat hieman HTML:ää, CSS:ää tai JavaScriptiä ja haluat aloittaa Reactin opiskelun kunnolla
- Olet toisen frameworkin kehittäjä ja sinun on siirryttävä nopeasti Reactiin
- Opit parhaiten, kun tulos näkyy näytöllä heti koodin suorittamisen jälkeen
- Rakennat pienten projektien portfoliota ja haluat ohjattuja vaiheita
- Valmistaudut frontend-haastatteluun ja haluat harjoitella kysymyksillä
Se ei ole oikea työkalu sinulle, jos
- Et ole koskaan nähnyt JavaScriptiä, koska kurssi edellyttää sen perustuntemusta
- Haluat rakentaa ja julkaista kokonaisen projektin, mikä vaatii edelleen kannettavan tietokoneen
- Odotat kaiken olevan ilmaista, vaikka ensimmäinen kurssi on ilmainen ja Pro avaa loput
- Haluat React-tiimin virallisen kurssin, sillä tämä on itsenäinen sovellus
Kysymykset
Usein kysytyt kysymykset
Voiko React-ohjelmointia opetella puhelimella?
Reactin perusideat, komponentit, propsit, tila ja hookit voi opetella puhelimella, jos pystyt suorittamaan kirjoittamasi koodin. Opi React & harjoittele sisältää ReactDOM:n ja Babelin, joten JSX renderöityy laitteen live-esikatselussa. Kannettavasta tietokoneesta tulee hyödyllinen, kun rakennat ja julkaiset suuremman projektin.
Pitääkö JavaScript osata ennen Reactin opiskelua?
Siitä on hieman apua. Opi React & harjoittele on suunnattu ihmisille, jotka osaavat jonkin verran HTML:ää, CSS:ää tai JavaScriptiä, esimerkiksi muuttujat, funktiot ja taulukot. Jos et ole koskaan kirjoittanut JavaScriptiä, opettele se ensin, sillä React-oppitunnit edellyttävät, että osaat lukea sitä.
Mitä eroa on propseilla ja tilalla?
Propsit ovat syötteitä, jotka komponentti saa vanhemmaltaan, eikä niiden pitäisi muuttua, kun taas tila on komponentin omistamaa dataa, jota se päivittää ajan mittaan. Opi React & harjoittele -sovelluksessa näet tämän Hooks Labissa, joka näyttää jokaisen tilan muutoksen ja uudelleenrenderöinnin, sekä props-säätimillä, joiden avulla voit muuttaa propia liukusäätimellä.
Opettaako sovellus hookeja, kuten useEffectiä?
Kyllä. Opi React & harjoittele käsittelee useStatea, useEffectiä, useRefiä, useReduceria, mukautettuja hookeja ja useLayoutEffectiä. Erillisillä oppitunneilla perehdytään efektien suoritusajankohtaan, riippuvuustaulukoihin ja yleisiin virheisiin, ja Bug Hunt -tilassa etsitään rikkinäisten komponenttien vikoja.
Onko React sama asia kuin React Native, ja opettaako sovellus molempia?
Ei. React on käyttöliittymien rakentamiseen tarkoitettu kirjasto, kun taas React Native käyttää samoja ideoita mobiilisovellusten rakentamiseen. Opi React & harjoittele opettaa ensin Reactia webiä varten, ja React Native fundamentals -kurssi auttaa web-kehittäjiä siirtämään nämä taidot mobiiliin.
Käsitteleekö Opi React & harjoittele Next.js:ää ja React 19:ää?
Kyllä. Kursseilla käsitellään React 19:n ominaisuuksia ja Server Componentsia, SSR:ää ja hydrausta, suoratoistoa sekä Next.js:n App Routeria tietojen hakuun, välimuistien käyttöön ja autentikointiin. Lisäksi tarjolla on React Native fundamentals -kurssi web-kehittäjille.
Millaisia projekteja voin rakentaa?
Tarjolla on 20 ohjattua projektia, jotka rakennetaan vaihe vaiheelta: tykkäyspainike, profiilikortteja, juomarahan laskuri, tietovisapeli, ajanottokello, rekisteröitymislomake, ostoskori, kuvakaruselli, sivutettu lista ja todo-sovellus. Jokaisessa vaiheessa tarkistetaan, että komponenttisi toimii, ennen kuin voit jatkaa.
Onko Opi React & harjoittele ilmainen?
Sen voi ladata ilmaiseksi. Ilmaisversio sisältää ensimmäisen kurssin, yhden ohjatun projektin, kaksi koodaustehtävää, koodieditorin live-esikatselulla, Hooks Labin, props-säätimet, Bug Huntin ja kolme UI Match -tarkistusta päivässä, ja siinä näytetään mainoksia. Pro avaa kaikki kurssit, projektit ja tehtävät, tekoälymentorin, renderöinnin profiloijan ja sertifikaattikokeen sekä poistaa mainokset.
Onko saatavilla sertifikaattia tai haastatteluun valmistautumista?
Loppukokeen läpäisemisestä saa jaettavan sertifikaatin, joka kuuluu Pro-versioon. Haastatteluja varten tarjolla on 50 haastattelukysymystä, 50 kysymyksen visa ja lunttilappu keskeisten käsitteiden kertaamiseen.
Suoritetaanko koodi palvelimella?
Ei. Ajoympäristö sisältyy sovellukseen, joten koodisi käännetään ja renderöidään laitteella. Siksi voit napauttaa rakentamaasi painiketta ja nähdä käyttöliittymän reagoivan esikatselussa.
Mitä kieliä ja alustoja se tukee?
Opi React & harjoittele toimii iOS:llä ja Androidilla ja on saatavilla 22 kielellä. Sen ikäraja on 4+, ja se vaatii iPhonessa iOS 15.1:n tai uudemman.
Aloita
Renderöi ensimmäinen komponenttisi tänään
Aloittaminen on ilmaista iOS:llä ja Androidilla, 22 kielellä.
Lisää CoddyKitilta
Saatavilla alustoilla iOS ja Android.