К содержанию

Reactin perustutoriaali

Oppaat JavaScript-kehykseen React. Aloittelijoille. Paljon teoriaa ja tehtäviä.

Уроки

Johdatus React-kehystykseen

React-kehyksen asennus

React-devtools-laajennuksen liittäminen

Johdatus komponenttilähestymistapaan Reactissa

React-sovelluksen sivun asettelu

Komponentin tuotos

JSX-kieli

Johdatus JSX-kieleen Reactissa

Sisäkkäisten JSX-taggien palauttaminen funktioilla

Säännöt funktion paluuarvolle, kun tagia siirretään alas JSX:ssä

Useita JSX-tägejä palauttamisen erityispiirteet

Sulkemattoman JSX-tagin palauttaminen

Funktion palauttaa tyhjän tagin JSX:ssä

Muuttujien ja vakioiden arvojen lisääminen JSX:ään

Muuttujien arvojen sijoittamisen vivahteet

Taulukoiden lisääminen JSX:ään

Objektien lisääminen JSX:ään

Muuttujien ja vakioiden lisääminen tunnisteiden attribuutteihin JSX:ssä

Tagien tallentaminen muuttujiin ja vakioihin JSX:ssä

Useiden tagien tallentaminen JSX-vakioihin

Tagit eri riveillä JSX:ssä

Tagien palauttaminen returnilla JSX:ssä

JSX-tagien sulkeminen

Reactin ulkoasun oikeellisuus

JavaScript-koodin suorittaminen

Ehdot

Ehtojen käyttö JSX:ssä

Ehdollinen näyttäminen Reactissa

Ehdot tagin palauttamiseksi JSX:ssä

Ternaarioperaattori JSX:ssä

Operaattorin && käyttö JSX:ssä

Ehtojen kääntäminen lyhennettyjen ehtojen lyhentämiseksi JSX:ssä

Funktiot

Funktioiden käyttö Reactissa

Funktioiden kutsuminen Reactin tagien sisällä

Tapahtumien kytkeminen JSX:ssä

Parametrit JSX-funktiossa

Tapahtuma-objekti Reactissa

Tapahtuma-objekti parametrien välityksessä

Tagien muodostaminen

Tagit JSX-taulukoissa

Tagitaulukon muodostaminen React-silmukassa

Tietotaulukosta tunnisteiden muodostaminen Reactissa

Uniikit avaimet tagien taulukossa Reactissa

Objektitaulukon renderöinti Reactissa

Uniikit avaimet id:n kautta Reactissa

Objektitaulukon renderöinti HTML-taulukkona Reactissa

Uniikit id:t

Reactin yksilöllisistä id:istä keskustelu

Ongelmia uusien id:iden kanssa Reactissa

Satunnaiset merkkijonot id:lle Reactissa

Id:n generointi Reactissa

Funktio id:n generointiin Reactissa

id-funktion käyttö Reactissa

Funktion id väärinkäyttö Reactissa

Tilat

Johdatus Reactin tiloihin

Tilojen käyttö Reactissa

Reactiivinen tila Reactissa

Looginen arvo tilassa Reactissa

Laskuri tiloilla Reactissa

Lomakkeet

Syöttökenttien käsittely Reactissa

Syötetietojen muuttaminen niiden näyttämisen yhteydessä Reactissa

Datan muuttaminen funktiolla Reactissa

Usean syöttökentän käsittely Reactissa

Lomaketietojen käsittely painiketta painamalla Reactissa

Textarea-elementin käsittely Reactissa

Checkboxien käsittely Reactissa

Checkboxit ja ehdollinen renderöinti Reactissa

Selectin käsittely Reactissa

Valikon kohteet taulukosta Reactissa

Value-attribuutit select-elementissä Reactissa

Reactin selectin value-attribuutit taulukosta

Radionappuloiden käsittely Reactissa

Oletusarvot Reactissa

Syötteen sidonta taulukkoon Reactissa

Syötteen sidonta objektiin Reactissa

Tiedot

Datan reaktiivisuus Reactissa

Reaktiivinen lisääminen taulukkoon Reactissa

Reaktiiviset taulukko-operaatiot Reactissa

Reaktiivinen lisääminen taulukkoon olioita Reactissa

Reaktiiviset operaatiot objektitaulukoilla Reactissa

Reaktiivinen tietojen näyttäminen Reactissa

Komponentit

Johdatus React-komponentteihin

Komponenttien käyttö Reactissa

Useita komponentin instansseja Reactissa

Komponenttien propsit Reactissa

Lapsikomponenttien luominen Reactissa

Taulukko Reactin lapsikomponenttien luomiseen

Reactin lapsikomponentit silmukassa

Tilojen välittäminen lapsikomponentteihin Reactissa

Id:n välittäminen React-komponenttiin

Vanhemman komponentin tilan muuttaminen lapsikomponentissa Reactissa

Vanhemman komponentin tilan muokkaus lapsikomponentissa Reactissa

Tilan muokkaaminen lapsenlapsikomponentissa Reactissa

Tilatietojen käsittely Reactin lapsikomponenteissa

Konseptit

Reactin komponenttien käsitteet

Komponenttien tiedot Reactissa

Komponenttien tyypit Reactissa

Yksisuuntainen data-virta Reactissa

Tilojen nostaminen Reactissa

Yksi totuuden lähde Reactissa

Tyylittely

React-komponenttien tyylitysmenetelmät

Globaalin CSS:n käyttö React-komponenttien tyylittelyssä

Tietojen lisääminen style-attribuuttiin objektista Reactissa

Tietojen lisääminen style-attribuuttiin erillisestä tiedostosta Reactissa

CSS-tyylien käsittely style-attribuutissa Reactissa

Tietojen lisääminen style-attribuuttiin muuttujista Reactissa

Tyylittely Styled Components -kirjastolla Reactissa

Propsien käyttö Styled Components -kirjastossa Reactissa

Propsien käyttö ehdollisessa renderöinnissä Styled Componentsin kanssa Reactissa

Laajennettu komponenttien muotoilu Reactissa

CSS-moduuleilla tyylittelyn aloittaminen Reactissa

CSS-moduuleilla tyylittelyn jatko-opinnot Reactissa

composes-komento luokille CSS modules Reactissa

Komento composes tiedostoille CSS modules Reactissa

Projektit

Projektin Tarkistuslista Reactissa

Muistio-projekti Reactissa