---
# System prepended metadata

title: React Basic
tags: [lecture]

---

# React Basic

## 9/22

[React official tutorial](https://react.dev/blog/2023/03/16/introducing-react-dev)


## Thinking in React

1. Break the UI into a component hierarchy
![](https://hackmd.io/_uploads/ByFGZlskp.png)

2. Find the minimal but complete representation of UI state 

    - [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) principle (Don't repeat yourself)



---

> props and state
> - Props : arguments you pass to a function.
> - State : a component’s memory.


### Is it State?
- [ ] It remain unchanged over time
- [ ] It passed in from a parent via props
- [ ] Can be computeed based on existing state or props


---


3. Where your state should live 
    - Identify components that use state
    - Find their common parent
    - No suitable? Create a new component

[more detailed](https://react.dev/learn/thinking-in-react#step-4-identify-where-your-state-should-live) 

![](https://hackmd.io/_uploads/rJ-bSesJT.png)
[img ref](https://dev.to/isabelxklee/understanding-inverse-data-flow-in-react-3cg7)

4. How to change my data???
    - inverse data flow

## Hooks

### **Handle States**
- useState
- useReducer
```javascript=
const [state, dispatch] = useReducer(reducer, initialState, init?);
``` 
- Redux? 
    - state machine
[learn more about Rebux](https://tw.alphacamp.co/blog/redux)

#### State as a Snapshot
- re-render
![](https://hackmd.io/_uploads/Syv-Ilo1T.png)
- set state
![](https://hackmd.io/_uploads/BybU8xiJa.png)


### **Passing props**
[Practice](https://react.dev/learn/passing-props-to-a-component#passing-jsx-as-children)
- useContext
    
![](https://hackmd.io/_uploads/HyW-exjJp.png)

### **Handle Event**
- useEffect
    - synchronize a component with an external system.

### **Find DOM element**
- useRef
    - reference a value that’s not needed for rendering.

