# Web ohjelmoinnin jatkokurssi muistiinpanot videoista

## Next.js
https://www.youtube.com/watch?v=IkOVe40Sy0U
-> framework for rendering React applications - server side react applications
--> routing - javascript and react

### core features
1) server-rendering react apps
2) automatic code splitting
3) simple page based routing - upload a page and access with url - no need to map routs
4) built in css support
5) hot reloading - server autoreloads after save
6) deployment - build command -

### installation and setup
- npm init
- npm install next react react-dom
-> scripts:
dev next
build next build
start next start


### link module -> 12.30
-> import Link from "next/link";
-> link href

### example: bit coin data
-> npm init -y
--> package.json

-> npm install next react react-dom --save
--> lisää package.json file
--> package -> test kohtaan laitetaan installation kohdasta dev alaspäin koodi

-> pages folder
--> index.js:
export default () => (<div>Hello Next.js</div>);
- npm run dev
-> localhost

-> toimii

### components folder noin 18 min kohdalla
-> sisältää reactin komponentit, asetettu root
--> komponentit toimivat kaikissa sivuissa
--> navbar komponentti

-> komponenttiin <>style jsx {"css koodi tähän"}
--> style koodi tämän avulla komponenttiin

-> layouts.js -> noin 19 min kohdalla
-> bootstrap - 21 min/23

# Server side rendering
https://www.youtube.com/watch?v=8_RzRQXSHcg
Server-side rendering - ssr

## Client-side rendering apps
-> SPA applications - each page rendered on the client - not server
1) server serves single static index.html
2) browser uses it to parse html, css, js, img and fonts
3) js bundle fetches data from an API and constructs the DOM
4) navigation is done by routes - history API
5) app loads remaining js in chunks on demand - code splitting
6) the site can be served from a CDN - speed

### Pros:
1) less strain on server
2) better UI/UX interactivity
3) static hosting
4) decoupled architecture - backend handles authentication, file upload - decoupled from front end - front makes calls to API service

### cons:
1) slow inital render - initial render depends on js and thus can be slow
2) heavy js dependency
3) non-SEO friendly
4) poor accessibility

## Server side
1) new html each request
2) browser loads and parses css
3) then parses and loads js
4) user requests a new page
5) browser saves assets for faster load

### pros:
1) fast initial load
2) better perceived performance
3) SEO-friendly

### cons:
1) load on server - constant requests
2) latency due to requests - back and forth
3) low UI/UX interactivity

## React:
1) can run in a browser, server, native app, or vr headset
2) app can be server rendered for faster paint - client render take over as an spa

## Server-render react SPA
1) The server pre-renders the app into an html string and se rves it up
2) browser loads and parses CSS to make the page viewable
3) browser loads the js bundle and boots the React SPA to make it interactive

## react sanastoa:
1) bundler: bundled up asstes - js, css, img, fonts
2) transpiler: transforms ES6 + down to ES5 for better support
3) linter: analyzes source for stylistic and logical errors
4) test runner: allows for unit testing and code coverage reports
5) live server: dev server

# Gatsby
https://www.youtube.com/watch?v=6YhqQ2ZW1sc&feature=emb_title
- static site generator that uses react
- doesn't need a router
- create page: 14.20 min
- page styling: 17.33 min
- links in list: 18.40
- components around 20 min
- blog -> 22 min
--> blog post example 23

## install:
npm i -g gatsby-cli
-> gatsby new *nimi* projektille
-> cd projektin nimi
-> code . -> visual studio code
--> start using visual studio terminal

package.json selitykset 5min eteenpäin

## imports for js
- import React from 'react'
- import Link from 'gatsby-link'
- import Helmet from 'react-helmet' -> react-helmet allows to set meta tags that will be read by search engines and social media crawlers

## gatsby start
- gatsby develop - starts localhost

# Gatsby vs Next
"The fundamental difference is Next requires a server to be able to run. Gatsby can function without any server at all. Gatsby just generates pure HTML/CSS/JS at build time , whereas Next creates HTML/CSS/JS at run time"
-> next periaatteessa tutumpi tässä vaiheessa

# Using JWT Authentication in React
https://www.youtube.com/watch?v=Nq9RmAB9eag

JSON Web Token (JWT) is a compact URL-safe means of representing claims to be transferred between two parties

JSON Web Token (lyhenne JWT) on JSON-pohjainen avoimen standardin (RCF 7519) menetelmä käyttöoikeustietueiden (Access Token) hallinnoimiseen eri ohjelmistojen välillä. Yleisin käyttökohde lienee esimerkiksi käyttäjän varmentaminen, eli onko käyttäjällä varmasti oikeus haluttuun kohteeseen. JSON Web Tokenin edut ovat sen keveydessä, siinä, että osa tarvittavasta datasta löytyy itse tietueesta (ei välttämättä tarvitse hakea esimerkiksi istunnon (käyttäjän) tietoja tietokannasta joka pyynnöllä) ja kyvyssä soveltua monelle ohjelmistoalustalle.

-> react - server connection

# Redux
https://www.youtube.com/watch?v=QZcNGfcn-oo&feature=emb_title
-> redux as state manager for the player
--> store.js initializes redux react store - 7 min

Rootreducer esimerkki - 8 min kohdalla
reducers: javascript object that has keys and the keys have vaules
-> all components that have state need a reducer
-> values are the stored state
-> keys are how you access the stored state