- What is this magical library and how it works? - How to think in React and build great components? - Deep dive into the Virtual DOM - Some awesome tools that will save you a huge amount of time when you start

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

20. Virtual DOM
Example

21. Virtual DOM
Example

22. Components
Types & Patterns
● Functional
● Pure
● Container (Smart Vs Dumb)
● HOC

23. Functional & Pure

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

28. Thank You!
Questions?
www.chenfeldman.com
chenfeldmn@gmail.com