Reactin perustutoriaali
Johdanto
Reactin asennus
React-devtools -laajennuksen liittäminen
Komponenttilähestymistapa
Sivuston layout
Komponentin työtulos
JSX-kieli
Johdanto JSX:ään
Sisäkkäisten tagien palautus
Tagin rivitys alas
Usean tagin palautus
Sulkemattoman tagin palautus
Tyhjän tagin palautus funktiolla
Muuttujien arvojen lisääminen
Vivahteet muuttujien lisäämisessä
Taulukoiden lisääminen
Objektien lisääminen
Lisääminen attribuutteihin
Tagien tallentaminen JSX:ssä
Usean tagin tallentaminen
Tagit eri riveillä
Tagien palautus
JSX-tagien sulkeutuminen
Merkintöjen oikeellisuus
JavaScript-koodin suorittaminen
Ehdot
Ehdot JSX:ssä
Näyttäminen ehdolla
Ehto tagin palauttamiseksi
Ternaarioperaattori JSX:ssä
Operaattorin && käyttö JSX:ssä
Invertointi lyhyitä ehtoja varten
Funktiot
Funktioiden käyttö
Funktioiden kutsuminen tunnisteiden sisällä
Käsittelijöiden kiinnittäminen
Käsittelijöiden parametrit
Event-objekti
Event-objekti parametrien välityksessä
Tagien muodostaminen
Tagien taulukko
Tagien taulukko silmukassa
Tagit datataulukosta
Avaimet taulukossa
Objektien taulukko
Avaimet id:n kautta
Taulukko objektien taulukosta
Uniikit id:t
Keskustelu
Ongelmia uusien id:den kanssa
Satunnaiset merkkijonot id:lle
Id:n generointi
Funktio id:n generointiin
Id-funktion käyttö
Funktion väärinkäyttö
Tilat
Lomakkeet
Syöttökenttien käsittely
Syöttökentän tietojen muuttaminen niiden tulostuksen yhteydessä
Tietojen muuttaminen funktiolla
Useiden syöttökenttien käsittely
Lomaketietojen käsittely
Textarea-kentän käsittely
Valintaruutujen käsittely
Valintaruudut ja ehdollinen renderöinti
Alasvetovalikoiden käsittely
Alasvetovalikon vaihtoehdot taulukosta
Value-attribuutit alasvetovalikossa
Alasvetovalikon value-attribuutit taulukosta
Radiopainikkeiden käsittely
Oletusarvot
Syöttökenttien sitominen taulukkoon
Syöttökenttien sitominen objektiin
Tiedot
Johdanto
Reaktiivinen lisääminen taulukkoon
Reaktiiviset operaatiot taulukoille
Reaktiivinen lisääminen objektitaulukkoon
Reaktiiviset operaatiot objektitaulukoille
Reaktiivinen tietojen näyttäminen
Komponentit
Johdatus komponentteihin
Komponenttien käyttö
Useita komponentin instansseja
Komponenttien propsit
Lapsikomponentit
Taulukko lapsikomponenttien luomiseen
Lapsikomponentit loopissa
Statejen välittäminen lapsikomponentteihin
ID:n välittäminen komponenttiin
Vanhemman staten muuttaminen
Vanhemman staten muokkaaminen
Isovanhemman staten muokkaaminen
Toimintatilat statejen kautta
Konseptit
Johdanto
Komponenttien data
Komponenttityypit
Yksisuuntainen data virta
Tilojen nostaminen
Yksi totuuden lähde
Tyylittely
Tyylittelytavat Reactissa
Globaali CSS
Tietojen siirtaminen style-attribuuttiin objektista
Tietojen siirtaminen style-attribuuttiin erillisesta tiedostosta
CSS-tyylien kaytto style-attribuutissa
Tietojen siirtaminen style-attribuuttiin muuttujista
Styled Components
Propsit Styled Componentsissa
Propsit ja ehdollinen renderointi Styled Componentsissa
Komponentit laajennetulla tyylityksella
CSS-modulesien kayton aloittaminen
CSS-modulesien kayton jatkaminen
Composes-komento luokille
Composes-komento tiedostoille