# 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

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)

[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

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
- set state

### **Passing props**
[Practice](https://react.dev/learn/passing-props-to-a-component#passing-jsx-as-children)
- useContext


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

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