diff --git a/README.md b/README.md index 702562e..da63bfa 100644 --- a/README.md +++ b/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 diff --git a/src/App.js b/src/App.js index 059304f..64f29ad 100644 --- a/src/App.js +++ b/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 ( -
-
-
-

React+Redux Shopping Cart Example

-
-
-
-
- -
-
- -
-
- - + return ( +
+
+
+

React+Redux Shopping Cart Example

+
+
+
+
+
- ); -} +
+ +
+
+ + +
+ ); +}; export default App; diff --git a/src/components/Cart/Cart.js b/src/components/Cart/Cart.js index 856c7ca..976cae3 100644 --- a/src/components/Cart/Cart.js +++ b/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 ( -
-

Shopping Cart

+ return ( +
+

Shopping Cart

-
-
-
- {items.length > 0 && ( -
- {items.map(item => ( - removeFromCart(item.id)} /> - ))} -
- )} - {items.length === 0 && ( -
Cart is empty
- )} -
Total: {total} {currency}
-
-
+
+
+
+ {items.length > 0 && ( +
+ {items.map((item) => ( + removeFromCart(item.id)} + /> + ))} +
+ )} + {items.length === 0 && ( +
Cart is empty
+ )} +
+ Total: {total} {currency}
+
- ); -} +
+
+ ); +}; 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; diff --git a/src/components/Cart/CartItem.js b/src/components/Cart/CartItem.js index fb22c2b..a85a45c 100644 --- a/src/components/Cart/CartItem.js +++ b/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 ( -
-
- - {name} -
-
{price} {currency}
-
- ); -} + return ( +
+
+ + {name} +
+
+ {price} {currency} +
+
+ ); +}; 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; diff --git a/src/components/Product/Product.js b/src/components/Product/Product.js index 2aa71b9..2a56c36 100644 --- a/src/components/Product/Product.js +++ b/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 ( -
- product -
-

{name}

-
{price} {currency}
-
- -
-
-
- ); - } + return ( +
+ product +
+

{name}

+
+ {price} {currency} +
+
+ +
+
+
+ ); + } } 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; diff --git a/src/components/ProductList/ProductList.js b/src/components/ProductList/ProductList.js index 4fddd6e..2d68bf5 100644 --- a/src/components/ProductList/ProductList.js +++ b/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 ( -
-

Products

-
    - {products.map(product => ( -
  • - -
    • - ))} -
-
- ); -} + return ( +
+

Products

+
    + {products.map((product) => ( +
  • + +
    • + ))} +
+
+ ); +}; ProductList.propTypes = { - products: PropTypes.array, -} + products: PropTypes.array, +}; export default ProductList; diff --git a/src/index.js b/src/index.js index 61f1b40..881840f 100644 --- a/src/index.js +++ b/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( - - - , - document.getElementById('root') + + + , + document.getElementById("root") );