This document provides an overview of React and Redux. It introduces React as a component-based library for building user interfaces using JavaScript and JSX. Key aspects of React include its lifecycle methods, use of a virtual DOM for fast updates, and functional stateless components. Redux is introduced as a state management library that uses a single immutable store with actions and reducers. It follows the Flux architecture pattern without a dispatcher. Hands-on demos are provided for key React and Redux concepts. Resources for further learning are also listed.

1. REACT AND REDUX
MAKE THE WEB FUN AGAIN
/Andrew Lombardi @kinabalu
Mystic Coders, LLC

2. ABOUT ME

3. ABOUT ME
16 Years in Business
8 Years @ Java2Days
Published Author
So ware Consultants
International Speakers
Invented the Internet
Training
To our success!

4. WEBSOCKET BOOK

5. http://bit.ly/lombardi_websocket_book

6. KEY POINTS
Functional programming is awesome (avoid change in state,
immutable)
Components are beautiful
JavaScript sucks, but React and Redux with ES6 make it
bearable

7. How it Feels to Learn JavaScript in 2016

8. APACHE WICKET
TM
Circa 2005
Component-based
Just Java and Just HTML

9. REACT IS...
Circa 2013
Component-based
Just JavaScript and JSX (embedded XML)
Only the 'V' in MVC
No ugly templates

10. REACT LIFECYCLE

11. MOUNTING
Called when component created or inserted into DOM

12. UPDATING
Changes to props or state or component re-render

13. 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

14. CONVENTIONS FOR THIS TALK
Code will be using ES6, transpiled using Babel
Uses npm scripts rather than Grunt or Gulp
yarn instead of npm because it's superior

15. by
REACT STARTER KIT
React Slingshot Cory House
Includes all necessary tooling to be successful with React
and Redux

16. HANDS-ON DEMO

17. FUNCTIONAL STATELESS
COMPONENTS
Also called presentational/dumb components
import React from ‘react’;
const HelloWorld = ({name}) => (
<div>Hello, {name}!}</div>
);
export default HelloWorld;

18. CONTAINER COMPONENTS
The stateful kind
class 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} />;
}
}

19. setState()
Performs shallow merge of next state into current state.
Triggers eventual UI update.

20. propTypes
a property on the component class, defines what types the
props should be.
In dev mode, warning is shown but skipped in prod for efficiency

21. props
properties defined by the called of the component

22. state
user-defined data defined by the component as a plain-ole
javascript object
modified using setState() so it is queued properly with other updates

23. HANDS-ON DEMO

24. RESOURCES FOR REACT
React.js Docs
Thinking in React

25. REDUX

26. REDUX
A better Flux implementation
A predictable state container for JavaScript apps
No dispatcher, Single store, Immutable

27. FLUX ARCHITECTURE

29. ACTION CREATORS
function savePaste(code) {
return {
type: SAVE_PASTE,
code
}
}

30. REDUCERS
const 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
}
}

31. 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);

32. ACTION DISPATCH
const mapDispatchToProps = (dispatch) => {
return {
loadPasteById: (pasteId) => {
dispatch(pasteActions.loadPasteById(pasteId));
}
};
};

33. CALLING ACTION VIA PROPS
componentWillMount() {
this.props.loadPasteById(this.props.pasteId);
}

34. HANDS-ON DEMO

35. RESOURCES FOR REDUX
Main Redux Docs
Redux Tutorial
Full Stack Redux Tutorial

36. 3 THINGS ABOUT REACT
Pure components
One-way data binding
Fast

37. 3 THINGS ABOUT REDUX
A single Store
No dispatcher
Immutable

38. FIN

39. Q & A
ANDREW LOMBARDI / @KINABALU
Mystic Coders, LLC
bit.ly/lombardi_websocket_book
https://github.com/kinabalu/react_and_redux