This document discusses React concepts like components, virtual DOM, and data flow. It provides links to examples demonstrating JSX, building a static version, identifying state, and adding inverse data flow. React allows building modular and declarative UIs through composable stateless components while encapsulating interactive logic in stateful components. Isomorphic React applications are also discussed.

1. Thinking in React
liuyicheng@meituan.com

2. Hello React

3. Hello React
• Just the UI
• Virtual DOM
• Data Flow

4. Hello React
• Easy to Learn
• Composability
• Isomorphic App

5. Hello React
• http://localhost:9080/hello-react/index.html
• HTML inside JavaScript
• JSXTramsformer

6. JSX & react-tools
• http://localhost:9080/hello-react/jsx/
index.html
• JSX optional

7. Virtual DOM
• http://localhost:9080/hello-react/virtual-
dom/index.html
• re-rendering when state changed
• virtual DOM diff implementation

8. Data Flow
• http://localhost:9080/hello-react/data-flow/
index.html
• one-way reactive data flow

9. Easy to Learn
• http://localhost:9080/playground/index.html
• props, state, refs
• JSX, JavaScript Expressions, inner style
• Lifecycle Methods

10. Thinking in React
http://facebook.github.io/react/docs/thinking-in-react.html

11. Start with a mock

12. Break the UI into a component hierarchy
• FilterableProductTable (orange)
• SearchBar (blue)
• ProductTable (green)
• ProductCategoryRow (turquoise)
• ProductRow (red)

13. Break the UI into a component hierarchy
• If your model was built correctly your UI
(and therefore your component structure)
will map nicely onto it
• That's because user interfaces and data
models tend to adhere to the same
information architecture which means the
work of separating your UI into
components is often trivial

14. Build a static version in React
• http://localhost:9080/thinking-in-react/
static-version/index.html
• Do not use state at all to build this static
version
• React's one-way data flow (also called one-
way binding) keeps everything modular, easy
to reason about, and fast.

15. Identify the minimal (but complete)
representation of UI state
• Figure out what the absolute minimal representation of
the state of your application needs to be and compute
everything else you need on-demand.
• Is it passed in from a parent via props? If so, it probably
isn't state.
• Does it change over time? If not, it probably isn't state.
• Can you compute it based on any other state or props in
your component? If so, it's not state.

16. Identify the minimal (but complete)
representation of UI state
• The original list of products
• The search text the user has entered
• The value of the checkbox
• The filtered list of products

17. Identify the minimal (but complete)
representation of UI state
• The search text the user has entered
• The value of the checkbox

18. Identify where your state should live
• http://localhost:9080/thinking-in-react/
stateful-version/index.html
• This is often the most challenging part for
newcomers to understand

19. Identify where your state should live
• A common pattern is to create several
stateless components that just render data,
and have a stateful component above them
in the hierarchy that passes its state to its
children via props.The stateful component
encapsulates all of the interaction logic,
while the stateless components take care of
rendering data in a declarative way.

20. Add inverse data flow
• http://localhost:9080/thinking-in-react/final-
version/index.html
• React makes this data flow explicit to make
it easy to understand how your program
works, but it does require a little more
typing than traditional two-way data
binding.

21. React in MT-FE-COS
Isomorphic App

22. Browserify
• http://localhost:9080/react-in-mt-fe-cos/
browserify/index.html
• reactify, cssify, browserify, yuify, watchify,
livereloadify…

23. Composability
• http://localhost:9080/node_modules/
mtfe_react-components-dialog/demo/
index.html
• http://npm.sankuai.com/browse/keyword/
mtfe_react-components

24. Isomorphic App
• http://wiki.sankuai.com/pages/
viewpage.action?pageId=117773197
• Coming soon
• http://git.sankuai.com/users/liuyicheng/
repos/thinking-in-react/browse

25. liuyicheng@meituan.com
Q & A