react and redux

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