Why React
History¶
jQuery¶
- DOM manipulation library
- App state is in the DOM
- Just read what's on the page to see the state
- Problem: DOM as global state
- Hard to debug and understand what changed what when you have a ton of mutations
Angular 1¶
- Opinionated all in one tool
- Everything out of the box
- 2 way data binding
- Model, view, controller
- Routing
- Templates
- mini jQuery
- ..
- 2011: lots of backend devs having to write frontends
Problem with Angular 1¶
- 2 way data binding
- Update the model when the view changes
- Update the view when the model changes
- Hard to understand & debug code
Why React¶
- rendered app = f(state)
- State changes -> re-render app
- one way data binding
- Easier to debug than constantly pinging: "any changes?"
- More performant: only run code when it needs to
- Components
- JSX: HTML, CSS & JS in one
- View = f(state)
- Compose components
- View = comp1(comp2(state))
- No separation of concerns: they're all the concern of the component
- Lots of initial dev hate
- 3rd party components & design systems
- Material UI
Last update:
2023-03-20