EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader...
Transcript of EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader...
![Page 1: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/1.jpg)
SWITCHING TO REACT.JS FROM ANGULARJS DEVELOPER
EUGENE ZHARKOV
![Page 2: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/2.jpg)
https://twitter.com/soprano/status/610867662797807617
![Page 3: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/3.jpg)
COMPONENT CREATION
ES5 ES6+
var Photo = React.createClass({
handleDoubleTap: function(e) { … },
render: function() { … },
});
class Photo extends React.Component {
handleDoubleTap(e) { … }
render() { … }
}
![Page 4: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/4.jpg)
COMPONENT INITIALIZATION
ES5 ES6+
var EmbedModal = React.createClass({
componentWillMount: function() { … },
});
class EmbedModal extends React.Component {
constructor(props) {
super(props);
// default state props
}
}
![Page 5: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/5.jpg)
EVENT CONTEXT
ES5 ES6+
var PostInfo = React.createClass({
handleOptionsButtonClick: function(e) {
this.setState({showOptionsModal: true});
},
});
class PostInfo extends React.Component {
constructor(props) {
super(props);
this.handleOptionsButtonClick = this.handleOptionsButtonClick.bind(this);
}
handleOptionsButtonClick(e) {
this.setState({showOptionsModal: true});
}
}
![Page 6: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/6.jpg)
ES6+ ARROW FUNCTION
ES6+
class PostInfo extends React.Component {
handleOptionsButtonClick = (e) => {
this.setState({showOptionsModal: true});
}
}
![Page 7: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/7.jpg)
ES6+ DESTRUCTURING & JSX SPREAD ATTRIBUTES
ES6+
class AutoloadingPostsGrid extends React.Component {
render() {
var {
className,
...others, // contains all properties of this.props except for className
} = this.props;
return (
<div className={className}>
<PostsGrid {...others} />
<button onClick={this.handleLoadMoreClick}>Load more</button>
</div>
);
}
}
![Page 8: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/8.jpg)
BUILD TOOLS
▸ babel
▸ browserify
▸ babelify (babel transpiler)
▸ watchify (files watch)
▸ factor-bundle (bundle splitting)
▸ deAMDify (AMD support)
▸ webpack…
![Page 9: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/9.jpg)
BROWSERIFY CLI EXAMPLE
watchify -t babelify app/js/index.js -o public/js/bundle.js
![Page 10: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/10.jpg)
BROWSERIFY JS EXAMPLE
browserify({ debug: true })
.transform(babelify);
————————-————————-————————-————————-————————-
var fs = require("fs");
var browserify = require("browserify");
var babelify = require("babelify");
browserify({ debug: true })
.transform(babelify)
.require("./script.js", { entry: true })
.bundle()
.on("error", function (err) { console.log("Error: " + err.message); })
.pipe(fs.createWriteStream("bundle.js"));
![Page 11: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/11.jpg)
WEB PACK JS EXAMPLE
module: {
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"}
]
}
![Page 12: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/12.jpg)
BYE BYE DIRECTIVES & CONTROLLERS
TRUE LIE
![Page 13: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/13.jpg)
ANGULAR DIRECTIVE BUTTHURTmyModule.directive('directiveName', function factory(injectables) { var directiveDefinitionObject = { priority: 0, template: '<div></div>', // or // function(tElement, tAttrs) { ... }, // or templateUrl: 'directive.html', // or // function(tElement, tAttrs) { ... }, transclude: false, restrict: 'A', templateNamespace: 'html', scope: false, controller: function($scope, $element, $attrs, $transclude, otherInjectables) { ... }, controllerAs: 'stringIdentifier', bindToController: false, require: 'siblingDirectiveName', // or // ['^parentDirectiveName', '?optionalDirectiveName', '?^optionalParent'], compile: function compile(tElement, tAttrs, transclude) { return { pre: function preLink(scope, iElement, iAttrs, controller) { ... }, post: function postLink(scope, iElement, iAttrs, controller) { ... } } // or // return function postLink( ... ) { ... } }, // or // link: { // pre: function preLink(scope, iElement, iAttrs, controller) { ... }, // post: function postLink(scope, iElement, iAttrs, controller) { ... } // } // or // link: function postLink( ... ) { ... } }; return directiveDefinitionObject; });
![Page 14: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/14.jpg)
ANGULAR DIRECTIVE BUTTHURT$compile
$scope $element $attrs $transclude $watch
![Page 15: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/15.jpg)
REACT.JS SOBRIETY
export default class Feature extends React.Component {
componentDidMount () { ... }
componentWillReceiveProps () { ... }
shouldComponentUpdate () { ... }
componentWillUpdate () { ... }
componentDidUpdate () { ... }
componentWillUnmount () { ... }
render() { ... }
}
![Page 16: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/16.jpg)
JSX
var Nav, Profile;
// Input (JSX):
var app = <Nav color="blue"><Profile>click</Profile></Nav>;
// Output (JS):
var app = React.createElement( Nav, {color:"blue"}, React.createElement(Profile, null, "click")
);
![Page 17: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/17.jpg)
REACT.JS COMPONENT EXAMPLE
export default class CaseStudyHeader extends React.Component {
render() {
let headerStyle = {color: this.props.globalStyles.color};
let containerStyle = {backgroundColor: this.props.bgColor};
return <div className="case-study-header" style={containerStyle}>
<h5 style={headerStyle}>Case Study</h5>
<h2>{this.props.caption}</h2>
<p dangerouslySetInnerHTML={{__html: this.props.bodyText}}></p>
<img src={this.props.imageSrc} /> </div> } }
![Page 18: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/18.jpg)
REACT.JS PARENT COMPONENT EXAMPLE
export default class HomePage extends React.Component {
render() { return <article> { Data.page.map(function (item, i) {
switch(item.type) { case 'caseStudyHeader':
return <CaseStudyHeader {...item} globalStyles={Data.globalStyles} key={i} />
case 'centeredImageBlock': return <CenteredImageBlock {...item} globalStyles={Data.globalStyles} key={i} />
case 'notaBene': return <NotaBeneBlock {...item} globalStyles={Data.globalStyles} key={i} />
case 'imageSeparator': return <ImageSeparator {...item} globalStyles={Data.globalStyles} key={i} />
case 'article': return <Article {...item} globalStyles={Data.globalStyles} key={i} /> } }, this)} </article> } }
![Page 19: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/19.jpg)
REACT.JS ‘CUSTOM CONTROL’ USAGE
<Radiogroup options={RADIOGROUP_YES_NO} onChange={this.onSomeChange.bind(this)} />
![Page 20: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/20.jpg)
REACT.JS ‘CUSTOM CONTROL’
export default class Radiogroup extends React.Component {
onChange(e) { this.props.onChange(e.currentTarget.value); }
render () {
let source = this.props.options; let name = shortid.generate();
return <div> {source.map(function (item, i) {
let id = name + i;
return <span key={i}><input type="radio" name={name} id={id} value={item.value} onChange={this.onChange.bind(this)} />
<label htmlFor={id}><span className="control"></span> {item.title}</label></span>
}, this)}
</div> } }
![Page 21: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/21.jpg)
INLINE STYLES
var divStyle = {
color: 'white',
backgroundImage: 'url(' + imgUrl + ')',
WebkitTransition: 'all', // note the capital 'W' here
msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};
ReactDOM.render(<div style={divStyle}>Hello World!</div>, mountNode);
![Page 22: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/22.jpg)
MATERIAL UI
THEME MANAGER
checkbox: { boxColor: rawTheme.palette.textColor, checkedColor: rawTheme.palette.primary1Color, requiredColor: rawTheme.palette.primary1Color, disabledColor: rawTheme.palette.disabledColor, labelColor: rawTheme.palette.textColor, labelDisabledColor: rawTheme.palette.disabledColor, },
datePicker: { color: rawTheme.palette.primary1Color, textColor: rawTheme.palette.alternateTextColor, calendarTextColor: rawTheme.palette.textColor, selectColor: rawTheme.palette.primary2Color, selectTextColor: rawTheme.palette.alternateTextColor, }
![Page 23: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/23.jpg)
MATERIAL UI
COLORS
palette: {
primary1Color: Colors.cyan500,
primary2Color: Colors.cyan700,
primary3Color: Colors.lightBlack,
accent1Color: Colors.pinkA200,
accent2Color: Colors.grey100,
accent3Color: Colors.grey500,
textColor: Colors.darkBlack,
alternateTextColor: Colors.white,
canvasColor: Colors.white,
borderColor: Colors.grey300,
disabledColor: ColorManipulator.fade(Colors.darkBlack, 0.3),
}
![Page 24: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/24.jpg)
MATERIAL UI
ICON-BUTTON
getStyles() {
const {
iconSize,
textColor, disabledColor,
} = this.constructor.getRelevantContextKeys(this.state.muiTheme);
let styles = {
root: {
position: 'relative', boxSizing: 'border-box',
transition: Transitions.easeOut(),
padding: iconSize / 2,
width: iconSize * 2, height: iconSize * 2,
fontSize: 0,
} }
![Page 25: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/25.jpg)
TEXT
POSTCSS
▸ PostCSS itself is very small. It includes only a CSS parser, a CSS node tree API, a source map generator, and a node tree stringifier.
▸ All of the style transformations are performed by plugins, which are plain JS functions. Each plugin receives a CSS node tree, transforms it & then returns the modified tree.
![Page 26: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/26.jpg)
POSTCSS CLI
postcss -o public/css/style.css -u precss -s postcss-scss app/css/index.scss -w
![Page 27: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/27.jpg)
ANGULARJS ROUTING
myApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/state1"); $stateProvider .state('state1', { url: "/state1", templateUrl: "partials/state1.html" })
.state('state1.list', { url: "/list", templateUrl: "partials/state1.list.html", controller: function($scope) { $scope.items = ["A", "List", "Of", "Items"]; } })
.state('route2', { url: "/route2", views: { "viewA": { template: "route2.viewA" },
"viewB": { template: "route2.viewB" } } })
![Page 28: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/28.jpg)
REACT.JS ROUTING
<Router>
<Route path="/" component={App}>
<Route path="about" component={About}/>
<Route path="users" component={Users}>
<Route path="/user/:userId" component={User}/>
</Route>
<Route path="*" component={NoMatch}/>
</Route>
</Router>
![Page 29: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/29.jpg)
REACT.JS ROUTING HISTORY
const createBrowserHistory = require('history/lib/createBrowserHistory');
ReactDOM.render ((
<Router history={createBrowserHistory()}>
...
</Router>
), document.body);
![Page 30: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/30.jpg)
WORKING WITH DATA
FLUX
![Page 31: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/31.jpg)
WORKING WITH DATA
FLUX
▸ Single Dispatcher
▸ Central hub that manages all data flow. A Simple mechanism for distributing the actions to the stores.
▸ Stores
▸ 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.
![Page 32: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/32.jpg)
WORKING WITH DATA
FLUX
▸ Actions
▸ The dispatcher exposes a method that allows us to trigger a dispatch to the stores, and to include a payload of data, which we call an action.
▸ Views
▸ When it receives the event from the store, it first requests the new data it needs via the stores' public getter methods. It then calls its own setState() or forceUpdate() methods, causing its render() method and the render() method of all its descendants to run.
![Page 33: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/33.jpg)
WORKING WITH DATA
FLUX
▸ myapp
▸ …
▸ js
▸ actions
▸ components
▸ constants
▸ dispatcher
▸ stores
▸ index.html
![Page 34: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/34.jpg)
WORKING WITH DATA
REDUX
![Page 35: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/35.jpg)
WORKING WITH DATA
REDUX, MORE SCARY DIAGRAM
![Page 36: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/36.jpg)
WORKING WITH DATA
REDUX PRINCIPLES
▸ Single store = Single application state
▸ Read-only state
▸ Mutations are written as pure functions
![Page 37: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/37.jpg)
WORKING WITH DATA
REDUX
▸ myapp
▸ js
▸ actions
▸ components
▸ constants
▸ reducers
▸ routes
▸ stores
▸ index.html
![Page 38: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/38.jpg)
REDUX
REDUCER
function posts(state = { isFetching: false, didInvalidate: false, items: [] }, action) {
switch (action.type) {
case INVALIDATE_REDDIT: return Object.assign({}, state, { didInvalidate: true });
case REQUEST_POSTS: return Object.assign({}, state, { isFetching: true, didInvalidate: false }); case RECEIVE_POSTS: return Object.assign({}, state, { isFetching: false, didInvalidate: false, items: action.posts, lastUpdated: action.receivedAt });
default: return state; } }
![Page 39: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/39.jpg)
REDUX
ACTIONS
function requestPosts(reddit) { return { type: REQUEST_POSTS, reddit }; }
function receivePosts(reddit, json) {
return { type: RECEIVE_POSTS, reddit, posts: json.data.children.map(child => child.data), receivedAt: Date.now() }; }
export function fetchPosts(reddit) {
return dispatch => { dispatch(requestPosts(reddit)); return fetch(`http://www.reddit.com/r/${reddit}.json`) .then(req => req.json()) .then(json => dispatch(receivePosts(reddit, json))); }; }
![Page 40: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/40.jpg)
REDUX
STORE
import { createStore, applyMiddleware } from 'redux'; import thunkMiddleware from 'redux-thunk'; import createLogger from 'redux-logger'; import rootReducer from './reducers';
const loggerMiddleware = createLogger(); const createStoreWithMiddleware = applyMiddleware(
thunkMiddleware, loggerMiddleware
)(createStore);
export default function configureStore(initialState) {
return createStoreWithMiddleware(rootReducer, initialState);
}
![Page 41: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/41.jpg)
REDUX
ROOT OBJECT
import React, { Component } from 'react'; import { Provider } from 'react-redux'; import configureStore from '../configureStore'; import AsyncApp from './AsyncApp';
const store = configureStore();
export default class Root extends Component { render() { return (
<Provider store={store}>
<AsyncApp />
</Provider> ); } }
![Page 42: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/42.jpg)
REDUX
SMART COMPONENT
import React, { Component, PropTypes } from 'react'; import { connect } from 'react-redux'; import { selectReddit, fetchPosts, invalidateReddit } from '../actions';
class AsyncApp extends Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); this.handleRefreshClick = this.handleRefreshClick.bind(this); }
componentDidMount() { const { dispatch, selectedReddit } = this.props; dispatch(fetchPosts()); }
handleChange(nextReddit) { this.props.dispatch(selectReddit(nextReddit)); }
render () { const { selectedReddit, posts, isFetching, lastUpdated } = this.props; return (…………) } }
![Page 43: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/43.jpg)
REDUX
SMART COMPONENT
function mapStateToProps(state) { const { selectedReddit, postsByReddit } = state; const { isFetching, lastUpdated, items: posts } = postsByReddit[selectedReddit] || { isFetching: true, items: [] };
return { selectedReddit, posts, isFetching, lastUpdated }; }
export default connect(mapStateToProps)(AsyncApp);
![Page 44: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/44.jpg)
REDUX? I KNOW NOTHING ABOUT REDUX.
DUMB COMPONENT
TEXT
![Page 45: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/45.jpg)
TEXT
REDUX THUNK
▸ Redux Thunk middleware allows you to write action creators that return a function instead of an action.
![Page 46: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/46.jpg)
TEXT
LINKS
▸ davezuko / react-redux-starter-kit
▸ emmenko / redux-react-router-async-example
▸ official documentation
![Page 47: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/47.jpg)
TEXT
LINKS
▸ davezuko / react-redux-starter-kit
▸ emmenko / redux-react-router-async-example
▸ official documentation
▸ slides
![Page 48: EUGENE ZHARKOV SWITCHING TO REACTREACT.JS COMPONENT EXAMPLE export default class CaseStudyHeader extends React.Component { render() { let headerStyle = {color: this.props.globalStyles.color};](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec83084b760b4675617bb99/html5/thumbnails/48.jpg)
QUESTIONS?