---
tags: React
---
# React state and props(2022/03/20):

## :memo: todo list
0. State and Props
1. Divide components
2. use array.map function in react
3. 一個 JSX 元素只能有一個最外層元素
4. coonect API (axios)

### 0. State and Props

`先說結論： state 在當下的 component 中被使用及管理, 而props (short for “properties”) 從parent component 傳入`
1. **state** (similar to variables declared within a function)

normal js variable vs. react state:
https://ithelp.ithome.com.tw/articles/10219287

***state is changeable***

2. **props** (similar to function parameters)

***props should not be changed***

### 1. Divide components
拆分components並且傳入props (presentation)

### 2. Use array.map function in react
https://ithelp.ithome.com.tw/articles/10220209

### 3. 一個 JSX 元素只能有一個最外層元素
https://ithelp.ithome.com.tw/articles/10220688

### 4. coonect API (axios)

### :snowboarder: Home work
1. [Todo List](https://www.youtube.com/watch?v=pCA4qpQDZD8)

It is a very common app which most React developers can build, demonstrates basic knowledge of React.

Summary:
You will build a simple to-do app where users can add different types of notes. In addition, users can approve or delete notes from the list.

Topics Covered:
React basics such as components, state, props. React Hooks lifecycle ie useEffect() and using controlled HTML form in React.

2. [Calculator with React and Flexbox](https://youtu.be/KzYUuTiHdiY)

Summary:
You will build a calculating app that allows the number to be entered by a click of buttons and perform operations like addition, subtraction, multiplication, etc to produce results.

Topics covered:
React class-based components, state. CSS styles with grid and flexbox