react-fasttrack

Welcome to FastTrack to React Training

Instructor: David Marsland

© 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 React Component Development Training

The FastTrack to React Component Development Training class teaches the essentials of building UI components with React.

The course dives deep into the core workings of React, and explores the practical aspects of developing React projects.

Utilizing best practices, students build a real application utilizing the more important aspects of React.

• 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.

  Ideally attendees of JavaScript (ES2017) for React and GraphQL Developers Course 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 React and the problem it solves
• Configure a React development environment
• Explore the basic architecture of a React component
• Develop React components using JSX

---

Course Outline and Topics

• React Overview
• Project Configuration with Babel and Webpack
• Hello World React
• Working with JSX
• Component Props and Prop Validation
• Displaying Lists of Data and Keys
• Managing Component State
• Configuring Event Handlers
• Exploring Controlled and Uncontrolled Form Controls
• Working with Refs
• InnerHTML and XSS Attacks
• Composing Components
• Styling Components
• Component Lifecycles
• Stateless Component Functions
• Testing React Components

---

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 create-react-app

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 create-react-app helloworld

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

---

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

---

React to the Future

React to the Future by Elijah Manor

---

Modern Web Development with React and Redux

Modern Web Development with React and Redux from isquaredsoftware 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/

Make a directory react-training where you want to save the course labs

cd react-training

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-training/labs directory

  create-react-app helloworld
  

  If you had permissions issues with global install create-react-app -g, then

  npx create-react-app helloworld
  

• Starter Create React App Online
• Helloworld App Online

---

Debugging React Apps

Debugging ReactJS Apps

---

Thinking In React

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

---

Lab: Simple Table in React

Implement a simple table in React

• Generate project in labs directory

  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

---

Thinking In React

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

---

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

  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
  

---

React to the Future: State

React to the Future: State by Elijah Manor

---

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

---

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/react4-3-18

---

Alternative Approach: Refactor to use Functional Components

React to the Future: Functional Components

React to the Future: Functional Components by Elijah Manor</a>

Here’s the Lab Solution Refactored to Functional Components Online

---

Component LifeCycle from isquaredsoftware

Component LifeCycle from isquaredsoftware

---

InnerHTML and XSS Attacks

React DOM Elements: dangerouslySetInnerHTML

• dangerouslySetInnerHTML is React’s replacement for using innerHTML in the browser DOM
• Setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting (XSS) attack

---

React Foundation Course Materials

React Foundation by Azat Mardan

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

Download zip or clone inside your react-training directory

cd react-training
git clone https://github.com/azat-co/react-foundation.git

---

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!”

---

Isomorphic Apps and CommonJS Modules

• Isomorphic apps can render React both server-side (hydrate) or Client Side (render)

• CommonJS module syntax (require) is currently needed for this

• Isomorphic Apps Babel Webpack Example

• Optional, Advanced: Native ES Modules in NodeJS: Status And Future Directions, Part I

---

React Foundation Course Modules

• Module 1 Hello React World
• Changing the State example
• Module 2 Components
• Module 3 User Input
• Module 4 Advancing Components
• Note that PropTypes has been moved into the prop-types library Typechecking with PropTypes
• React Higher Order Components
• React Foundation Summary

---

React Foundation Course Solutions

• To try out React Foundation Course Solutions:

  cd react-foundation
  npm install http-server -g
  http-server
  

  If -g global install doesn’t work for you, can use npx:

   npx http-server
  

---

React Foundation Course Labs

• We’ll only do the first labs here Coding Time Lab

• To run solution, open a new terminal or powershell

  cd react-foundation/code/react-project
  npm install
  npm run build
  

• To try the lab yourself

  cd react-training/labs
  

  Follow steps in Coding Time Lab

• 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'
  

  Modify package.json to specify ‘babel-loader’ instead of ‘babel’ see babel-loader migration

---

Testing React Components

Facebook Tutorial: Testing React Components with Jest

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

---

Styling Components

• Styling Components and CSS

• CSS Modules in React

• CSS Modules will arrive in create-react-app Version 2 (Not here yet as of March 2018)

---

More React Learning Resources

• FullStack React 30 Days of React and Redux

• React Tutorial: Cloning Yelp

• Survive JS - Webpack and React Book

---

React Native Intro

Intro to React Native

---

Tools

• Code Sandbox

• Zeit for deployment

• JS Bin Online Editor

---

Github Tutorial

• Github tutorial

---

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

---

React and Redux Resources

• Tips to learn React + Redux in 2018

---

Course Review

Course Objectives

You should now be able to:

Describe React and the problem it solves
Configure a React development environment
Explore the basic architecture of a React component
Develop React components using JSX

---

Course Outline and Topics

React Overview
Project Configuration with Babel and Webpack
Hello World React
Working with JSX
Component Props and Prop Validation
Displaying Lists of Data and Keys
Managing Component State
Configuring Event Handlers
Exploring Controlled and Uncontrolled Form Controls
Working with Refs
InnerHTML and XSS Attacks
Composing Components
Styling Components
Component Lifecycles
Stateless Component Functions
Testing React Components

---

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-fasttrack/

© 2018 David Marsland