Reagoi verkkokurssi. Monimutkaisten asiakassovellusten kehittäminen - ilmainen kurssi HTML Academysta, koulutus 9 viikkoa, päivämäärä 15.10.2023.

Osa 1 Johdatus TypeScriptiin
Tarkastellaan kurssin työsuunnitelmaa. Selvitetään, mikä TypeScript on ja mitä ongelmia se ratkaisee. Tutustutaan tyyppijärjestelmään ja ymmärretään kuinka kirjoitusprosessi tapahtuu. Opitaan määrittämään kääntäjä ja katsomaan perusasetuksia. Sitten siirrytään harjoittelemaan ja ymmärtämään kirjoitetun koodin kirjoittamisen ominaisuudet: monikot, rajapinnat, yleiset ja niin edelleen.

Organisatoriset asiat.

Projektien tarkastelu.
Kurssin työsuunnitelma.

Johdatus TypeScriptiin.

Mikä on TypeScript ja mitä ongelmia se ratkaisee?
Tyyppijärjestelmä.
Kuinka TypeScript-koodi muuttuu JavaScriptiksi.
Infrastruktuuri: kääntäjän asetukset.
Huomautukset ja automaattinen tyyppipäätelmä.

Harjoittele TypeScriptin käyttöä.

Objektien, taulukoiden, funktioiden kirjoittaminen.
Generics.
Tuples.
Liitännät, tyyppialiakset.

Osa 2 Reagoi
React-kirjaston esittely. Selvitetään, mitä ongelmia se ratkaisee ja miten se voi yksinkertaistaa etupään kehitystä. Valmistellaan projektin perusta Create React App (CRA) -työkalulla. Opitaan käyttämään CRA-malleja. Sitten tutustutaan React-kirjaston pääominaisuuksiin (JSX, komponentit, tiedonsiirto komponenttien välillä).

Reagoi.

Mikä on React.
Miten React toimii?
Mitä ongelmia se ratkaisee tehokkaasti?
Virtuaalinen DOM.

Infrastruktuuri.

Luo React-sovellus.
TypeScript.

JSX

Miten se eroaa HTML: stä?
Perustyömenetelmät.

Komponenttilähestymistapa.

Reagoi komponentit.
Rekvisiitta. Tietojen välittäminen kiinteistöjen kautta.
Sävellys.

Renderöintikomponentit.

Renderöintiluettelot.
Ehdollinen renderöinti.

Osa 3 Reititys (React Router)
Selvitetään kuinka reititys on järjestetty SPA: ssa. Lisätään React Router projektiin ja tarkastellaan paketin ominaisuuksia: reitit, uudelleenohjaukset, yksityiset reitit ja niin edelleen.

Reititys SPA: ssa.
History API.
Reitti, linkki, uudelleenohjauskomponentit.
Reitin hallinta.

Osa 4 Reagoi komponentit. Koukut
Laajennamme tietämystään Reactista ja komponenteista. Opitaan hallitsemaan tilaa, käyttämään tapahtumia ja komponenttien elinkaarimenetelmiä. Tutustutaan React Hooksiin ja opitaan korvaamaan luokan komponentteja niillä. Opitaan työskentelemään lomakkeiden kanssa.

Osavaltio.
Yksisuuntainen tiedonkulku.
Toiminnalliset komponentit, luokkakomponentit, PureComponent.
Johdatus React Hooksiin.

Elinkaarimenetelmät.

Reagoi ja muotoutuu.

Osa 5 Reaktio ja kuviot
Katsotaanpa kysymystä siitä, mitä ohjelmistoarkkitehtuuri on ja miten se suunnitellaan. Tutustutaan ja opetellaan soveltamaan suunnittelumalleja käytännössä.

Design.

Mitä eroa on hyvällä ja huonolla ohjelmalla?
Miksi suunnitella ohjelmistoja. Suunnittelun tavoitteet.
Ohjelmistoarkkitehtuuri.
Suunnittelutyökalut.

Suunnittelumalleja.

Mitä ongelmia mallit ratkaisevat?
Mistä kuvio koostuu?
Suunnittelukuvioiden tyypit.

Kuviot Reactissa.

Valtiottomia komponentteja.
Välityspalvelimen komponentit.
Korkeamman luokan komponentteja.
Renderöi rekvisiitta.
Palveluntarjoaja.
React Koukut ja kuviot.

§ 6 Valtionhallinta. Redux
Tutustutaan Flux-arkkitehtuuriin: Actions, Dispatchers, Views ja Stores. Yhdistämme Redux-projektiin ja päivitämme koodikannan.

Flux-arkkitehtuuri.
Varastointi, lähettäjä, toimet.

Redux.

Väliohjelmistot.

Redux-toimintojen laajentaminen.

Osa 7 Asynkronisuus Reduxissa
Opitaan kuinka asynkroninen koodi otetaan käyttöön Reduxin synkroniseen toimintaan Middlewaren avulla. Opitaan olemaan vuorovaikutuksessa palvelimen kanssa Axios-paketin avulla. Tutustutaan sieppaajiin.

Redux-thunk.

Axios.

Osa 8 Suorituskyvyn optimointi
Keskustellaan React-sovellusten suorituskyvystä: mitä ominaisuuksia niissä on, mihin kannattaa kiinnittää huomiota komponenttien suunnittelussa. Sitten katsomme Redux Toolkit -työkalupakkia ja opimme sen avulla pääsemään eroon yleiskoodista, kun työskentelet Reduxin kanssa.

Komponenttien profilointi.
Komponenttien päivitysten hallinta.
Memoisointi.
Redux Toolkit.

Osa 9 Testaus Reagoi
Tutustutaan työkaluihin ja tekniikoihin React-sovellusten testaamiseen. Perustamme testausinfrastruktuurin ja kirjoitamme testejä komponenteille.

Jest.
React Testing Library.

Ensimmäinen puolustusviikko
Projektin työn loppuun saattaminen ja valmistautuminen loppupuolustukseen.

Toinen puolustusviikko
Arvioivan mentorin ensimmäinen arvio projektista laatukriteerien mukaan.

Kolmas puolustusviikko
Projektin parantaminen arvioivan mentorin kommenttien perusteella ja sen lähettäminen toiseen arviointiin.

Osa 10 Lopullinen
Tehdään yhteenveto kurssista ja määritetään Reactin ja sen ekosysteemin tutkimisen lisävektori. Sitten keskustelemme uusista React-ominaisuuksista, joita odotetaan tulevissa julkaisuissa.

Neljäs puolustusviikko
Viimeisten muokkausten tekeminen ja lopullisen arvosanan saaminen.