Giters

davidmarsland / react-fasttrack

React Component Development FastTrack Training

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Welcome to FastTrack to React Training

react

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:

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

Hello React World

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

<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

The Evolution of the Web

http://www.evolutionoftheweb.com/

A Brief History of the Web

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

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

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

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

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

Free Video Courses on Node University

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

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

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

React Foundation Course Modules

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

More React Learning Resources

React Native Intro

Intro to React Native

Tools

Github Tutorial

Resources to learn more

React and Redux Resources

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

About

React Component Development FastTrack Training