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.

1. React
A JavaScript Library for Building User Interface
Lin Dong
Date: 2/6/2016

2. More: https://github.com/facebook/react/wiki/Sites-Using-React
Show Cases

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

5. Hello World
Link: https://jsfiddle.net/ldong/69z2wepo/28629/

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

15. Virtual DOM
Diff: http://calendar.perfplanet.com/2013/diff/

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