React

Nosta sovelluskehityksen tuottavuutta Reactilla

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.

Kenelle:

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

Esitiedot:

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

Reactista:

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 on samalla toteuttanut ja antanut jakoon testauskirjastonsa.

Koulutuksen sisältö

1. PÄIVÄ

Perusteet

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

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

Avainsanat: JavaScript, React, React.js, Redux, Web-ohjelmointi