React: How to JavaScript Hipster

The goal of this presentation is to give the audience an overview of all the concepts they will need to know to become a React hipster. TL;DR Tell me what I will need to google later.

Transcript

1. How To JavaScript Hipster React Matthew M Osborn
2. BACKGROUND
3. Classes
6. Arrays
8. Modules
11. https://commons.wikimedia.org/wiki/File:Internet_Explorer_10%2B11_logo.svg
12. Babel
15. Webpack
17. LAB
18. Contract Class • Start Date • Name • Contact Person Class • First Name • Last Name • Full Name “App” • List of Contracts • List of Active Contracts • Contracts by Contact
19. React
20. Components
21. Atomic Design “…is methodology for creating design systems. There are five distinct levels in atomic design” - Brad Frost
22. http://bradfrost.com/blog/post/atomic-web-design/
23. State Machines
26. Virtual DOM
27. JSX
32. Props
36. LAB
37. But First…
41. • Use objects from lab 1 • Display a list of contracts • Show the contact • Show Start Date
42. Next Steps
43. State
46. Events
50. Functional Components
52. Lifecycle
53. ComponentDidMount
54. ComponentDidMount ComponentDidUpdate
55. ComponentDidMount ComponentDidUpdate ShouldComponentUpdate
56. ComponentDidMount ComponentDidUpdate ShouldComponentUpdate ComponentWillReceiveProps
57. ComponentDidMount ComponentDidUpdate ShouldComponentUpdate ComponentWillReceiveProps ComponentWillUnmount
58. LAB
59. • Performance tweaks • Search list of Contracts
60. Next Level
61. Portals
63. React-Router
65. Flux / Redux
66. https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6
67. https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6
68. https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6
69. https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6
70. https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6
71. https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6
72. https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6
73. https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6
74. https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6
75. LAB
76. C.R.U.D
77. Related Info
78. GrpahQL
79. “GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data … gives clients the power to ask for exactly what they need and nothing more...”
80. https://www.neogaf.com/threads/media-create-thread-week-42-2017-oct-16-%C2%96-oct-22-read-intro-please.1454698/