davidmarsland / redux-react-fasttrack

FastTrack to Redux with React Training

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

redux-react-fasttrack

Welcome to FastTrack to Redux with React Training

redux react

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.


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:


Recommended IDEs (not needed, Text Editor preferred)

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


Setting Up Your React Dev Environment Easily

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

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

Redux Labs from thinkster.io

thinkster

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

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

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

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

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

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


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


More references on Redux and Thunk

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


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


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


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

About

FastTrack to Redux with React Training

License:MIT License


Languages

Language:HTML 100.0%