Back to React

Transcript

1. BACK TO REACT

2. BACK TO REACT

3. 5 WAYS TO BE A HAPPY REACT DEVELOPER

4. START WITH CODE

5. CATCH FEELS

6. THE
 MISSING PIECE Meets the BIG O Crappy Keynote

7. THE
 MISSING PIECE Meets the BIG O Crappy Keynote

8. THE
 MISSING PIECE Meets the BIG O Crappy Keynote Paraphrased

   & abridged edition

9. The Missing Piece sat alone…

10. waiting for someone to take it somewhere.

11. Some fit but couldn't roll.

12. Others rolled but didn't fit.

13. Some had too many pieces missing.

14. Others had too many pieces, period.

15. Then, one came along that fit just right …

16. None

17. Until the Missing Piece began to grow.

18. None

19. Then one came along that looked different.

20. "I was hoping that I could roll with you…"

21. "I'm not missing a piece."

22. "So, you can't roll with me,"

23. "But you could roll by yourself."

24. None
25. None
26. None
27. None
28. None
29. None
30. None
31. None

32. SO, BACK TO REACT

33. None

34. The V in MVC™

35. None
36. None
37. None
38. None
39. None

40. REACT IS A GOOD MISSING PIECE

41. 2014 (MY BIG O MOMENT)

42. None
43. None
44. None

45. “prop drills”

46. async/shallow setState “prop drills”

47. async/shallow setState “prop drills” styling

48. async/shallow setState “prop drills” styling (Context)

49. async/shallow setState “prop drills” styling (Context)

50. async/shallow setState styling (Context) big components + better patterns

51. styling (Context) big components + better patterns RTFM + nothing

    else existed

52. (Context) big components + better patterns RTFM + nothing else

    existed inline-styles + CSS

53. (Context) big components + better patterns RTFM + nothing else

    existed inline-styles + CSS HIGHER TOLERANCE FOR JIT SOLUTIONS

54. (Context) big components + better patterns RTFM + nothing else

    existed inline-styles + CSS MAINTAINABILITY

55. (Context) big components + better patterns RTFM + nothing else

    existed inline-styles + CSS NOBODY ASKS ME ABOUT IT

56. 2015 (THE YEAR REACT BLEW UP)

57. None
58. None
59. None

60. REACT

61. REACT++

62. None

63. INSTEAD OF MOVING FAST…

64. WE WERE MANAGING DEPENDENCIES…

65. CLARIFYING DESIRED PRACTICES

66. WE WENT BACKWARD

67. WHAT CHANGED?

68. REACT

69. REACT

70. #JAVASCRIPTFATIGUE

71. REACT

72. —Edsger Dijkstra (On the nature of Computer Science) “Simplicity is

    a great virtue but it requires hard work to achieve it and education to appreciate it. And to make matters worse: complexity sells better”

73. HERE

74. BEFORE

75. HERE

76. FIVE LIBERATING CONSTRAINTS

77. 1 KNOW WHO’S DRIVING

78. 1 KNOW WHO’S MOUTH YOU'RE IN

79. REACT

80. <script src="./react.js"></script> <script> React.render( React.DOM.div({}, "Hello World!"), document.body ) </script>

81. REACT REDUX REACT ROUTER

82. REACT REDUX APP REACT ROUTER

83. REACT REDUX APP REACT ROUTER REACT-ROUTER-REDUX

84. REACT FLUX APP REACT ROUTER REACT-ROUTER-FLUX

85. WHAT ROLE DOES REACT PLAY IN YOUR APP?

86. 2 OPTIMIZE FOR CHANGE

87. <RANT />

88. None

89. KEEP IT LIVE

90. DON'T PERF W/O METRICS

91. 3 KNOW YOUR SHAPES

92. 3 MASTER THE PATTERNS

93. None

94. KNOWING & UNKNOWING

95. COMPONENT/RENDER PROP

96. COMPONENT/RENDER PROP

97. COMPONENT/RENDER PROP

98. HIGHER-ORDER COMPONENT

99. HIGHER-ORDER COMPONENT

100. HIGHER-ORDER COMPONENT

101. HIGHER-ORDER COMPONENT

102. HOC VS CALLBACKS

103. KNOW BOTH

104. 4 AVOID THE EDGE

105. –Ryan Florence “Don't forget it's not the edge that's bleeding,

     it's you.”
106. None

107. <div style={{ padding: "2rem" }}>

108. <div css={{ padding: "2rem" }}>

109. <div className="p-3">

110. CHOOSE TOOLS YOU CAN MASTER

111. 5 PARTNER. DON'T DEPEND

112. None

113. STOP DELEGATING

114. WHEN YOU NPM INSTALL, THAT'S YOUR CODE NOW

115. GET GOOD

116. SHARE

117. REACT IS AMAZING

118. UNITY

119. GUARD OUR STACK

120. 1 KNOW WHO’S DRIVING

121. 2 OPTIMIZE FOR CHANGE

122. 3 KNOW YOUR SHAPES

123. 3 MASTER THE PATTERNS

124. 4 AVOID THE EDGE

125. 5 PARTNER. DON'T DEPEND

126. None

127. @chantastic

128. @chantastic LEARNREACT.COM

129. None