davidmarsland / react-labs

React Dev Labs

#react-labs

React Dev Labs

These labs augment the React and Redux course at

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

Lab solutions are available here:

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

---

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
• Then create helloworld app
• https://www.kirupa.com/react/setting_up_react_environment.htm
• Starter Create React App Online
• Helloworld App Online

---

Tutorial Labs: Intro to React

Facebook React Tutorial

---

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

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

---

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

---

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

Here's the Lab Solution Online

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

---

Alternative Approach: Refactor to use Functional Classes

Here's the Lab Solution Refactored to Functional Online

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.

---

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!

---

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

---

Useful Tools

• Grip server, preview GitHub Markdown files like README.md locally
• https://github.com/joeyespo/grip