React tech talk @ CMU
Download as PPTX, PDF2 likes731 views
React is a JavaScript library developed by Facebook for building user interfaces. It allows building of user interface components that are composable and reusable. The key concepts of React include components, unidirectional data flow from parent to child components, state that describes the UI, and the virtual DOM for efficient re-rendering. The document provides an overview of React and includes hands-on examples of building a todo list app to demonstrate core React concepts.
React tech talk @ CMU
- 1. React A JavaScript Library for Building User Interface Lin Dong Date: 2/6/2016
- 3. Outline • React overview • Hands-on practice: Todo List • Advanced project: App Store (follow-up)
- 4. • Origin of React • Solve Facebook’s advertisements problem • JavaScript Library, not a Framework • Easy to learn • Single responsibility • View of MVC • Developed and released by Facebook at 2013 React Overview
- 6. Todo List Full demo: https://jsfiddle.net/ldong/apao5wse/7/
- 7. From UI to Components
- 8. Composability • React is composable from the core • From pieces to whole Small ComponentBig Component
- 9. jsfiddle Demo Todo List display
- 10. jsfiddle Demo Todo List event handlers
- 11. jsfiddle Demo Todo List state change
- 12. Thinking in React: https://facebook.github.io/react/docs/thinking-in-react.html React Concept: Data Flow
- 13. • From a tree of states to a tree of components React Concept: State
- 14. 1. Component • Composable • Reusable • (Re)-Render 2. Data flows • Parent to children components (top to bottom) 3.State describes UI • Reasoning about the states of the UI with dynamically • Inspired by game engines: Doom 3 Core Concepts of React Inspired by Doom3 Game Engine: https://youtu.be/x7cQ3mrcKaY?t=1201
- 16. Virtual DOM • Efficient diff algorithm, O(n) • Batch operation • Render when needed • Bottom line: increase performance Diff: http://calendar.perfplanet.com/2013/diff/
- 17. Takeaways • React is powerful JavaScript library • React ⇔ Lego
- 18. • Add a delete option based on this jsfiddle • Send your answers on slack or WeChat Homework
- 19. Thank you A JavaScript Library for Building User Interfaces