Codemobiles React - iOS, Android, Angular, React, Vue.JS ...
React + Flux = Joy
Transcript of React + Flux = Joy
![Page 1: React + Flux = Joy](https://reader035.fdocuments.in/reader035/viewer/2022062218/58ee6f421a28ab42678b4589/html5/thumbnails/1.jpg)
A New Way to Build Awesome Web Applications
John NeedSenior UI Developer
Twitter : @johnneedBlog : johnneed.comEmail : [email protected]
+ =
![Page 2: React + Flux = Joy](https://reader035.fdocuments.in/reader035/viewer/2022062218/58ee6f421a28ab42678b4589/html5/thumbnails/2.jpg)
React + Flux = Joy
A View Rendering Engine A Design Pattern A method for building ginormous web applications that retain "Conceptual Simplicity"even as they grow
![Page 3: React + Flux = Joy](https://reader035.fdocuments.in/reader035/viewer/2022062218/58ee6f421a28ab42678b4589/html5/thumbnails/3.jpg)
Conceptual Simplicity
A model that fits in your head
And doesn't change even if your app gets huge
![Page 4: React + Flux = Joy](https://reader035.fdocuments.in/reader035/viewer/2022062218/58ee6f421a28ab42678b4589/html5/thumbnails/4.jpg)
A Bit About React
• React only renders views. It’s not a SPA framework.• React was started by Jordan Walke, a developer at
Facebook in 2011• Was conceived as a JavaScript port of XHP, Facebook’s
version of PHP.• The first version of React took 17 minutes to render
10,000 DOM elements on 1 Ghz CPU.• React gained favor at Facebook when it was used to fix
the perpetually broken chat app.
![Page 5: React + Flux = Joy](https://reader035.fdocuments.in/reader035/viewer/2022062218/58ee6f421a28ab42678b4589/html5/thumbnails/5.jpg)
Who the heck uses React?
![Page 6: React + Flux = Joy](https://reader035.fdocuments.in/reader035/viewer/2022062218/58ee6f421a28ab42678b4589/html5/thumbnails/6.jpg)
Facts on Flux• Flux is not a framework. You can’t download it.• Flux was designed by Facebook to work with React.• Flux’s uni-directional dataflow • You can download lot’s o’ libraries to help you implement Flux such as :
• Flummox• Alt• Fluxxor• Flux This• MartyJS• McFly• Fluxible• Delorean• Lux• Reflux• OmniscientJS• Fluxy• Material Flux• Flux
![Page 7: React + Flux = Joy](https://reader035.fdocuments.in/reader035/viewer/2022062218/58ee6f421a28ab42678b4589/html5/thumbnails/7.jpg)
The Problem with Large MVC Web Applications
Model View
View
View
View
Model
![Page 8: React + Flux = Joy](https://reader035.fdocuments.in/reader035/viewer/2022062218/58ee6f421a28ab42678b4589/html5/thumbnails/8.jpg)
Flux Uni-directional Flow
StoreView Dispatcher
Store
Store
![Page 9: React + Flux = Joy](https://reader035.fdocuments.in/reader035/viewer/2022062218/58ee6f421a28ab42678b4589/html5/thumbnails/9.jpg)
Detailed Data Flow
Store
Dispatcher
ReactViews
Action CreatorsWEB API WEB Utils
Actions
User Interactions
Callbacks
Change Events
![Page 10: React + Flux = Joy](https://reader035.fdocuments.in/reader035/viewer/2022062218/58ee6f421a28ab42678b4589/html5/thumbnails/10.jpg)
Demo Time
![Page 11: React + Flux = Joy](https://reader035.fdocuments.in/reader035/viewer/2022062218/58ee6f421a28ab42678b4589/html5/thumbnails/11.jpg)
Yeah, I know These slides are horrible. Here’s a cat picture to make it up to you.
![Page 12: React + Flux = Joy](https://reader035.fdocuments.in/reader035/viewer/2022062218/58ee6f421a28ab42678b4589/html5/thumbnails/12.jpg)
Web API
Store
Dispatcher
ReactViews
Action CreatorsWEB API WEB Utils
Actions
User Interactions
Callbacks
Change Events
Your WEB API is your server-side architecture. It can be SOAP, REST, WebSockets, whatever.
![Page 13: React + Flux = Joy](https://reader035.fdocuments.in/reader035/viewer/2022062218/58ee6f421a28ab42678b4589/html5/thumbnails/13.jpg)
WEB Utilities
Store
Dispatcher
ReactViews
Action CreatorsWEB API WEB Utils
Actions
User Interactions
Callbacks
Change Events
A client-side data-layer to serving as an abstraction between your WEB API and Your Action Creators.
![Page 14: React + Flux = Joy](https://reader035.fdocuments.in/reader035/viewer/2022062218/58ee6f421a28ab42678b4589/html5/thumbnails/14.jpg)
Action Creators
Store
Dispatcher
ReactViews
Action CreatorsWEB API WEB Utils
Actions
User Interactions
Callbacks
Change Events
When new data enters the system, whether through a person interacting with the application or through a web api call, that data is packaged into an action — an object literal containing the new fields of data and a specific action type. We often create a library of helper methods called action creators that not only create the action object, but also pass the action to the dispatcher.
![Page 15: React + Flux = Joy](https://reader035.fdocuments.in/reader035/viewer/2022062218/58ee6f421a28ab42678b4589/html5/thumbnails/15.jpg)
The Dispatcher
Store
Dispatcher
ReactViews
Action CreatorsWEB API WEB Utils
Actions
User Interactions
Callbacks
Change Events
The dispatcher is used to broadcast payloads to registered callbacks
![Page 16: React + Flux = Joy](https://reader035.fdocuments.in/reader035/viewer/2022062218/58ee6f421a28ab42678b4589/html5/thumbnails/16.jpg)
Stores
Store
Dispatcher
ReactViews
Action CreatorsWEB API WEB Utils
Actions
User Interactions
Callbacks
Change Events
Stores contain the application state and logic. Their role is somewhat similar to a model in a traditional MVC, but they manage the state of many objects — they do not represent a single record of data like ORM models do. Nor are they the same as Backbone's collections. More than simply managing a collection of ORM-style objects, stores manage the application state for a particular domain within the application.
![Page 17: React + Flux = Joy](https://reader035.fdocuments.in/reader035/viewer/2022062218/58ee6f421a28ab42678b4589/html5/thumbnails/17.jpg)
Views
Store
Dispatcher
ReactViews
Action CreatorsWEB API WEB Utils
Actions
User Interactions
Callbacks
Change Events
Whew! Now we’re ready to talk about React.
![Page 18: React + Flux = Joy](https://reader035.fdocuments.in/reader035/viewer/2022062218/58ee6f421a28ab42678b4589/html5/thumbnails/18.jpg)
Here’s another adorable cat picture to help you make it through this presentation
![Page 19: React + Flux = Joy](https://reader035.fdocuments.in/reader035/viewer/2022062218/58ee6f421a28ab42678b4589/html5/thumbnails/19.jpg)
(re)Rendering with React – When?
Angular – Dirty Checking
Ember – Observables (get, set)
React– Observables (setState)
![Page 20: React + Flux = Joy](https://reader035.fdocuments.in/reader035/viewer/2022062218/58ee6f421a28ab42678b4589/html5/thumbnails/20.jpg)
(re)Rendering with React – Virtual DOMvar hi = React.createElement( "h1", {className="greet", “Hello World” );
React.render( hi, document.getElementById("example"));
Creating a Virtual DOM Element
Rendering a Virtual DOM element
<div id="example"></div>
DOMDiff
Patch
<div id="example"> <h1 class="greet">
Hello World </h1></div>
![Page 21: React + Flux = Joy](https://reader035.fdocuments.in/reader035/viewer/2022062218/58ee6f421a28ab42678b4589/html5/thumbnails/21.jpg)
A Smattering of ReactCreate an elementvar elem = React.createElement("h1", null, "Hello World");
Create an element with a Factoryvar elem = React.DOM.h1(null, "Hello World");
Render an elementReact.render(elem, null, document.body);
![Page 22: React + Flux = Joy](https://reader035.fdocuments.in/reader035/viewer/2022062218/58ee6f421a28ab42678b4589/html5/thumbnails/22.jpg)
React Components• Represent design elements of your app• Are re-usable• Are declarative• Have two main attributes• Props – immutable (mostly)• State –mutable and self-contained
• Can contain other components• Are oblivious of their parents
![Page 23: React + Flux = Joy](https://reader035.fdocuments.in/reader035/viewer/2022062218/58ee6f421a28ab42678b4589/html5/thumbnails/23.jpg)
JSX – An intuitive way to create components• Allows you to use XML inside JavaScript.• Makes your views a cinch to read.• Is not a templating language.• Create loops like you do in JavaScript (for, for in, map, forEach, while, etc.)• Use conditionals like you do in JavaScript (If/else, ternaries)• Use ES5 or ES6.
• Compiles to JavaScript using JSX Compiler, or Babel.
![Page 24: React + Flux = Joy](https://reader035.fdocuments.in/reader035/viewer/2022062218/58ee6f421a28ab42678b4589/html5/thumbnails/24.jpg)
var HelloWorld = React.createClass({ render: function() { return <h1>Bonjour World</h1> }});
var HelloWorld = React.createClass({displayName: "HelloWorld", render: function() { return React.createElement("h1", null, "Bonjour World"); }});
A Simple JSX Transform
![Page 25: React + Flux = Joy](https://reader035.fdocuments.in/reader035/viewer/2022062218/58ee6f421a28ab42678b4589/html5/thumbnails/25.jpg)
Props• Are how you pass data from parent components to child components• Are immutable (or at least they should be)• Ensure an uni-directional data flow• Are how you control an element's attributes like class, id, style, etc.• Cause React to re-render views when they do change.
![Page 26: React + Flux = Joy](https://reader035.fdocuments.in/reader035/viewer/2022062218/58ee6f421a28ab42678b4589/html5/thumbnails/26.jpg)
Props - Example
const Child = React.createClass({Render : function(){
return (<li>{this.props.listItem}</li>);}
});
const Parent = React.createClass({Render : function(){ var kids = ["a","b","c"].map( (x,i) => {
return (<Child listItem={x} key={i}/>);});return (<ul>{kids}</ul>);
}});
![Page 27: React + Flux = Joy](https://reader035.fdocuments.in/reader035/viewer/2022062218/58ee6f421a28ab42678b4589/html5/thumbnails/27.jpg)
State• Is contained and controlled by component.• Is mutable.
![Page 28: React + Flux = Joy](https://reader035.fdocuments.in/reader035/viewer/2022062218/58ee6f421a28ab42678b4589/html5/thumbnails/28.jpg)
State - Example const Child = React.createClass({ getInitialState : function(){return {
myText : 'type something'} }, _changeText : function(event){ this.setState({myText : event.target.value}); },
Render : function(){return (
<input value={mytext} onChange={this._changeText} /> );}
});
![Page 29: React + Flux = Joy](https://reader035.fdocuments.in/reader035/viewer/2022062218/58ee6f421a28ab42678b4589/html5/thumbnails/29.jpg)
Life Cycle First Render
getDefaultPropsgetInitialState
componentWillMountrender
componentDidMount
Props Change
componentWillReceivePropsshouldComponentUpdate
componentWillUpdaterender
componentDidUpdate
State Change
shouldComponentUpdatecomponentWIllUpdate
rendercomponentDidUpdate
Component Unmount
componentWillUnmount
![Page 30: React + Flux = Joy](https://reader035.fdocuments.in/reader035/viewer/2022062218/58ee6f421a28ab42678b4589/html5/thumbnails/30.jpg)
View Controllers• These are the highest level views.• Check for changes to the stores here• Pass all data down to children.
componentDidMount: function () {MyDosStore.addChangeListener(this._onMyDosChange);
},
componentWillUnmount: function () { MinionsStore.removeChangeListener(this._onMinionChange);},
![Page 31: React + Flux = Joy](https://reader035.fdocuments.in/reader035/viewer/2022062218/58ee6f421a28ab42678b4589/html5/thumbnails/31.jpg)
A Word about Routing
Do it!
npm install react-router
![Page 32: React + Flux = Joy](https://reader035.fdocuments.in/reader035/viewer/2022062218/58ee6f421a28ab42678b4589/html5/thumbnails/32.jpg)
Thanks!Twitter : @johnneedBlog : johnneed.comEmail : [email protected] the Demo at https://github.com/johnneed/vtcodecamp2015Get Slides at Slide Share.