React.js and Redux overview

React / Redux

Introduction to JavaScript components and state management

It’s an awesome time to be a front-end developer

Choose your JavaScript framework

Flexible app architecture

API 1

API 2

More vanilla JS

● ES2015 Modules● Native JavaScript APIs● Classes and Functions

ABL always be learning

Tooling

Functional Programming

OMG! They’re still using HTML tables.

Functional Programming

Reduce

Pure Functionsgiven the same arguments, they always return the same value, without producing any observable side effect

Higher-Order Functionsfunction that can take another function as an argument, or that returns a function as a result

Why React.js ?

Smart components

Dumb components

React.js ecosystem

React Native Platforms

State management

Redux

Predictability of outcome

Maintainability

Server side rendering

Ease of testing

One way data flow

Actions Reducers StorePure functions that take the current state of the application and an action and then return a new state.

Store is the object that holds the application state. Any action returns a new state via reducers.

Actions are events, which send data to store. Actions are simple objects with type and payload.

Actions Reducers Store

Actions

Reducers

Store

Redux Data Flow

Dev Tools

React + Redux app architecture

React + Redux middleware

react-router

react-redux

react-router-redux

redux-thunk

@netxm

www.priceline.com/careers

slide URL

bit.ly/redux-intro