Ohjelmointikielet: React ja node.js

Materiaalia, joka täydentyy kurssin edetessä…

React -osuuden sisältö

Osa 1:

Kurssin esittely ja kehitysympäristöön tutustuminen
React-komponentti, props:it, map
Props:ien destrukturointi, keys-props
Eventhandlers/callbacks, tilamuuttujat (state, useState)
Harjoitukset 1 (demo)
Harjoitukset 2 (fanikauppa)

Osa 2:

JSON-serverin käyttö backend-mock:ina (notes), Postman, REST-rajapinta (CRUD: Create-Read-Update-Delete)
Backendin REST-rajapinnan käyttäminen axioksen avulla
React-router
React-boostrap
Harjoitukset 3 (demo)
Harjoitukset 4 (keikkainfo)

React (frontend)

Harjoituksia 1: react-alkeet, tehdään yhdessä demona
Harjoituksia 2: fanikauppa, tehdään itsenäisesti

Palvelimen kanssa kommunikointi (frontend)

Harjoituksia 3: notes-demo, tehdään yhdessä demona
Harjoituksia 4: keikkainfo, tehdään itsenäisesti

React-boostrap - demo, voit käyttää boostrap-komponentteja harjoitusten tekemiseen, jos haluat
Effect-hooks
React-router

node/express (backend + tietokantayhteys)

Tähän asti olemme tehneet vain Frontend-koodia. Tässä demossa tehdään yksinkertainen web-palvelin node.js:n ja expressin avulla (harjoitukset 3:n muistiinpanosovelluksen backend).

Notes-backend demo

Tässä versiossa ei ole vielä tietokantaa, joten siitä ei ole meille mitään hyötyä. Otetaan käytöön tietokanta…

Tietokantayhteys

Backend keskustelee tietokannan kanssa. Käytetty tietokanta voi olla relaatiotietokanta (SQL) tai dokumenttitietokanta (NoSQL). Tässä esimerkit molemmista:

Kirjautuminen, käyttäjähallinta, JSON webtoken

Kun käyttäjä kirjautuu järjestelmään hän saa JSON webtoken:in tallenttavaksi selaimen muistiin. Token liitetään jokaiseen frontend:in tekemään pyyntöön. Webtoken:in sisään koodatun userid:n avulla backend tunnistaa kirjautuneen käyttäjän.

Token-perustainen kirjautuminen
Harjoitukset 5: Notes-backend demo, tehdään yhdessä
Harjoitukset 6: fanikauppa 2

Koodin siirtäminen palvelimelle

Koodi siirretään (deploy) joko koulun webhotelliin, tai Herokuun. Ensin React-frontend:istä tehdään build, joka sitten ladataan webserveriltä (backend).