React, Flux and more (p1)
-
Upload
tuanpa206 -
Category
Technology
-
view
131 -
download
1
Transcript of React, Flux and more (p1)
![Page 1: React, Flux and more (p1)](https://reader033.fdocuments.in/reader033/viewer/2022052514/58f30aac1a28ab6a2b8b4571/html5/thumbnails/1.jpg)
React, Flux and… more (p1)
![Page 2: React, Flux and more (p1)](https://reader033.fdocuments.in/reader033/viewer/2022052514/58f30aac1a28ab6a2b8b4571/html5/thumbnails/2.jpg)
Content Core Technologies React Flux Demo
![Page 3: React, Flux and more (p1)](https://reader033.fdocuments.in/reader033/viewer/2022052514/58f30aac1a28ab6a2b8b4571/html5/thumbnails/3.jpg)
Content Core Technologies React Flux Demo
![Page 4: React, Flux and more (p1)](https://reader033.fdocuments.in/reader033/viewer/2022052514/58f30aac1a28ab6a2b8b4571/html5/thumbnails/4.jpg)
Core Technologies
![Page 5: React, Flux and more (p1)](https://reader033.fdocuments.in/reader033/viewer/2022052514/58f30aac1a28ab6a2b8b4571/html5/thumbnails/5.jpg)
![Page 6: React, Flux and more (p1)](https://reader033.fdocuments.in/reader033/viewer/2022052514/58f30aac1a28ab6a2b8b4571/html5/thumbnails/6.jpg)
Node Server-side JS Uses the V8 Engine Includes npm package manager
![Page 7: React, Flux and more (p1)](https://reader033.fdocuments.in/reader033/viewer/2022052514/58f30aac1a28ab6a2b8b4571/html5/thumbnails/7.jpg)
Browserify
Use Node modules in the browser Bundle dependencies
![Page 8: React, Flux and more (p1)](https://reader033.fdocuments.in/reader033/viewer/2022052514/58f30aac1a28ab6a2b8b4571/html5/thumbnails/8.jpg)
React
Component Library Simple composition Utilizes virtual DOM Can render on client and server
![Page 9: React, Flux and more (p1)](https://reader033.fdocuments.in/reader033/viewer/2022052514/58f30aac1a28ab6a2b8b4571/html5/thumbnails/9.jpg)
React router Nested views map to nested routes Declarative Used at Facebook Inspired by Ember
![Page 10: React, Flux and more (p1)](https://reader033.fdocuments.in/reader033/viewer/2022052514/58f30aac1a28ab6a2b8b4571/html5/thumbnails/10.jpg)
Flux
Uni-directional data flows More a pattern than a library
![Page 11: React, Flux and more (p1)](https://reader033.fdocuments.in/reader033/viewer/2022052514/58f30aac1a28ab6a2b8b4571/html5/thumbnails/11.jpg)
![Page 12: React, Flux and more (p1)](https://reader033.fdocuments.in/reader033/viewer/2022052514/58f30aac1a28ab6a2b8b4571/html5/thumbnails/12.jpg)
Gulp
Task runner Rich plugin ecosystem Stream-based
![Page 13: React, Flux and more (p1)](https://reader033.fdocuments.in/reader033/viewer/2022052514/58f30aac1a28ab6a2b8b4571/html5/thumbnails/13.jpg)
Summary Node & npm : packages React: Components React-router: Routing Flux: Data flows Browserify: Bundler Gulp: Builds
![Page 14: React, Flux and more (p1)](https://reader033.fdocuments.in/reader033/viewer/2022052514/58f30aac1a28ab6a2b8b4571/html5/thumbnails/14.jpg)
React
![Page 15: React, Flux and more (p1)](https://reader033.fdocuments.in/reader033/viewer/2022052514/58f30aac1a28ab6a2b8b4571/html5/thumbnails/15.jpg)
What is React? React (sometimes styled React.js or ReactJS) is an open-source JavaScript library providing a view for data rendered as HTML.
![Page 16: React, Flux and more (p1)](https://reader033.fdocuments.in/reader033/viewer/2022052514/58f30aac1a28ab6a2b8b4571/html5/thumbnails/16.jpg)
What is React? React isn't an MVC framework React doesn't use templates Reactive updates are dead simple
![Page 17: React, Flux and more (p1)](https://reader033.fdocuments.in/reader033/viewer/2022052514/58f30aac1a28ab6a2b8b4571/html5/thumbnails/17.jpg)
What is React? Try to keep an open mind. Unidirectional flow. No two-way binding. Inline styles can be good. JavaScript and HTML belong in the same file
![Page 18: React, Flux and more (p1)](https://reader033.fdocuments.in/reader033/viewer/2022052514/58f30aac1a28ab6a2b8b4571/html5/thumbnails/18.jpg)
![Page 19: React, Flux and more (p1)](https://reader033.fdocuments.in/reader033/viewer/2022052514/58f30aac1a28ab6a2b8b4571/html5/thumbnails/19.jpg)
Why React?
“We built React to solve one problem: building large applications with data that changes over time.”
![Page 20: React, Flux and more (p1)](https://reader033.fdocuments.in/reader033/viewer/2022052514/58f30aac1a28ab6a2b8b4571/html5/thumbnails/20.jpg)
Why React? Fast Composable Pluggable Isomorphic Friendly Simple Battle Proven
![Page 21: React, Flux and more (p1)](https://reader033.fdocuments.in/reader033/viewer/2022052514/58f30aac1a28ab6a2b8b4571/html5/thumbnails/21.jpg)
Virtual Dom
Compare DOM’s current state to desired new state. Update the DOM in the most efficient way
![Page 22: React, Flux and more (p1)](https://reader033.fdocuments.in/reader033/viewer/2022052514/58f30aac1a28ab6a2b8b4571/html5/thumbnails/22.jpg)
![Page 23: React, Flux and more (p1)](https://reader033.fdocuments.in/reader033/viewer/2022052514/58f30aac1a28ab6a2b8b4571/html5/thumbnails/23.jpg)
![Page 24: React, Flux and more (p1)](https://reader033.fdocuments.in/reader033/viewer/2022052514/58f30aac1a28ab6a2b8b4571/html5/thumbnails/24.jpg)
Top-Level API
React.createClass React.createElement React.DOM React.Children
![Page 25: React, Flux and more (p1)](https://reader033.fdocuments.in/reader033/viewer/2022052514/58f30aac1a28ab6a2b8b4571/html5/thumbnails/25.jpg)
Component API
setState setProps replaceState forceUpdate isMounted replaceProps
![Page 26: React, Flux and more (p1)](https://reader033.fdocuments.in/reader033/viewer/2022052514/58f30aac1a28ab6a2b8b4571/html5/thumbnails/26.jpg)
Component API
render() : the render() method is required.
![Page 27: React, Flux and more (p1)](https://reader033.fdocuments.in/reader033/viewer/2022052514/58f30aac1a28ab6a2b8b4571/html5/thumbnails/27.jpg)
ReactDOM
ReactDOM.unmountComponentAtNode ReactDOM.render ReactDOM.findDOMNode
![Page 28: React, Flux and more (p1)](https://reader033.fdocuments.in/reader033/viewer/2022052514/58f30aac1a28ab6a2b8b4571/html5/thumbnails/28.jpg)
The life of a component
![Page 29: React, Flux and more (p1)](https://reader033.fdocuments.in/reader033/viewer/2022052514/58f30aac1a28ab6a2b8b4571/html5/thumbnails/29.jpg)
Props & State
Props : pass data to child components State : data in controller view
![Page 30: React, Flux and more (p1)](https://reader033.fdocuments.in/reader033/viewer/2022052514/58f30aac1a28ab6a2b8b4571/html5/thumbnails/30.jpg)
Initial State
getInitialState
![Page 31: React, Flux and more (p1)](https://reader033.fdocuments.in/reader033/viewer/2022052514/58f30aac1a28ab6a2b8b4571/html5/thumbnails/31.jpg)
Default prop values
getDefaultProps
![Page 32: React, Flux and more (p1)](https://reader033.fdocuments.in/reader033/viewer/2022052514/58f30aac1a28ab6a2b8b4571/html5/thumbnails/32.jpg)
JSX “HTML” in JavaScript Differences: className, htmlFor Compiles to JavaScript Optional
![Page 33: React, Flux and more (p1)](https://reader033.fdocuments.in/reader033/viewer/2022052514/58f30aac1a28ab6a2b8b4571/html5/thumbnails/33.jpg)
Lifecycle Methods
componentWillMount componentDidMount componentWillReceiveProps shouldComponentUpdate componentWillUpdate componentDidUpdate componentWillUnmount
![Page 34: React, Flux and more (p1)](https://reader033.fdocuments.in/reader033/viewer/2022052514/58f30aac1a28ab6a2b8b4571/html5/thumbnails/34.jpg)
componentWillMount
When Before initial render, both client and server. Why Good spot to set initial state.
![Page 35: React, Flux and more (p1)](https://reader033.fdocuments.in/reader033/viewer/2022052514/58f30aac1a28ab6a2b8b4571/html5/thumbnails/35.jpg)
componentDidMount
When After render. Why Access DOM, integrate with frameworks, set timers, AJAX requests.
![Page 36: React, Flux and more (p1)](https://reader033.fdocuments.in/reader033/viewer/2022052514/58f30aac1a28ab6a2b8b4571/html5/thumbnails/36.jpg)
componentWillReceiveProp
When When receiving new props. Not called on initial render. Why Set state before a render.
![Page 37: React, Flux and more (p1)](https://reader033.fdocuments.in/reader033/viewer/2022052514/58f30aac1a28ab6a2b8b4571/html5/thumbnails/37.jpg)
shouldComponentUpdate
When Before render when new props or state are being received. Not called on initial render. Why Performance. Return false to void unnecessary re-renders.
![Page 38: React, Flux and more (p1)](https://reader033.fdocuments.in/reader033/viewer/2022052514/58f30aac1a28ab6a2b8b4571/html5/thumbnails/38.jpg)
componentWillUpdate
When Immediately before rendering when new props or state are being received. Not called on initial render. Why Prepare for an update.
![Page 39: React, Flux and more (p1)](https://reader033.fdocuments.in/reader033/viewer/2022052514/58f30aac1a28ab6a2b8b4571/html5/thumbnails/39.jpg)
componentDidUpdate
When After component's updates are flushed to the DOM. Not called for the initial render. Why Work with the DOM after an update.
![Page 40: React, Flux and more (p1)](https://reader033.fdocuments.in/reader033/viewer/2022052514/58f30aac1a28ab6a2b8b4571/html5/thumbnails/40.jpg)
componentWillUnmount
When Immediately before component is removed from the DOM Why Cleanup.
![Page 41: React, Flux and more (p1)](https://reader033.fdocuments.in/reader033/viewer/2022052514/58f30aac1a28ab6a2b8b4571/html5/thumbnails/41.jpg)
propTypes - Validate props propTypes: { author: React.PropTypes.object.isRequired, onSave: React.PropTypes.func.isRequired, validate: React.PropTypes.func.isRequired, }
- Development vs. Production Mode - Minified version is for production.
![Page 42: React, Flux and more (p1)](https://reader033.fdocuments.in/reader033/viewer/2022052514/58f30aac1a28ab6a2b8b4571/html5/thumbnails/42.jpg)
Mixins For cross-cutting concerns Share code between multiple components
![Page 43: React, Flux and more (p1)](https://reader033.fdocuments.in/reader033/viewer/2022052514/58f30aac1a28ab6a2b8b4571/html5/thumbnails/43.jpg)
Statics
![Page 44: React, Flux and more (p1)](https://reader033.fdocuments.in/reader033/viewer/2022052514/58f30aac1a28ab6a2b8b4571/html5/thumbnails/44.jpg)
THANK YOU (to be continued …)