Embed Size (px)
Citation preview
Hello React
Hello React
• Just the UI
• Virtual DOM
• Data Flow
Hello React
• Easy to Learn
• Composability
• Isomorphic App
Hello React
• http://localhost:9080/hello-react/index.html
• HTML inside JavaScript
• JSXTramsformer
JSX & react-tools
• http://localhost:9080/hello-react/jsx/index.html
• JSX optional
Virtual DOM
• http://localhost:9080/hello-react/virtual-dom/index.html
• re-rendering when state changed
• virtual DOM diff implementation
Data Flow
• http://localhost:9080/hello-react/data-flow/index.html
• one-way reactive data flow
Easy to Learn
• http://localhost:9080/playground/index.html
• props, state, refs
• JSX, JavaScript Expressions, inner style
• Lifecycle Methods
Thinking in React
http://facebook.github.io/react/docs/thinking-in-react.html
Start with a mock
Break the UI into a component hierarchy
• FilterableProductTable (orange)
• SearchBar (blue)
• ProductTable (green)
• ProductCategoryRow (turquoise)
• ProductRow (red)
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
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.
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.
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
Identify the minimal (but complete) representation of UI state
• The search text the user has entered
• The value of the checkbox
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
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.
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.
React in MT-FE-COS
Isomorphic App
Browserify
• http://localhost:9080/react-in-mt-fe-cos/browserify/index.html
• reactify, cssify, browserify, yuify, watchify, livereloadify…
Composability
• http://localhost:9080/node_modules/mtfe_react-components-dialog/demo/index.html
• http://npm.sankuai.com/browse/keyword/mtfe_react-components
Isomorphic App
• http://wiki.sankuai.com/pages/viewpage.action?pageId=117773197
• Coming soon
• http://git.sankuai.com/users/liuyicheng/repos/thinking-in-react/browse
