Remove react import

README.md

@@ -1,27 +1,35 @@
-# react.js shopping cart
+# ReactJS shopping cart
 
-example of shopping cart implemented in react.js and redux.js
+Example of shopping cart implemented in ReactJS and ReduxJS
 
-for demo [click here](http://krzysu.github.io/reactjs-shopping-cart/)
+For demo [click here](http://krzysu.github.io/reactjs-shopping-cart/)
 
-## getting started
+## Getting started
 
-install dependencies and start local dev server
+install dependencies
 
 ```sh
 npm install
+```
+
+start local dev server
+
+```sh
 npm start
 ```
 
 ## details
+
 - build with [create react app](https://github.com/facebookincubator/create-react-app). Check their page for more details.
 - this example is using redux.js for application state management, to learn more about it I recommend [this tutorial](https://egghead.io/courses/getting-started-with-redux).
 - you can look under the hood directly from your browser using [redux devtools](https://github.com/zalmoxisus/redux-devtools-extension). Install extension for your browser, open demo page (link above) and see how app state changes when you interact with it.
 - if you wonder why reducers, actions and selectors are all in one file inside folder called `ducks`, [read more here](https://github.com/erikras/ducks-modular-redux).
 
 ## TODO
+
 - add reducers and selectors unit tests
 
-* * *
-author: Kris Urbas [@krzysu](https://twitter.com/krzysu)   
+---
+
+author: Kris Urbas [@krzysu](https://twitter.com/krzysu)  
 licence: MIT

src/App.js

@@ -1,31 +1,32 @@
-import React from 'react';
-import Cart from './containers/Cart';
-import ProductList from './containers/ProductList';
+import Cart from "./containers/Cart";
+import ProductList from "./containers/ProductList";
 
 const App = () => {
-    return (
-        <div className="container">
-            <div className="row">
-                <div className="col-md-12">
-                    <h1>React+Redux Shopping Cart Example</h1>
-                </div>
-            </div>
-            <div className="row">
-                <div className="col-md-8">
-                    <ProductList />
-                </div>
-                <div className="col-md-4">
-                    <Cart />
-                </div>
-            </div>
-
-            <footer>
-                <small>
-                    made by <a href="https://twitter.com/krzysu">Kris Urbas</a>, source code available on <a href="https://github.com/krzysu/reactjs-shopping-cart">github</a>
-                </small>
-            </footer>
+  return (
+    <div className="container">
+      <div className="row">
+        <div className="col-md-12">
+          <h1>React+Redux Shopping Cart Example</h1>
+        </div>
+      </div>
+      <div className="row">
+        <div className="col-md-8">
+          <ProductList />
         </div>
-    );
-}
+        <div className="col-md-4">
+          <Cart />
+        </div>
+      </div>
+
+      <footer>
+        <small>
+          made by <a href="https://twitter.com/krzysu">Kris Urbas</a>, source
+          code available on{" "}
+          <a href="https://github.com/krzysu/reactjs-shopping-cart">github</a>
+        </small>
+      </footer>
+    </div>
+  );
+};
 
 export default App;

src/components/Cart/Cart.js

@@ -1,38 +1,43 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import CartItem from './CartItem';
+import PropTypes from "prop-types";
+import CartItem from "./CartItem";
 
 const Cart = ({ items, total, currency, removeFromCart }) => {
-    return (
-        <div>
-            <h3>Shopping Cart</h3>
+  return (
+    <div>
+      <h3>Shopping Cart</h3>
 
-            <div className="cart">
-                <div className="panel panel-default">
-                    <div className="panel-body">
-                        {items.length > 0 && (
-                            <div className="cart__body">
-                                {items.map(item => (
-                                    <CartItem key={item.id} {...item} onClick={() => removeFromCart(item.id)} />
-                                ))}
-                            </div>
-                        )}
-                        {items.length === 0 && (
-                            <div className="alert alert-info">Cart is empty</div>
-                        )}
-                        <div className="cart__total">Total: {total} {currency}</div>
-                    </div>
-                </div>
+      <div className="cart">
+        <div className="panel panel-default">
+          <div className="panel-body">
+            {items.length > 0 && (
+              <div className="cart__body">
+                {items.map((item) => (
+                  <CartItem
+                    key={item.id}
+                    {...item}
+                    onClick={() => removeFromCart(item.id)}
+                  />
+                ))}
+              </div>
+            )}
+            {items.length === 0 && (
+              <div className="alert alert-info">Cart is empty</div>
+            )}
+            <div className="cart__total">
+              Total: {total} {currency}
             </div>
+          </div>
         </div>
-    );
-}
+      </div>
+    </div>
+  );
+};
 
 Cart.propTypes = {
-    items: PropTypes.array,
-    total: PropTypes.number,
-    currency: PropTypes.string,
-    removeFromCart: PropTypes.func.isRequired
-}
+  items: PropTypes.array,
+  total: PropTypes.number,
+  currency: PropTypes.string,
+  removeFromCart: PropTypes.func.isRequired,
+};
 
 export default Cart;

src/components/Cart/CartItem.js

@@ -1,23 +1,26 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
 
 const CartItem = ({ name, price, currency, onClick }) => {
-    return (
-        <div className="cart-item">
-            <div>
-                <button className="btn btn-danger btn-xs" onClick={onClick}>X</button>
-                <span className="cart-item__name">{name}</span>
-            </div>
-            <div className="cart-item__price">{price} {currency}</div>
-        </div>
-    );
-}
+  return (
+    <div className="cart-item">
+      <div>
+        <button className="btn btn-danger btn-xs" onClick={onClick}>
+          X
+        </button>
+        <span className="cart-item__name">{name}</span>
+      </div>
+      <div className="cart-item__price">
+        {price} {currency}
+      </div>
+    </div>
+  );
+};
 
 CartItem.propTypes = {
-    name: PropTypes.string.isRequired,
-    price: PropTypes.number.isRequired,
-    currency: PropTypes.string.isRequired,
-    onClick: PropTypes.func.isRequired
-}
+  name: PropTypes.string.isRequired,
+  price: PropTypes.number.isRequired,
+  currency: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired,
+};
 
 export default CartItem;

src/components/Product/Product.js

@@ -1,49 +1,51 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import { Component } from "react";
+import PropTypes from "prop-types";
 
 class Product extends Component {
-    handleClick = () => {
-        const { id, addToCart, removeFromCart, isInCart } = this.props;
+  handleClick = () => {
+    const { id, addToCart, removeFromCart, isInCart } = this.props;
 
-        if (isInCart) {
-            removeFromCart(id);
-        } else {
-            addToCart(id);
-        }
+    if (isInCart) {
+      removeFromCart(id);
+    } else {
+      addToCart(id);
     }
+  };
 
-    render() {
-        const { name, price, currency, image, isInCart } = this.props;
+  render() {
+    const { name, price, currency, image, isInCart } = this.props;
 
-        return (
-            <div className="product thumbnail">
-                <img src={image} alt="product" />
-                <div className="caption">
-                    <h3>{name}</h3>
-                    <div className="product__price">{price} {currency}</div>
-                    <div className="product__button-wrap">
-                        <button
-                            className={isInCart ? 'btn btn-danger' : 'btn btn-primary'}
-                            onClick={this.handleClick}
-                        >
-                            {isInCart ? 'Remove' : 'Add to cart'}
-                        </button>
-                    </div>
-                </div>
-            </div>
-        );
-    }
+    return (
+      <div className="product thumbnail">
+        <img src={image} alt="product" />
+        <div className="caption">
+          <h3>{name}</h3>
+          <div className="product__price">
+            {price} {currency}
+          </div>
+          <div className="product__button-wrap">
+            <button
+              className={isInCart ? "btn btn-danger" : "btn btn-primary"}
+              onClick={this.handleClick}
+            >
+              {isInCart ? "Remove" : "Add to cart"}
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
 }
 
 Product.propTypes = {
-    id: PropTypes.number.isRequired,
-    name: PropTypes.string.isRequired,
-    price: PropTypes.number,
-    currency: PropTypes.string,
-    image: PropTypes.string,
-    isInCart: PropTypes.bool.isRequired,
-    addToCart: PropTypes.func.isRequired,
-    removeFromCart: PropTypes.func.isRequired,
-}
+  id: PropTypes.number.isRequired,
+  name: PropTypes.string.isRequired,
+  price: PropTypes.number,
+  currency: PropTypes.string,
+  image: PropTypes.string,
+  isInCart: PropTypes.bool.isRequired,
+  addToCart: PropTypes.func.isRequired,
+  removeFromCart: PropTypes.func.isRequired,
+};
 
 export default Product;

src/components/ProductList/ProductList.js

@@ -1,24 +1,23 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Product from '../../containers/Product';
+import PropTypes from "prop-types";
+import Product from "../../containers/Product";
 
 const ProductList = ({ products }) => {
-    return (
-        <div>
-            <h3>Products</h3>
-            <ul className="product-list">
-              {products.map(product => (
-                  <li key={product.id} className="product-list__item">
-                    <Product {...product} />
-                  </li>
-              ))}
-            </ul>
-        </div>
-    );
-}
+  return (
+    <div>
+      <h3>Products</h3>
+      <ul className="product-list">
+        {products.map((product) => (
+          <li key={product.id} className="product-list__item">
+            <Product {...product} />
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
 
 ProductList.propTypes = {
-    products: PropTypes.array,
-}
+  products: PropTypes.array,
+};
 
 export default ProductList;

src/index.js

@@ -1,29 +1,28 @@
-import React from 'react';
-import { render } from 'react-dom';
-import { Provider } from 'react-redux';
-import { combineReducers, createStore } from 'redux';
-import cartReducer from './ducks/cart';
-import productsReducer from './ducks/products';
-import App from './App';
-import productsData from './data/products';
-import 'bootstrap/dist/css/bootstrap.css';
+import { render } from "react-dom";
+import { Provider } from "react-redux";
+import { combineReducers, createStore } from "redux";
+import cartReducer from "./ducks/cart";
+import productsReducer from "./ducks/products";
+import App from "./App";
+import productsData from "./data/products";
+import "bootstrap/dist/css/bootstrap.css";
 
 const rootReducer = combineReducers({
-    cart: cartReducer,
-    products: productsReducer
+  cart: cartReducer,
+  products: productsReducer,
 });
 
 let store = createStore(
-    rootReducer,
-    {
-        products: productsData // initial store values
-    },
-    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() // for debugging
+  rootReducer,
+  {
+    products: productsData, // initial store values
+  },
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() // for debugging
 );
 
 render(
-    <Provider store={store}>
-        <App />
-    </Provider>,
-    document.getElementById('root')
+  <Provider store={store}>
+    <App />
+  </Provider>,
+  document.getElementById("root")
 );