Overreacting: React as a Paradigm

Talk given at November React MD meetup

Transcript

1. Overreacting React as a Paradigm @TheEricSauter Eric Sauter CharmCityJS
3. What is React? A JavaScript Library for Building Web apps User interfaces Anything
4. React is a Paradigm
5. Declarative not Imperative What not How
7. Declarative not Imperative React jQuery button clicked button clicked update state update state? re-render UI update the p tag text add an li update the bg color updated UI updated UI hide that one tag fire some other event cry wait for jQuery…
8. One-way data flow
9. State Event Render Component One-way data flow
10. No need to touch UI when state changes
11. No more spaghetti
12. Composability
13. <Button />
14. Simple -> Complex
15. Container Components (TM)
16. Higher-order components “A higher order component is just a React component that wraps another one.” Use for render highjacking, state/props manipulation, and feature enhancement
17. <HideableButton hidden={true} />
18. Renderer-agnostic
19. import React from ‘react’; import ReactDOM from ‘react-dom’; React core Renderer import React from ‘react’; import ReactNative from ‘react-native’; Renderer
20. React doesn’t care what you render to
21. Virtual Representation Render target DOM iOS Canvas Super Nintendo? React magic Android <View /> render()
22. “Write once, run anywhere” “Learn once, write anywhere”
23. Familiar fundamentals Unique platforms
24. Examples in the wild!
25. React Native
26. facebook.github.io/react- native/docs
27. Victory
28. formidable.com/open-source/ victory/docs/
29. React-Three
30. toxicfork.github.io/react-three- renderer-example
31. react-hardware
32. github.com/iamdustan/react- hardware
33. react-music github.com/ FormidableLabs/ react-music @ken_wheeler
34. React and its principles make sense when building UIs (and many other systems). Wrapping up It’s not a coincidence all of these technologies backed by React are popping up.
35. Eric Sauter www.fixt.co Thank you! @TheEricSauter