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
node
and npm
installed
Ensure that you have In a terminal, powershell, or cmd prompt:
node -v
Should be >= 8.0
npm -v
Should be greater than 5.2.
Node.js LTS
from https://nodejs.org/
If needed, install 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
git
installed
Ensure that you have In a terminal, powershell, or cmd prompt:
git --version
Should be greater than 2.0
git
from https://git-scm.com/downloads
If needed, install 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
Flux
Redux 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.
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
-
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
thinkster.io
Redux Labs fromThinkster: 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()
andreact-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
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
, andmapDispatchToProps
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 handleaction 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
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
thinkster.io
More Advanced Training Available from-
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 propsmapDispatchToProps()
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
col-md-4
to work, add:
To get bootstrap styles like // 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:
More React and Redux Learning Resources
Redux Video Course by Wes Bos
Tools
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
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
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