React learning in the hard way
- 1. React What The Fu** Have I Done?!?
- 2. Who Are You?
- 3. Who Am I?
- 4. What & Why ● Involved in 6 React Projects ● Different React Usages ● My Mistakes ● A MUST know stuff to start ● Tips and Tools
- 5. Wrap Up ● Created by FB ● Community + Git ● Stuff from community ● A Javascript Library for building user interfaces ● Component Based (JSX) ● Whatsup example ● Efficient rendering
- 6. Learn Once -> Write Anywhere
- 7. Component
- 8. State
- 9. Props
- 10. Lifecycle
- 11. Emoji Example
- 12. Thinking In React 4 Steps ● Component Structure ● Static code - codesandbox ● Minimal State ● State Responsibility
- 13. Component Structure Single Responsibility Principle
- 14. Static code
- 15. Minimal State Props vs State 1. Is it passed in from a parent via props? If so, it probably isn’t state. 2. Does it remain unchanged over time? If so, it probably isn’t state. 3. Can you compute it based on any other state or props in your component? If so, it isn’t state.
- 16. State Responsibility One way data flow through component 1. Identify every component that renders something based on that state. 2. Find a common owner component (a single component above all the components that need the state in the hierarchy). 3. Either the common owner or another component higher up in the hierarchy should own the state.
- 17. DOM Document Object Model ● Browser have to parses the HTML ● It removes the child element of elementId ● Updates the DOM with the “New Value” ● Re-calculate the CSS for the parent and child ● Update the layout i.e. each elements exact coordinates on the screen ● Traverse the render tree and paint it on the browser display
- 18. Virtual DOM ● Efficient diff algorithm ● Batched update operations ● Efficient update of sub tree only ● Uses observable instead of dirty checking to detect change ● Angular dirty checking process
- 19. Virtual DOM 1. Re-render when state changed 2. Breadth First Search 3. Re-concilation a. Different type b. Hint from developer (shouldComponentUpdate, keys) 4. Batch update
- 22. Components Types & Patterns ● Functional ● Pure ● Container (Smart Vs Dumb) ● HOC
- 24. Smart vs Dumb
- 25. Smart vs Dumb
- 26. HOC
- 27. Tips & Tools ● Client story - Creative-tim, material-UI, NativeBase ● Open source - HumorMatch ● Create-react-app and more by FB