React + Flux = Joy
Download as PPTX, PDF•2 likes•1,260 views
This document introduces React and Flux, describing them as a view rendering engine and design pattern respectively that can be used together to build large web applications that maintain conceptual simplicity. It provides overviews of React's virtual DOM rendering and component-based architecture. It also summarizes Flux's unidirectional data flow pattern and role of stores, dispatcher and actions. Key aspects of using React like props, state, lifecycles and JSX syntax are outlined at a high-level.
![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>);
}
});](https://image.slidesharecdn.com/reactfluxjoy-150920121247-lva1-app6891/85/React-Flux-Joy-26-320.jpg)
React + Flux = Joy
- 1. A New Way to Build Awesome Web Applications John Need Senior UI Developer Twitter : @johnneed Blog : johnneed.com Email : [email protected] + =
- 2. 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
- 3. Conceptual Simplicity A model that fits in your head And doesn't change even if your app gets huge
- 4. 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.
- 5. Who the heck uses React?
- 6. 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
- 7. The Problem with Large MVC Web Applications Model Model
- 9. Detailed Data Flow Store Dispatcher React Views Action Creators WEB API WEB Utils Actions User Interactions Callbacks Change Events
- 10. Demo Time
- 11. Yeah, I know These slides are horrible. Here’s a cat picture to make it up to you.
- 12. Web API Store Dispatcher React Views Action Creators WEB API WEB Utils Actions User Interactions Callbacks Change Events Your WEB API is your server- side architecture. It can be SOAP, REST, WebSockets, whatever.
- 13. WEB Utilities Store Dispatcher React Views Action Creators WEB 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.
- 14. Action Creators Store Dispatcher React Views Action Creators WEB 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.
- 15. The Dispatcher Store Dispatcher React Views Action Creators WEB API WEB Utils Actions User Interactions Callbacks Change Events The dispatcher is used to broadcast payloads to registered callbacks
- 16. Stores Store Dispatcher React Views Action Creators WEB 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.
- 17. Views Store Dispatcher React Views Action Creators WEB API WEB Utils Actions User Interactions Callbacks Change Events Whew! Now we’re ready to talk about React.
- 19. (re)Rendering with React – When? Angular – Dirty Checking Ember – Observables (get, set) React– Observables (setState)
- 20. (re)Rendering with React – Virtual DOM var 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> DOM Diff Patch <div id="example"> <h1 class="greet"> Hello World </h1> </div>
- 21. A Smattering of React Create an element var elem = React.createElement("h1", null, "Hello World"); Create an element with a Factory var elem = React.DOM.h1(null, "Hello World"); Render an element React.render(elem, null, document.body);
- 22. 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
- 23. 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.
- 24. 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
- 25. 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.
- 26. 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>); } });
- 27. State • Is contained and controlled by component. • Is mutable.
- 28. 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} /> ); } });
- 29. Life Cycle First Render getDefaultProps getInitialState componentWillMount render componentDidMount Props Change componentWillReceiveProps shouldComponentUpdate componentWillUpdate render componentDidUpdate State Change shouldComponentUpdate componentWIllUpdate render componentDidUpdate Component Unmount componentWillUnmount
- 30. 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); },
- 31. A Word about Routing Do it! npm install react-router
- 32. Thanks! Twitter : @johnneed Blog : johnneed.com Email : [email protected] Download the Demo at https://github.com/johnneed/vtcodecamp20 15 Get Slides at Slide Share.