Introduction to React (WildHacks 2016)

Transcript

1. A library for creating user interface React @timsitorus
2. React is… • JavaScript library created by Facebook • Used to make Dynamic Web Applications • Open Source • The 5th most starred repo on GitHub
5. What paradigm? • MVC • MVVM • MVVVVVVC • MV*
6. React challenges established best practices in traditional MV* frameworks
7. Build Components, not templates • UI components are composed together • UI description and logic are tightly coupled • Full Power of JavaScript to express UI
13. Separation of Components • Composable • Reusable • Maintainable • Testable
14. Elements vs. Components • Elements are your basic building blocks (div, li, h1 – h5) • Components are the stuff you build
15. Elements vs. Components
16. Component Example: To do List
17. Component Example: To do List What is That?
18. JSX • Optional HTML-like markup • Declarative description of UI inlined in JS code • Combines ease templates with the power of JavaScript • Preprocessor translates to plain JavaScript: • On the fly (suitable during development) • Offline using the React CLI
19. Component Example: To do List
20. Component Example: To do List
21. Component Example: To do List
22. Component Example: To do List
23. How do we handle data?
24. State vs. Props • Both Props and State are plain JS Objects • When Props or State changes, render and update • State à • Internal State of a component • Props à • Passed by a parent component • Used to configure a component • Used to pass data between components
25. Handling Data: State
26. Handling Data: Passing props
27. Handling Data: Using props
28. Traditional Performance Best Practices • Avoid Expensive DOM Operations • Minimizes access to the DOM • Update elements offline before reinserting into the DOM • Avoid tweaking layouts in JavaScript
29. But should the App developer be responsible for low-level DOM Optimizations?
30. But should the App developer be responsible for low-level DOM Optimizations? Probably Not
31. React Re-renders everything every update Sounds Expensive?
32. Virtual DOM 1. Create lightweight description of the UI 2. Diff it with the old one 3. Compute minimal set of changes to apply to the DOM 4. Batch Execute all updates Re-render everything on every update
33. Virtual DOM Benefits • Clean, descriptive model • Optimized DOM updates and less reflows à Fast
34. Still not convinced?
35. React Native • Not a “Mobile Web App”, “HTML5 App” or “Hybrid App” • Elements that you use to build your components are native • Reload your app instantly with no recompilation • Fantastic DevTools (Ex: Remote Debugging, Systrace, Perf Monitor) • Use Native Code when you need to Learn Once, Write Anywhere
36. Resources • React à https://facebook.github.io/react/ • Tutorial à https://online.reacttraining.com/p/reactjsfundamentals • Rethinking Best Practices à https://www.youtube.com/watch?v=x7cQ3mrcKaY • Create-React-App à https://github.com/facebookincubator/create-react-app • React Native à https://facebook.github.io/react-native/
37. Thank You! @timsitorus