React and redux
-
Upload
mystic-coders-llc -
Category
Software
-
view
173 -
download
0
Transcript of React and redux
![Page 1: React and redux](https://reader030.fdocuments.in/reader030/viewer/2022021419/58746de61a28abab198b8c81/html5/thumbnails/1.jpg)
REACT AND REDUX
MAKE THE WEB FUN AGAIN
/ Andrew Lombardi @kinabalu
Mystic Coders, LLC
![Page 2: React and redux](https://reader030.fdocuments.in/reader030/viewer/2022021419/58746de61a28abab198b8c81/html5/thumbnails/2.jpg)
ABOUT ME
![Page 3: React and redux](https://reader030.fdocuments.in/reader030/viewer/2022021419/58746de61a28abab198b8c81/html5/thumbnails/3.jpg)
ABOUT ME
16 Years in Business
8 Years @ Java2Days
Published Author
So�ware Consultants
International Speakers
Invented the Internet
Training
To our success!
![Page 4: React and redux](https://reader030.fdocuments.in/reader030/viewer/2022021419/58746de61a28abab198b8c81/html5/thumbnails/4.jpg)
WEBSOCKET BOOK
![Page 5: React and redux](https://reader030.fdocuments.in/reader030/viewer/2022021419/58746de61a28abab198b8c81/html5/thumbnails/5.jpg)
http://bit.ly/lombardi_websocket_book
![Page 6: React and redux](https://reader030.fdocuments.in/reader030/viewer/2022021419/58746de61a28abab198b8c81/html5/thumbnails/6.jpg)
KEY POINTS
Functional programming is awesome (avoid change in state,immutable)
Components are beautiful
JavaScript sucks, but React and Redux with ES6 make itbearable
![Page 7: React and redux](https://reader030.fdocuments.in/reader030/viewer/2022021419/58746de61a28abab198b8c81/html5/thumbnails/7.jpg)
How it Feels to Learn JavaScript in 2016
![Page 8: React and redux](https://reader030.fdocuments.in/reader030/viewer/2022021419/58746de61a28abab198b8c81/html5/thumbnails/8.jpg)
APACHE WICKETTM
Circa 2005
Component-based
Just Java and Just HTML
![Page 9: React and redux](https://reader030.fdocuments.in/reader030/viewer/2022021419/58746de61a28abab198b8c81/html5/thumbnails/9.jpg)
REACT IS...Circa 2013
Component-based
Just JavaScript and JSX (embedded XML)
Only the 'V' in MVC
No ugly templates
![Page 10: React and redux](https://reader030.fdocuments.in/reader030/viewer/2022021419/58746de61a28abab198b8c81/html5/thumbnails/10.jpg)
REACT LIFECYCLE
![Page 11: React and redux](https://reader030.fdocuments.in/reader030/viewer/2022021419/58746de61a28abab198b8c81/html5/thumbnails/11.jpg)
MOUNTING
Called when component created or inserted into DOM
![Page 12: React and redux](https://reader030.fdocuments.in/reader030/viewer/2022021419/58746de61a28abab198b8c81/html5/thumbnails/12.jpg)
UPDATINGChanges to props or state or component re-render
![Page 13: React and redux](https://reader030.fdocuments.in/reader030/viewer/2022021419/58746de61a28abab198b8c81/html5/thumbnails/13.jpg)
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
![Page 14: React and redux](https://reader030.fdocuments.in/reader030/viewer/2022021419/58746de61a28abab198b8c81/html5/thumbnails/14.jpg)
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
![Page 15: React and redux](https://reader030.fdocuments.in/reader030/viewer/2022021419/58746de61a28abab198b8c81/html5/thumbnails/15.jpg)
by
REACT STARTER KITReact Slingshot Cory House
Includes all necessary tooling to be successful with React
and Redux
![Page 16: React and redux](https://reader030.fdocuments.in/reader030/viewer/2022021419/58746de61a28abab198b8c81/html5/thumbnails/16.jpg)
HANDS-ON DEMO
![Page 17: React and redux](https://reader030.fdocuments.in/reader030/viewer/2022021419/58746de61a28abab198b8c81/html5/thumbnails/17.jpg)
FUNCTIONAL STATELESS
COMPONENTS
Also called presentational/dumb componentsimport React from ‘react’;
const HelloWorld = ({name}) => (
<div>Hello, {name}!}</div>
);
export default HelloWorld;
![Page 18: React and redux](https://reader030.fdocuments.in/reader030/viewer/2022021419/58746de61a28abab198b8c81/html5/thumbnails/18.jpg)
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} />;
}
}
![Page 19: React and redux](https://reader030.fdocuments.in/reader030/viewer/2022021419/58746de61a28abab198b8c81/html5/thumbnails/19.jpg)
setState()
Performs shallow merge of next state into current state.Triggers eventual UI update.
![Page 20: React and redux](https://reader030.fdocuments.in/reader030/viewer/2022021419/58746de61a28abab198b8c81/html5/thumbnails/20.jpg)
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
![Page 21: React and redux](https://reader030.fdocuments.in/reader030/viewer/2022021419/58746de61a28abab198b8c81/html5/thumbnails/21.jpg)
props
properties defined by the called of the component
![Page 22: React and redux](https://reader030.fdocuments.in/reader030/viewer/2022021419/58746de61a28abab198b8c81/html5/thumbnails/22.jpg)
state
user-defined data defined by the component as a plain-olejavascript object
modified using setState() so it is queued properly with other updates
![Page 23: React and redux](https://reader030.fdocuments.in/reader030/viewer/2022021419/58746de61a28abab198b8c81/html5/thumbnails/23.jpg)
HANDS-ON DEMO
![Page 24: React and redux](https://reader030.fdocuments.in/reader030/viewer/2022021419/58746de61a28abab198b8c81/html5/thumbnails/24.jpg)
RESOURCES FOR REACT
React.js Docs
Thinking in React
![Page 25: React and redux](https://reader030.fdocuments.in/reader030/viewer/2022021419/58746de61a28abab198b8c81/html5/thumbnails/25.jpg)
REDUX
![Page 26: React and redux](https://reader030.fdocuments.in/reader030/viewer/2022021419/58746de61a28abab198b8c81/html5/thumbnails/26.jpg)
REDUXA better Flux implementation
A predictable state container for JavaScript apps
No dispatcher, Single store, Immutable
![Page 27: React and redux](https://reader030.fdocuments.in/reader030/viewer/2022021419/58746de61a28abab198b8c81/html5/thumbnails/27.jpg)
FLUX ARCHITECTURE
![Page 28: React and redux](https://reader030.fdocuments.in/reader030/viewer/2022021419/58746de61a28abab198b8c81/html5/thumbnails/28.jpg)
![Page 29: React and redux](https://reader030.fdocuments.in/reader030/viewer/2022021419/58746de61a28abab198b8c81/html5/thumbnails/29.jpg)
ACTION CREATORS
function savePaste(code) { return { type: SAVE_PASTE, code } }
![Page 30: React and redux](https://reader030.fdocuments.in/reader030/viewer/2022021419/58746de61a28abab198b8c81/html5/thumbnails/30.jpg)
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 } }
![Page 31: React and redux](https://reader030.fdocuments.in/reader030/viewer/2022021419/58746de61a28abab198b8c81/html5/thumbnails/31.jpg)
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);
![Page 32: React and redux](https://reader030.fdocuments.in/reader030/viewer/2022021419/58746de61a28abab198b8c81/html5/thumbnails/32.jpg)
ACTION DISPATCHconst mapDispatchToProps = (dispatch) => { return { loadPasteById: (pasteId) => { dispatch(pasteActions.loadPasteById(pasteId)); } }; };
![Page 33: React and redux](https://reader030.fdocuments.in/reader030/viewer/2022021419/58746de61a28abab198b8c81/html5/thumbnails/33.jpg)
CALLING ACTION VIA PROPS
componentWillMount() { this.props.loadPasteById(this.props.pasteId); }
![Page 34: React and redux](https://reader030.fdocuments.in/reader030/viewer/2022021419/58746de61a28abab198b8c81/html5/thumbnails/34.jpg)
HANDS-ON DEMO
![Page 35: React and redux](https://reader030.fdocuments.in/reader030/viewer/2022021419/58746de61a28abab198b8c81/html5/thumbnails/35.jpg)
RESOURCES FOR REDUX
Main Redux Docs
Redux Tutorial
Full Stack Redux Tutorial
![Page 36: React and redux](https://reader030.fdocuments.in/reader030/viewer/2022021419/58746de61a28abab198b8c81/html5/thumbnails/36.jpg)
3 THINGS ABOUT REACTPure components
One-way data binding
Fast
![Page 37: React and redux](https://reader030.fdocuments.in/reader030/viewer/2022021419/58746de61a28abab198b8c81/html5/thumbnails/37.jpg)
3 THINGS ABOUT REDUXA single Store
No dispatcher
Immutable
![Page 38: React and redux](https://reader030.fdocuments.in/reader030/viewer/2022021419/58746de61a28abab198b8c81/html5/thumbnails/38.jpg)
FIN
![Page 39: React and redux](https://reader030.fdocuments.in/reader030/viewer/2022021419/58746de61a28abab198b8c81/html5/thumbnails/39.jpg)
Q & A
ANDREW LOMBARDI / @KINABALU
Mystic Coders, LLC
bit.ly/lombardi_websocket_book
https://github.com/kinabalu/react_and_redux