Thinking in react 2018
0 likes36 views
The document discusses React and techniques for building user interfaces with it. It introduces React as a JavaScript library for building declarative, component-based UIs that can be rendered on different platforms. It then covers techniques for "Thinking in React" such as breaking UIs into composable components, lifting state up to parent components, and prioritizing composition and containment over inheritance. Code demos are provided to illustrate a sample app built using these techniques.
Thinking in react 2018
- 1. Thinking In React Guy Balzam / July 2018
- 2. Agenda What is React Thinking In React
- 3. Who Are You? Guy Balzam Github | Linkedin
- 4. What is react? A JavaScript library for building user interfaces Declarative Component-Based Learn Once, Write Anywhere
- 5. DEMO APP Super Simple Demo Demo1.js https://codesandbox.io/s/5k1orl8yn4
- 12. Thinking in react Functional Programming, Composition Lifting State Up
- 14. Composition vs Inheritance Containment - components don’t know their children ahead of time Specialization - components as being “special cases” of other components
- 15. DEMO World Cup App - Add Header Demo2.js https://codesandbox.io/s/5k1orl8yn4
- 16. Lifting State Up
- 17. DEMO World Cup App - Lift State Demo3.js https://codesandbox.io/s/5k1orl8yn4
- 18. Who also lifts states up? Everybody! React-router, redux, mobx…
- 19. New Context API
- 20. Summary Break UI Component = Composition State (+ Inverse Data Flow) = Lift State Up