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.
3. ABOUT ME
16 Years in Business
8 Years @ Java2Days
Published Author
So ware Consultants
International Speakers
Invented the Internet
Training
To our success!
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
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
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
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
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);