Skip to content

davidmarsland/react-spike

BranchesTags

Repository files navigation

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:

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.

<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

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

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

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

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

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

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

React Foundation Course Modules

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

npm install
npm run start
  • Launches on localhost:8080 by default.

Redux Labs

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

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

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

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

Lab: Adding React Router

React Router

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

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

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

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/

About

davidmarsland.github.io/react-spike/

Topics

react redux-course

Resources

Readme
Activity

Stars

0 stars

Watchers

2 watching

Forks

1 fork
Report repository

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •  

Languages