react and redux
TRANSCRIPT
REACT AND REDUX
MAKE THE WEB FUN AGAIN
/ Andrew Lombardi @kinabalu
Mystic Coders, LLC
ABOUT ME
ABOUT ME
16 Years in Business
8 Years @ Java2Days
Published Author
So�ware Consultants
International Speakers
Invented the Internet
Training
To our success!
WEBSOCKET BOOK
http://bit.ly/lombardi_websocket_book
KEY POINTS
Functional programming is awesome (avoid change in state,immutable)
Components are beautiful
JavaScript sucks, but React and Redux with ES6 make itbearable
How it Feels to Learn JavaScript in 2016
APACHE WICKETTM
Circa 2005
Component-based
Just Java and Just HTML
REACT IS...Circa 2013
Component-based
Just JavaScript and JSX (embedded XML)
Only the 'V' in MVC
No ugly templates
REACT LIFECYCLE
MOUNTING
Called when component created or inserted into DOM
UPDATINGChanges to props or state or component re-render
VIRTUAL DOM
REACT'S SOLUTION TO FAST DOM UPDATES
Pure JavaScript
In-memory representation of DOM
render() runs whenever something changes
Diffs with the old one
Batch executes all queued updates
CONVENTIONS FOR THIS TALKCode will be using ES6, transpiled using Babel
Uses npm scripts rather than Grunt or Gulp
yarn instead of npm because it's superior
by
REACT STARTER KITReact Slingshot Cory House
Includes all necessary tooling to be successful with React
and Redux
HANDS-ON DEMO
FUNCTIONAL STATELESS
COMPONENTS
Also called presentational/dumb componentsimport React from ‘react’;
const HelloWorld = ({name}) => (
<div>Hello, {name}!}</div>
);
export default HelloWorld;
CONTAINER COMPONENTS
The stateful kindclass HelloWorldContainer extends React.Component {
constructor() {
super();
this.setState({
name: ''
});
}
componentDidMount() {
// do stuff to fill from external sources/APIs
}
render() {
return <HelloWorld name={this.state.name} />;
}
}
setState()
Performs shallow merge of next state into current state.Triggers eventual UI update.
propTypes
a property on the component class, defines what types theprops should be.
In dev mode, warning is shown but skipped in prod for efficiency
props
properties defined by the called of the component
state
user-defined data defined by the component as a plain-olejavascript object
modified using setState() so it is queued properly with other updates
HANDS-ON DEMO
RESOURCES FOR REACT
React.js Docs
Thinking in React
REDUX
REDUXA better Flux implementation
A predictable state container for JavaScript apps
No dispatcher, Single store, Immutable
FLUX ARCHITECTURE
ACTION CREATORS
function savePaste(code) { return { type: SAVE_PASTE, code } }
REDUCERSconst INITIAL_STATE = { pastes: { paste: null, error: null, loading: false } };
export default function pasteReducer(state = INITIAL_STATE, action) { switch (action.type) { case SAVE_PASTE: return { ...state, pastes: { paste: null, error: default: return state } }
MAPPING STATE AND DISPATCH
import { connect } from 'react-redux';
const mapDispatchToProps = (dispatch) => { // maps dispatch actions for executing action creators to props};
function mapStateToProps(state) { // contains state from store and allows mapping to props }
export default connect( mapStateToProps, mapDispatchToProps) (MyLittleComponent);
ACTION DISPATCHconst mapDispatchToProps = (dispatch) => { return { loadPasteById: (pasteId) => { dispatch(pasteActions.loadPasteById(pasteId)); } }; };
CALLING ACTION VIA PROPS
componentWillMount() { this.props.loadPasteById(this.props.pasteId); }
HANDS-ON DEMO
RESOURCES FOR REDUX
Main Redux Docs
Redux Tutorial
Full Stack Redux Tutorial
3 THINGS ABOUT REACTPure components
One-way data binding
Fast
3 THINGS ABOUT REDUXA single Store
No dispatcher
Immutable
FIN
Q & A
ANDREW LOMBARDI / @KINABALU
Mystic Coders, LLC
bit.ly/lombardi_websocket_book
https://github.com/kinabalu/react_and_redux