---
tags: React, Functional programming
---
# React 超入門(2022/03/15):

## :memo: todo list
0. What's SPA? What's server side render?
1. What's JSX?
2. Virtual Dom
4. Functional Javascript

### 0. What's SPA? What's SSR?
### 1. React 101
https://github.com/kdchang/reactjs101/blob/master/Ch03/reactjs-introduction.md
[html 版](https://github.com/hryjosn/web_tutorial/blob/main/02-counter/setup/index.html)
[React 版](https://github.com/hryjosn/React-tutorial)
### 2. What's JSX?
https://zh-hant.reactjs.org/tutorial/tutorial.html#what-is-react

### 3. Virtual Dom

從開始碰 Vue 跟 React 後便常聽到 Virtual DOM 這個詞
我們都知道這兩個非常多人使用的框架 (函式庫) 都是建立於 Virtual DOM 之上
為的是避免直接操作 DOM
因為操作 DOM 這件事會耗費很大的成本
Virtual DOM 實際上的作法就是用物件來描述 DOM 的結構，在 DOM 的節點需要更動時
不直接修改 DOM，而是透過 diff 演算法比較 Virtual DOM 修改前與修改後的樹狀結構
然後批次更新真實 DOM 中的節點。

用影片秒懂 React and Virtual DOM
https://www.youtube.com/watch?v=BYbgopx44vo

Note: `ES6 語法對照` https://github.com/kdchang/reactjs101/tree/master/Appendix01

### 4. Functional JavaScript

`npm install -g functional-javascript-workshop`
Execute: functional-javascript-workshop
or
(optional)
`yarn add functional-javascript-workshop --dev`

{
  "name": "functional_javascript",
  "version": "1.0.0",
  "main": "index.js",
  "repository": "https://github.com/hryjosn/functional_javascript.git",
  "author": "Henry Johnson <[e-mail]>",
  "license": "MIT",
  "scripts": {
    "test": "functional-javascript-workshop"
  },
  "devDependencies": {
    "functional-javascript-workshop": "^1.0.6"
  }
}

Add script:"test":"functional-javascript-workshop"

Reduce: https://w3c.hexschool.com/blog/a2cb755f
recursing :
https://medium.com/tomsnote/javascript%E7%9A%84%E9%81%9E%E8%BF%B4-recursive-f8ce5d084533

遞迴範例

const func = (num) => {
    if(num === 0) return
    console.log(num)
    return func(--num);
}
func(10)


20220315 作業:
1. [Make a slider](https://www.youtube.com/watch?v=og3wCO98HkQ)
React exercise to create an image slide, where users can view multiple images with next/previous buttons. Additionally, there is also an option to select an image from any index of the list through a click-on option circle.

The following are the steps to create an image slider in React JS:

1. Declare array of objects with id and image url.
2. For pre/next functionality, we decrement/increment count of the index of active image.
3. Update active image index with clicked option.

2. [Make a Login form](https://www.youtube.com/watch?v=91qEdc6dSUs)

React code for simple login form where the user login by entering their username and password. The form inputs are validated to check if correct information is entered and the error messages are the validation fails. The login form is hidden and the “Welcome, ${name}” message is shown when the user login is successful.

The following are the steps to create a simple login form using React JS:

1. Create name, email and password input form elements.
2. React States to store user input values.
3. Add form validation for compare name, email and password with correct values.
4. Display “Welcome, ${name}” if login is successful, else display the error message.