React

Nosta sovelluskehityksen tuottavuutta Reactilla

React on Facebookin kehittämä ja käyttämä käyttöliittymäkirjasto, joka mahdollistaa interaktiivisten, tilallisten ja uudelleenkäytettävien käyttöliittymäkomponenttien teon selainsovelluksiin

Facebook hyödyntää Reactia ja koko Instagrammin web-sivusto on rakennettu sillä, joten kirjasto on osoittanut käyttökelpoisuutensa tuotannossa maailman suurimmilla sivustoilla. Myös Airbnb käyttää Reactia ja samalla toteuttanut ja antanut jakoon testauskirjastonsa.

Kenelle?

Koulutus on suunattu kehittäjille, joilla on tarve saada hyvä käsitys Reactista itsestään, sekä React-kehityksestä yleisesti.

React nostaa reilusti sovelluskehityksen tuottavuutta ja on osoittanut suorituskykynsä selainsovelluksissa. Se perustuu omien komponenttien rakentamiseen, jotka hoitavat datan esittämisen käyttöliittymässä. MVC-ratkaisuissa React on se V.

Oikeissa React-projekteissa kehitys tehdään tyypillisesti palvelimella, jolla pyörivät myös muut kehityksessä käytettävät ohjelmat. Tälläkin kurssilla otamme mukaan Node.js:n, katsomme toimivaa projektirakennetta, ja lisäämme testien ajamisen mukaan.

Esitiedot: Perusosaaminen selainsovelluskehityksestä ja JavaScriptistä. Komentorivin käyttö ei ole sinulle vierasta. Kurssimateriaali on englanniksi.

Koulutuksen tarkempi sisältö

1. PÄIVÄ

Perusteet

• React ideologia
• Hello React
• JSX vai JavaScript
• ES6 ja Babel React projekteissa
• Reactin käyttöön otto

Komponentit

• Komponentti
• JSX
• ES5 vs. ES6 syntaksi
• props

Kokoelmakomponentit

• Komponenttikokoelmat
• props ja omistushierarkia

Tilanhallinta

• Tila (state) vs. props
• HTML lomakkeet
• Tapahtumankäsittely
• Komponenttien elinkaari

Komponenttien elinkaari

• Elinkaaren hallinta
• Asynkroniset tapahtumat
• REST kutsut
• Uudelleenkäytettävät komponentit

Reititys

• Single Page Application (SPA)
• Reititys react-router kirjastolla

2. PÄIVÄ

Alkuun React-kehityksessä – taas

• Palvelimen setup
• Projektirakenne
• Työkalut ja kirjastot

Kääntäminen

• React palvelimessa
• Babel / JSX
• Node.js/Express ja React projekti
• Paketointi: webpack

Testaus

• Testiympäristöt
• ESLint ja react plugin
• Jest
• enzyme

Redux

• Redux rooli
• Tilanhallinta
• Actionit
• Reducerit