what is React? ▸ React is an opinionated View library. ▸ It is a fundamentally different way to build UIs. ▸ It leads to thinking in terms of pure functions and immutability and other good practices.
Everything is a component. ▸ A component is a pure function of application state. ▸ Components can be reused, composed to create other components, isolated for testing. ▸ UI is easy to reason about as state changes over time.
engineers! ▸ Same dev team! Web, iOS, Android, Desktop ▸ Improved Testability, Reliability ▸ Performant by Default ▸ Real Code Reuse ▸ Velocity: shorten the edit-reload cycle; less time debugging ▸ Future proof: As your software evolves, replace individual components.
changing over time is hard to reason about. ▸ UI components get out of sync with each other and it's hard to debug. ▸ When changes happen, we have to reach deep into our view and mutate objects.
views was easy! ▸ Why? … because we had the full application state at one moment in time (a snapshot) ▸ All we have to do is query stuff and generate HTML from that stuff. ▸ When an action happens, re-generate the entire view!
more client-side ▸ DOM Manipulation: jQuery ▸ Client-side templating: mustache, handlebars ▸ Must wire-up events every time you generate new DOM ▸ Still need to manipulate the DOM!
can reason about your view just like you used to do with server-generated views. ▸ Your view is a deterministic function of your state. (the same state will always produce the same view) ▸ Even if you serialize that state, save it to disk and restore it next week.
Easy hot-reloading during development ▸ Atomic/Optimistic updates ▸ Imagine if an HTTP request fails, you just load a previously stable state ▸ Time-travel debugging ▸ Imagine stepping back in time through your app state
less time debugging ▸ Write testable code! ▸ Iterate with confidence and build more reliable software. ▸ Learn once, write anywhere ▸ Web, iOS, Android, Mac/Windows, even console apps