Ohjelmointikielet: React

Materiaalia, joka täydentyy kurssin edetessä…

React -kurssin sisältö

Jakso 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)

Jakso 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
Harjoitukset 3 (demo)
Harjoitukset 4 (keikkainfo)

Ohjelmointikielet - kurssin sisältö

Jakso 2:

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)
JSON-serverin käyttö backend-mock:ina (fanikauppa), Postman, REST-rajapinta (CRUD: Create-Read-Update-Delete)
Node/express-backending tekeminen (notes)
Backendin REST-rajapinnan käyttäminen axioksen avulla
Harjoitukset 3 (demo)
Harjoitukset 5 (fanikauppa 2)

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
Harjoitukset 4: keikkainfo, tehdään itsenäisesti
Harjoitukset 5: fanikauppa 2

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

node/express (backend)

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

Frontendin ja backendin lataaminen palvelimelta:

Sovelluksen siirtäminen internettiin

Tietokantayhteys

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