#react-labs
https://davidmarsland.github.io/react-spike/
https://github.com/davidmarsland/react-labs/
- 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
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
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
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
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!
Here's the Lab Solution Refactored to Functional Online
- https://github.com/sadams/todo-redux-react-webpack
- Clone repo, then:
npm install
npm run start
- Launches on localhost:8080 by default.
- 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!
- Grip server, preview GitHub Markdown files like README.md locally
- https://github.com/joeyespo/grip