react-spike

Welcome to React Training

Instructor: David Marsland

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

---

React Training

• Core Audience: Experienced JavaScript developers interested in bringing structure to their rapidly growing web applications

• Prerequisites: Advanced JavaScript that includes Object Oriented concepts, Ajax, promises, prototypal inheritance, ES6 and module design patterns

• 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 React and the problem it solves
• Explore the basic architecture of a React component
• Gain a deep knowledge of React components and JSX
• Learn how to manage application state with Flux and Redux

---

Course Outline and Topics

React Training	Redux with React and React Router
Intro to React	Uncontrolled Components
React vs other libraries	Component Life-Cycle
Virtual DOM	Forms
JSX	Building Apps
Precompiled JSX	Introduction to Flux
Properties & State	Introduction to Redux
Reusable Components	Related React Tools
Compositions	React Router
Events	Testing React Components
Controlled Components	Testing Redux Reducers

---

Lab Setup

First check if you have node installed.

In a terminal, cmd prompt, or powershell:

node -v

Should be >= 8.0

npm -v

Should be greater than 5.2

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

Add node to your path if necessary, then In a new terminal, cmd prompt, or powershell (must start new terminal to see new path):

node -v

Should be >= 8.0

npm -v

Should be greater than 5.2

Install eslint

npm install -g eslint

---

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

---

Create and run your first React app!

Try creating and running a starter app with create-react-app

npx create-react-app starter

cd starter
npm start

Create React App: Getting Started

We’ll do more setup in class as needed.

---

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/

---

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-

---

Hello React World

See the Pen Hello React World by David Marsland (@demarsland) on CodePen.

---

The Evolution of the Web

http://www.evolutionoftheweb.com/

A Brief History of the Web

• A Brief History of the Web

• The (R)Evolution of Web Development by Mark Erikson

---

Modern Web Development with React and Redux

Modern Web Development with React and Redux by Mark Erikson

---

Naming Conventions

• React doesn’t enforce naming conventions
• There are many different approaches to class and file naming
• Airbnb React/JSX Style Guide shows one approach

---

React Dev Labs

Lab solutions are available here:

https://github.com/davidmarsland/react-labs/

Clone this repo into the directory you want to save the course labs:

git clone https://github.com/davidmarsland/react-labs/

Then

cd react-labs

cd solutions
cd catalog3cart
npm install
npm run start

---

Tutorial Labs Overview: Intro to React

Facebook React Tutorial

---

Create React App Simpler Project Setup from Facebook

Create React App: Getting Started

---

Lab: Set Up React Dev Env and Create React App helloworld

• Follow the steps in this tutorial to use Create React App for starter files https://www.kirupa.com/react/setting_up_react_environment.htm
• Then create helloworld app inside react-spike/labs directory

  npx create-react-app helloworld
  

• Starter Create React App Online
• Helloworld App Online

---

Thinking In React

https://reactjs.org/docs/thinking-in-react.html

---

Lab: Simple Table in React

Implement a simple table in React

Here’s the app you’re about to create: Lab Solution Online

• Generate project in labs directory

  npx create-react-app simpletable
  

• In src directory, delete App.*
• Start with this data from Thinking In React and declare PRODUCTS in src/index.js

const PRODUCTS = [
  {category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'},
  {category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'},
  {category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'},
  {category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'},
  {category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5'},
  {category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'}
];

• In src directory, create file SimpleTable.jsx

  import React from 'react';
  
  class SimpleTable extends React.Component {
    render() {
      return (
        <table>
          <tbody>
          </tbody>
        </table>
      )
    }
  }
  
  export default SimpleTable;
  

• Inside the tbody tags use an array and map() this.props.products to populate the name and price for each product

  <tr><td>name</td><td>price</td></tr>
  

Similar to this:

    <ul>
      {this.props.items.map((value, index) => {
        return <li key={index}>{value}</li>
      })}
    </ul>

• Modify index.js to render SimpleTable instead of App and pass in products={PRODUCTS} as a prop.
• Run app in browser

npm start

---

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

---

Lab: Thinking In React Filterable Product Table Catalog

Here’s the app you’re about to create: Lab Solution Online

• Read the Thinking in React Tutorial up to Step 2

• Generate project

  npx create-react-app catalog
  

• Modularize the code in Step 2: Build A Static Version in React

• In src directory, delete App.*
• Start with this data from Thinking In React and declare PRODUCTS in src/index.js

const PRODUCTS = [
  {category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'},
  {category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'},
  {category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'},
  {category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'},
  {category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5'},
  {category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'}
];

• In src directory, create jsx files for each class and add import and export like this:

  ProductCategoryRow.jsx

  import React from 'react';
  
  class ProductCategoryRow extends React.Component {
  ...
  export default ProductCategoryRow;
  

• Import appropriate dependencies for each file like this:

  import React from 'react';
  import ProductCategoryRow from './ProductCategoryRow';
  import ProductRow from './ProductRow';
  
  class ProductTable extends React.Component ...
  

• Modify index.js to import FilterableProductTable then render.
  Note that id is ‘root’, not ‘container’

  ReactDOM.render(
    <FilterableProductTable products={PRODUCTS} />,
    document.getElementById('root')
  );
  

• Run app in browser

  npm start
  

---

Lab: Add State to Filterable Product Table

Here’s the app you’re about to create: Lab Solution Online

• Read all of Step 3: Identify The Minimal (but complete) Representation Of UI State
• Read Step 4: Identify Where Your State Should Live
  and modify the code as described to add state
• Complete Step 5: Add Inverse Data Flow

---

Optional Challenge: Add Cart

• Optional Challenge: Create a Cart component and add selected products to the cart

  handleAddToCart(product) {
      this.setState({
        cart: this.state.cart.concat(product)  
        // returns a new array
      })
    }
  

• Optional Challenge: use your own test data for real shopping!

Optional Cart Lab Solution Online

---

Alternative Approach: Refactor to use Functional Components

Here’s the Lab Solution Refactored to Functional Components Online

---

React Foundation Course Materials

React Foundation by Azat Mardan

https://github.com/azat-co/react-foundation

Download zip or clone.

---

Github Tutorials

• CodeSchool Free tryGit Interactive Tutorial
• Github Guide

---

Free Video Courses on Node University

• https://node.university/courses/category/free

---

This course includes material from Azat Mardan’s React Foundation Course

https://node.university/p/react-foundation

---

React Quickly Book

by Azat Mardan

React Quickly Livebook

---

React Foundation Course

• Course Outline

• Course Intro

---

CommonJS import/require module.exports vs. ES6 modules import/export

• React Foundation Course uses Node CommonJS module
• Why? Can use same syntax with server-side Node and Client side
• voidcanvas.com/import-vs-require/
• React Quickly Appendix E: ES6 Modules

  Azat Mardan wrote: “Personally, I find ES6 modules confusing. Yes, they’re more eloquent, but Node.js modules won’t change anytime soon. It’s better to have only one style for browser and server JavaScript, so I’ll stick with CommonJS/Node.js style for now.

For more information and examples, see http://exploringjs.com/es6/ch_modules.html. And no matter what, write modular JavaScript!”

---

React Foundation Course Modules

• Module 1 Hello React World
• Changing the State example
• Module 2 Components
• Module 3 User Input
• Module 4 Advancing Components
• React Foundation Summary

---

React Foundation Course Labs

• We’ll only do the first labs here
• Lab 1 Issues: Complete package.json:

  {
  "name": "react-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "./node_modules/.bin/webpack",
    "build-watch": "./node_modules/.bin/webpack -w"
  },
  "author": "",
  "license": "MIT",
  "babel": {
    "presets": [
      "react"
    ]
  },
  "devDependencies": {
    "babel-core": "^6.13.2",
    "babel-loader": "^6.2.4",
    "babel-preset-react": "^6.5.0",
    "react": "^15.2.1",
    "react-dom": "^15.2.1",
    "webpack": "1.13.3"
  }
  }
  

  npm run build
  

  ERROR in Entry module not found: Error: Can't resolve 'babel' in 'C:\Users\david\git\react-training\react-labs\labs\react-project'
  BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
  You need to specify 'babel-loader' instead of 'babel'
  

  see babel-loader migration

---

Flux

Flux from Facebook

---

Redux

redux.js.org

State Management with React and Redux

---

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
• Clone repo, then:

  npm install
  npm run start
  

• Launches on localhost:8080 by default.

---

Redux Labs

• Thinkster: Learn The Fundamentals of Redux from thinkster.io
  Note, to do the labs you will have to change git commands similar to this:

  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
  

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

---

Lab: Learn the Fundamentals of Redux

• Do the first thinkster lab Lab: Learn the Fundamentals of Redux
• Optionally you can create your own git branch to save your labs. From a new terminal or powershell:

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

• 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__()
 );

---

Lab: Displaying the State

Lab: Displaying the State

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

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

git commit -am "Added redux store, reducer, and dispatch to todos checkbox"
git diff -b mylabs00start
git checkout -b mylabs02conduit

---

Lab: Using react-redux to Develop Conduit Site

Setting up react-redux

• 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

Optionally when you’re done:

git commit -am "Started Conduit site with react-redux"
git diff -b mylabs01reduxtodos
git checkout -b mylabs03conduitloading

---

Lab: Redux with Multiple Components

Communicating Across Multiple Components

• Lab Solution Online

Optionally when you’re done:

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

---

Lab: Communicating Across Multiple Components and AJAX Calls

AJAX Middleware

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

---

Lab: Loading Data Feed

Creating Promise Middleware

• Using Middleware, Promise, and mapDispatchToProps to dispatch actions asynchronously Displaying Retrieved Data in Components
• Update reducer to handle action HOME_PAGE_LOADED
• Build ArticlePreview component
• Lab Solution Online

Optionally when you’re done:

git commit -am "Loaded data feed and dispatched actions"
git diff -b mylabs03conduitloading
git checkout -b mylabs05router
git branch

---

Routing in React

• Intro to React Router v4

---

Lab: Adding React Router

React Router

• Lab Solution Online

Optionally, when you’re done:

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 on thinkster.io

---

React Redux Tutorial: Learning Redux in 2018

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

---

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

---

Course Review

Course Objectives

Describe React and the problem it solves
Explore the basic architecture of a React component
Gain a deep knowledge of React components and JSX
Learn how to manage application state with Flux and Redux

---

Topics Review

React Training	Redux & React + React Router
Intro to React	Uncontrolled Components
React vs other libraries	Component Life-Cycle
Virtual DOM	Forms
JSX	Building Apps
Precompiled JSX	Introduction to Flux
Properties & State	Introduction to Redux
Reusable Components	Related React Tools
Compositions	React Router
Events	Testing React Components
Controlled Components	Testing Redux Reducers

---

PluralSight React Skills Assessment

15 minute test of your proficiency in React. Should be able to take once with 1 redo.

https://www.pluralsight.com/paths/react

---

Congratulations, you are now all React Developers!

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