© 2018 David Marsland
https://www.linkedin.com/in/davidemarsland
Web Development since the Dawn of the Web
Wayback Machine 1997 reality.sgi.com/mars_corp
- 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 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
- 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
- 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
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
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
- Visual Studio Code: install from https://code.visualstudio.com/
- Sublime Text https://www.sublimetext.com/
Jetbrains IDEs, either WebStorm or IntelliJ. http://www.jetbrains.com/
- 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
State Management with React and Redux from isquaredsoftware
- 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.
Redux Example Incrementer
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__()
);
-
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
-
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 */
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 from isquaredsoftware
React-redux connect() explained
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
More Advanced Training Available from thinkster.io
-
Advanced React and Redux Online Training (need PRO subscription)
-
More Advanced Online Training Available from thinkster.io
Please let us know how class is going for you with this mid-class survey. Comments are greatly appreciated!
A Guide For Building A React Redux CRUD App by rajaraodv
Thunk Middleware for Redux: redux-thunk by Dan Abramov
- Optional tutorial for reference: Getting started with create-react-app, Redux, React Router & Redux 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
Excellent React Redux Tutorial for Beginners: learning Redux in 2018 by Valentino Gagliardi
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
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
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
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
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
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: List component and Redux state
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
// 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
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
- 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!
- React Quickly has a Backbone routing example in Ch. 13
- https://github.com/azat-co/react-quickly/tree/master/ch13
- 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
- http://reactquickly.co/demos
- Review React Foundation Course Videos from Azat Mardan React Quickly Book by Azat Mardan: Livebook
- React Quickly Summaries
Facebook Tutorial: Testing React Components with Jest
Modern React Component Testing with create-react-app, Jest, and Enzyme
Redux Testing Step by Step: A Simple Methodology for Testing Business Logic
Optional Homework: Final AutoComplete Project in React Foundation
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
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
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
https://davidmarsland.github.io/react-spike/
© 2018 David Marsland