Skip to content

Why React

story of 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