davidmarsland / redux-react-fasttrack

FastTrack to Redux with React Training

redux-react-fasttrack

Welcome to FastTrack to Redux with React Training

Instructor: David Marsland

https://davidmarsland.github.io/redux-react-fasttrack/

© 2018 David Marsland

---

Introducing your instructor, David Marsland

https://www.linkedin.com/in/davidemarsland

Web Development since the Dawn of the Web

Wayback Machine 1997 reality.sgi.com/mars_corp

---

Life after SGI

• Sun Java Certified Developer and Instructor 1998-2004
• eBay Chief Instructor 2004-2009
• Sencha Chief Instructor / Training Director 2010-2015
• Marsland Enterprises Chief Instructor 2015-
• DevelopIntelligence Senior Technical Instructor 2017-

---

FastTrack to Redux with React Training

FastTrack to Redux with React Training ​teaches students how to use two important React-related libraries: Redux and React Router.

Building upon the solid foundation of Flux principles, Redux is explained and demonstrated as it related to Flux and React.

Additionally, routing with React Router is explored and integrated with Redux.

Utilizing best practices, students build a real application from scratch utilizing the more import aspects of React, Redux and React Router.

• Prerequisites: Advanced JavaScript ES6 and React Development Experience

  Ideally attendees of FastTrack to React Training with 3-6 months of recent Javascript experience.

• If you want to learn more about ES6, aka ES2015, here are some good tutorials:
  https://babeljs.io/learn-es2015/
  ES6 - JavaScript Improved | Udacity

---

Course Objectives

• Describe Redux and the problem it solves
• Configure a React and Redux development environment
• Explore the basic architecture of a React Redux application
• Develop applications using React and Redux

---

Course Outline and Topics

• Flux & Redux Overview
• Three Principles of Redux
• Immutable Data
• Configuring Actions
• Creating Reducer Functions
• Working with Stores
• Combining Reducers
• Integrating with React
• Middleware Overview
• Creating Custom Middleware
• Redux Thunk and Asynchronous Actions
• Creating Containers with React-Redux
• Integrating React Router with React/Redux
• Configuring Paths
• Working with URL Parameters
• Testing Redux Reducers

---

Lab Setup

Ensure that you have node and npm installed

In a terminal, powershell, or cmd prompt:

node -v

Should be >= 8.0

npm -v

Should be greater than 5.2.

If needed, install Node.js LTS from https://nodejs.org/

If you need multiple versions of Node installed, you may want to install Node Version Manager for Mac or Linux or NVM for Windows

Add node to your path, then launch a new terminal, cmd prompt, or powershell:

node -v

Should be >= 8.0

npm -v

Should be greater than 5.2.

Install eslint

npm install -g eslint
eslint -v

If npm -g doesn't work, you may have permissions issues. A workaround is npx which will get from npm if needed and install in local directory.

npx eslint -v

Fixing NPM Permissions on Mac or Linux

---

Ensure that you have git installed

In a terminal, powershell, or cmd prompt:

git --version

Should be greater than 2.0

If needed, install git from https://git-scm.com/downloads

---

For this course you'll need either a Text Editor or an IDE.

Recommended Text Editors:

• Visual Studio Code: install from https://code.visualstudio.com/
• Sublime Text https://www.sublimetext.com/

---

Recommended IDEs (not needed, Text Editor preferred)

Jetbrains IDEs, either WebStorm or IntelliJ. http://www.jetbrains.com/

---

Setting Up Your React Dev Environment Easily

• Create React App simplifies setup
• https://www.kirupa.com/react/setting_up_react_environment.htm
• Create React App Docs

We'll do more setup in class as needed

---

Debugging React Apps

Debugging ReactJS Apps

---

Flux

Flux from Facebook

---

Redux

redux.js.org

State Management with React and Redux from isquaredsoftware

---

Redux can be described in three fundamental principles:

• Single source of truth. The state of your whole application is stored in an object tree within a single store.
• State is read-only (immutable). The only way to change the state is to emit an action, an object describing what happened.
• Changes are made with pure functions.

Three Principles of Redux

---

Immutable Data

Redux Immutable Data

---

Redux Example and Lab

Redux Example Incrementer

---

Redux DevTools

Redux DevTools - Chrome Web Store

Note, you must add a line to source code to enable tooling. Try this on a Redux example without this and it will provide instructions:
No store found. Make sure to follow the instructions.

For a basic Redux store simply add:

 const store = createStore(
   reducer, /* preloadedState, */
   window.__REDUX_DEVTOOLS_EXTENSION__ &&
     window.__REDUX_DEVTOOLS_EXTENSION__()
 );

---

Redux Todo Example App from Redux Course

• https://github.com/sadams/todo-redux-react-webpack

• Make a directory redux-fasttrack where you want to save the course labs

cd redux-fastrack

git clone https://github.com/sadams/todo-redux-react-webpack.git
npm install

---

Redux Labs from thinkster.io

Thinkster: Learn The Fundamentals of Redux from thinkster.io

Create a free account and/or login with github on thinkster.io: Learn The Fundamentals of Redux

Note, to do the labs you will have to change git commands similar to this:

Starting from redux-fasttrack directory:

git clone -b 00 https://github.com/gothinkster/react-redux-realworld-example-app.git

Then cd react-redux-realworld-example-app and
npm install to download node modules (may take a while on windows) and npm run start to run a development server

cd react-redux-realworld-example-app
npm install
npm run start

---

Lab: Learn the Fundamentals of Redux

• Do the first thinkster.io Lab: Learn the Fundamentals of Redux

• Optional: you can create your own git branches to save key steps of your labs. From a new terminal or powershell:

cd react-redux-realworld-example-app
git branch mylabs00start
git checkout mylabs00start
git add .
git commit -am "starting point for labs"
git checkout -b mylabs01reduxtodos
git branch
git status

• Add Redux store with createStore()
• Add DevTools to createStore() as on the previous page:

For a basic Redux store simply add:

 const store = createStore(
   reducer, /* preloadedState, */
   window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
 );

---

thinkster.io Lab: Displaying the State

Follow the steps in this thinkster.io Lab: Displaying the State

• Subscribe the store to React's setState()
• Display checkbox tied to state
• Lab Solution Online

Optional: when you're done you can commit your work and diff

git branch
git add .
git commit -am "Added redux store, reducer, and dispatch to todos checkbox"
git diff -b mylabs00start

---

thinkster.io Lab: Using react-redux to Develop Conduit Site

Follow the steps in this thinkster.io Lab: Setting up react-redux

Optional: create and checkout a new branch for this lab

git checkout -b mylabs02conduit

• Remember to remove App component from index.js
• Add components folder to src and create App.js in src/components/App.js
• Building Conduit Site and adding react-redux Provider
• Subscribing to Redux Store with store.subscribe()
• Dispatching Actions with store.dispatch()
• Using mapStateToProps() and react-redux connect()
• Lab Solution Online

Optional:

git add .
git commit -am "Started Conduit site with react-redux"
git diff -b mylabs01reduxtodos

---

thinkster.io Lab: Redux with Multiple Components

Optional: before you start coding:

git checkout -b mylabs03conduitloading

Follow the steps in this thinkster.io Lab: Communicating Across Multiple Components

• Lab Solution Online

Optional: when you're done with the lab

git add .
git commit -am "Added comm across multiple components to loading..."
git diff -b mylabs02conduit

---

thinkster.io Lab: Communicating Across Components, Middleware, and AJAX Calls

Follow the steps in this thinkster.io Lab: AJAX Middleware

• Making AJAX calls with superagent HTTP client library to lead conduit data feed
• Lab Solution Online

---

thinkster.io Lab: Loading Data Feed

git checkout -b mylabs04conduitfeed

Follow the steps in this thinkster.io Lab: Creating Promise Middleware

• Using Middleware, Promise, and mapDispatchToProps to dispatch actions asynchronously

• Note: To enable Redux DevTools with Middleware, see Redux DevTools Advanced Store Setup

In this case, to use Redux DevTools modify src/index.js:

// const store = createStore(reducer, applyMiddleware(promiseMiddleware));

/* eslint-disable no-undef */
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, composeEnhancers(applyMiddleware(promiseMiddleware)));
/* eslint-enable */

---

Displaying Retrieved Data in Components

Follow the steps in this thinkster.io Lab: Displaying Retrieved Data in Components

• Update reducer to handle action HOME_PAGE_LOADED
• Build ArticlePreview component
• Lab Solution Online

Optional:

git add .
git commit -am "Loaded data feed and dispatched actions"
git diff -b mylabs03conduitloading

---

Redux Middleware

Redux Middleware from isquaredsoftware

---

More about react-redux connect()

React-redux connect() explained

---

Routing in React

Intro to React Router v4

---

thinkster.io Lab: Adding React Router

git checkout -b mylabs05router

Follow the steps in this thinkster.io Lab: React Router

• Lab Solution Online

To make the Redux DevTools work now, modify src/store.js

// const store = createStore(reducer, middleware);

/* eslint-disable no-undef */
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, composeEnhancers(middleware));
/* eslint-enable */

Optionally, when you're done:

git add .
git commit -am "Added react-router Links"
git diff -b mylabs04conduitfeed
git branch

---

More Advanced Training Available from thinkster.io

• Advanced React and Redux Online Training (need PRO subscription)

• More Advanced Online Training Available from thinkster.io

---

Mid-class Survey

Please let us know how class is going for you with this mid-class survey. Comments are greatly appreciated!

http://bit.ly/redux4-5-18

---

A Guide For Building A React Redux CRUD App by rajaraodv

A Guide For Building A React Redux CRUD App by rajaraodv

Redux Thunk and Asynchronous Actions

Thunk Middleware for Redux: redux-thunk by Dan Abramov

• Optional tutorial for reference: Getting started with create-react-app, Redux, React Router & Redux Thunk

---

More references on Redux and Thunk

• Redux and Thunk in React Tutorial (long, optional) by Matt Stow

Optional: Starting in directory redux-fasttrack, clone Matt's repo and run the example:

git clone https://github.com/stowball/dummys-guide-to-redux-and-thunk-react.git

cd dummys-guide-to-redux-and-thunk-react
npm install
npm run start

To use Redux DevTools with this, modify src/store/configureStore.js like this:

export default function configureStore(initialState) {
    const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
    const store = createStore(rootReducer, initialState, composeEnhancers(
        applyMiddleware(thunk),
    ));
    return store;    
}

See Redux DevTools: Advanced Store Setup

---

React Redux Tutorial: Learning Redux in 2018

Excellent React Redux Tutorial for Beginners: learning Redux in 2018 by Valentino Gagliardi

---

React Redux Tutorial Labs

Starting from redux-fasttrack directory:

git clone https://github.com/valentinogagliardi/webpack-4-quickstart.git

cd webpack-4-quickstart

Do not remove the file ./src/App.js

Optionally you can create your own git branch to save your labs. From a new terminal or powershell:

git branch 00start
git checkout 00start
git commit -am "starting point for labs"
git checkout -b 01store
git branch
npm install

---

React Redux tutorial: getting to know the Redux store

Do the steps in React Redux tutorial: getting to know the Redux store

Add __REDUX_DEVTOOLS_EXTENSION__ to createStore():

For a basic Redux store simply add:

 const store = createStore(
   reducer, /* preloadedState, */
   window.__REDUX_DEVTOOLS_EXTENSION__ &&       
     window.__REDUX_DEVTOOLS_EXTENSION__()
 );

Optionally when you're done you can commit your work and diff, then create and checkout a new branch for the next lab.

git branch
git add .
git commit -am "Added redux store"
git diff -b 00start
git checkout -b 02reducer

---

React Redux tutorial: getting to know Redux reducers

React Redux tutorial: getting to know Redux reducers

After adding 'src/js/reducers/index.js' following the tutorial, do this to see the store in Redux DevTools:

Add this to src/App.js

import store from "./js/store";

In a new terminal or powershell starting from redux-fasttrack

cd webpack-4-quickstart
npm run start

Your redux app should finally run. Open DevTools and in Redux DevTools you should see State in the Store but it won't respond to Actions yet.

Optionally:

git branch
git add .
git commit -am "Added reducer"
git diff -b 01store

---

React Redux tutorial: getting to know Redux actions

git checkout -b 03actions

Do the steps in React Redux tutorial: getting to know Redux actions

git branch
git add .
git commit -am "Added actions and constants"
git diff -b 02reducer

---

React Redux tutorial: Redux store methods

git checkout -b 04storemethods

Do the first steps in React Redux tutorial: Redux store methods creating src/js/index.js and modifying src/index.js

Lab: Your redux app should run, but you won't see output. We're going to go under the hood in the console.

Follow the instructions in React Redux tutorial: Redux store methods to interact with redux store in the console.

Now you should know how to do all this with a store:

• access the current state with getState().
• dispatch an action with dispatch()
• listen for state changes with subscribe()

git branch
git add .
git commit -am "Create src/js/index.js, mod src/index.js to expose store and action creator addArticle"
git diff -b 03actions

---

React Redux tutorial: connecting React with Redux

React Redux tutorial: connecting React with Redux

git checkout -b 05reactredux

Now we need to connect React and Redux with react-redux

npm i react-redux --save-dev

• the mapStateToProps() connects part of the Redux state to props
• mapDispatchToProps() connects Redux actions to React props

---

React Redux tutorial: App component and Redux store

React Redux tutorial: App component and Redux store

---

React Redux tutorial: List component and Redux state

React Redux tutorial: List component and Redux state

---

React Redux tutorial: Form component and Redux actions

React Redux tutorial: Form component and Redux actions

git branch
git add .
git commit -am "Add react-redux connect, use Provider"
git diff -b 04storemethods

git checkout -b 04storemethods

To get bootstrap styles like col-md-4 to work, add:

// src/js/index.js

import 'bootstrap/dist/css/bootstrap.min.css';

Then stop the server and:

npm i bootstrap –save-dev
npm run start

---

React Redux tutorial: wrapping up

React Redux tutorial: wrapping up

Optionally when you're done you can commit your work and diff, then create and checkout a new branch for the next lab.

git branch
git add .
git commit -am  "added List and Form and put inside Provider"
git diff -b 04storemethods

---

Optional Lab: Catalog with React and Redux

• Port your simple catalog in React to use Redux for state management
• Previously, you modularized this code Thinking in React Shopping https://reactjs.org/docs/thinking-in-react.html
• Refactor to use Redux
• Use Todo Redux example for inspiration https://github.com/sadams/todo-redux-react-webpack
• See previous page for setup
• Optional challenges: use your own test data for real shopping!

---

Free Course Videos from Dan Abramov

Learn Redux from its creator:

• Part 1: Getting Started with Redux (30 free videos)

• Part 2: Building React Applications with Idiomatic Redux (27 free videos)

• Redux Course Notes

---

More React and Redux Learning Resources

• FullStack React 30 Days of React and Redux

• React Tutorial: Cloning Yelp

• Learn React & Redux With Cabin

• Survive JS - Webpack and React Book

• https://github.com/ReactTraining/react-router

• react-router tutorial https://github.com/reactjs/react-router-tutorial

---

Redux Video Course by Wes Bos

• Wes Bos Redux Video Course

• Free Resources to Learn React

• React Quickly book by Azat Mardan

• React Quickly Free Chapter Menu Project

• Part 1: Getting Started with Redux (30 free videos)

• Part 2: Building React Applications with Idiomatic Redux (27 free videos)

---

Tools

• Code Sandbox

• Zeit for deployment

• JS Bin Online Editor

---

Github Tutorial

• Github tutorial

---

Routing with Backbone and React

• React Quickly has a Backbone routing example in Ch. 13
• https://github.com/azat-co/react-quickly/tree/master/ch13

---

Backbone router to render React components by doing the following:

• Defining a router class with the routes object as a mapping from URL fragments to functions
• Rendering React elements in the methods/functions of the Backbone Router class
• Instantiating and starting the Backbone the Router object

---

React Native Intro

Intro to React Native

---

Resources to learn more

• http://reactquickly.co/demos
• Review React Foundation Course Videos from Azat Mardan React Quickly Book by Azat Mardan: Livebook
• React Quickly Summaries

---

Testing React Components

Facebook Tutorial: Testing React Components with Jest

Modern React Component Testing with create-react-app, Jest, and Enzyme

---

Testing Redux Reducers and More with Jest

Redux Testing Step by Step: A Simple Methodology for Testing Business Logic

---

Optional Homework

Optional Homework: Final AutoComplete Project in React Foundation

---

React and Redux Resources

• Tips to learn React + Redux in 2018

---

Reference: Enabling Sourcmaps

From Enabling Sourcemaps: https://survivejs.com/webpack/building/source-maps/

Enabling Source Maps in Webpack To get started, you can wrap the core idea within a configuration part. You can convert this to use the plugins later if you want:

webpack.parts.js

exports.generateSourceMaps = ({ type }) => ({
  devtool: type,
});

Webpack supports a wide variety of source map types. These vary based on quality and build speed. For now, you enable source-map for production and let webpack use the default for development. Set it up as follows:

webpack.config.js

const productionConfig = merge([
  parts.generateSourceMaps({ type: "source-map" }),
]);

source-map is the slowest and highest quality option of them all, but that's fine for a production build.

If you build the project now (npm run build), you should see source maps in the output:

npm run build

The build folder is ready to be deployed. You may also serve it locally with a static server:

  npm install -g pushstate-server
  pushstate-server build
  open http://localhost:9000

---

Course Review

Course Objectives

Describe Redux and the problem it solves
Configure a React and Redux development environment
Explore the basic architecture of a React Redux application
Develop applications using React and Redux

---

Course Outline and Topics

Flux & Redux Overview
Three Principles of Redux
Immutable Data
Configuring Actions
Creating Reducer Functions
Working with Stores
Combining Reducers
Integrating with React
Middleware Overview
Creating Custom Middleware
Creating Containers with React-Redux
Integrating React Router with React/Redux
Configuring Paths
Working with URL Parameters
Testing Redux Reducers

---

Congratulations, you are now all React and Redux Developers!

https://davidmarsland.github.io/react-spike/

© 2018 David Marsland