Introduction to React - Triangle.rb May 2015

Transcript

1. React

2. Nate Hunzaker Front-end Developer, Viget @natehunzaker

3. We build lots of user interfaces

4. None
5. None
6. None

7. Every framework has a big idea

8. They don't just reinvent the wheel

9. “Backbone.js gives structure to web applications [...]”

10. “Ember.js is built for productivity. Designed with developer ergonomics in

    mind...”

11. Keep it simple

12. “We can only hope to make reliable those things in

    which we understand.” - Rich Hickey

13. • Composition • One way data flow • Static mental

    model

14. Compo(sition,nents) "React is all about building reusable components. In fact,

    with React the only thing you do is build components." - facebook.github.io/react

15. Encourage developers to break a user interface into small components.

16. <Blogs/> <Navigation/> <Posts/> <Post/> <Post/> <Post/> <Post/>

17. None
18. None
19. None
20. None
21. None
22. None

23. • No templates • Strange syntax

24. “Templates separate technology, not concerns.” - Pete Hunt (formerly of

    Facebook)
25. None

26. JSX “The purpose of this specification is to define a

    concise and familiar syntax for defining tree structures with attributes.” http://facebook.github.io/jsx/
27. None
28. None
29. None

30. How does this work?

31. None
32. None

33. npm install babel npm install react-tools

34. None

35. <main/> <Menu/> <Inbox/>

36. Virtual DOM

37. Build a DOM tree Compare to old state Get cheapest

    mutation path (with Levenshtein) Write new DOM (in batches) New state

38. State changed! So what...

39. Imperative Programming Describe the transition between state

40. Declarative Programming Express the logic, not the flow

41. Define Interface Change State • Each change in state flushes

    to the DOM • Properties are sent in one direction • No cascading updates

42. Let's talk about state

43. A component is given props A component manages state

44. A component is given props

45. A component manages state

46. That's kind of it

47. Static Rendering Model

48. This is fast

49. Holy Hot Modules! https://github.com/gaearon/react-hot-loader

50. Really fast

51. Static Mental Model

52. When you render to a virtual environment, the DOM becomes

    an implementation detail
53. None
54. None

55. What is an isomorphic?

56. None

57. React.render() is idempotent Same in, same out

58. None
59. None

60. React.renderToStaticMarkup

61. None

62. How do I build real apps with this?

63. Flux “Flux [...] complements React's composable view components by utilizing

    a unidirectional data flow.” http://facebook.github.io/flux/
64. None

65. I thought you said this was simple

66. Job Queue State State State I want to create a

    widget Ready a widget! I can totally do that! Ch-ch-ch-ch- changes I love David Bowie!

67. Flux Formal Capacitor: A demo isomorphic Flux app https://github.com/vigetlabs/capacitor

68. Flux Fun http://www.natehunzaker.com/yappy-bird/

69. App State Stimuli New state

70. Initial State Sound Jump()

71. None
72. None
73. None
74. None

75. NuclearJS https://github.com/optimizely/nuclear-js Yahoo Flux https://github.com/yahoo/flux-examples Om (Clojurescript) https://github.com/swannodette/om

76. On that note...

77. React injects a few constraints that yield powerful benefits

78. By focusing on composability and a single direction flow of

    data, we can greatly simplify our apps

79. Hopefully you didn't ignore me after the JSX :)

80. Thanks! Nate Hunzaker Front-end Developer, Viget @natehunzaker

81. Iconography: User interface icon by Aziz, the Noun Project http://thenounproject.com/azisher

    JavaScript Logo: https://github.com/voodootikigod/logo.js General React Concepts: React Homepage http://facebook.github.io/react/ JSX Specification http://facebook.github.io/jsx/ Rethinking Best Practices, Pete Hunt: https://www.youtube.com/watch?v=x7cQ3mrcKaY Decomplexifying Code with React, Steven Luscher: https://www.youtube.com/watch?v=rI0GQc__0SM An Introduction to ReactJS, James Pierce https://www.youtube.com/watch?v=m2fuO2wl_3c Flux Flux Homepage http://facebook.github.io/flux/ Examples React Fun https://github.com/nhunzaker/react-fun React Animatable https://github.com/nhunzaker/react- animatable An Isomorphic Chart https://github.com/nhunzaker/an- isomorphic-chart Capacitor https://github.com/vigetlabs/capacitor Yappy Bird https://github.com/nhunzaker/yappy-bird

82. react-router: the best router https://github.com/rackt/react-router