diff --git a/src/App.js b/src/App.js index 4139cab..6903e94 100644 --- a/src/App.js +++ b/src/App.js @@ -1,46 +1,26 @@ import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; - -function App() { +import Header from './components/Header'; +import State from './state'; +import ProductDetail from './components/ProductDetail'; +import Carousel from './components/Carousel'; +import Footer from './components/Footer'; + +function App(props) { + let productDivs = props.products.map( (p, idx) => { + return + }); + console.log(productDivs); + console.log(props.products[0].name); return (
- - - -
+
+ +
-
+

Shop Name

@@ -52,156 +32,11 @@ function App() {
+ -
- -
- -
- -
- -
-
- -
-

$24.99

-

First Product -

-

See more snippets like this online store item at Bootsnipp - http://bootsnipp.com.

-
-
-

15 reviews

-

- - - - - -

-
-
-
- -
-
- -
-

$64.99

-

Second Product -

-

This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-

12 reviews

-

- - - - - -

-
-
-
- -
-
- -
-

$74.99

-

Third Product -

-

This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-

31 reviews

-

- - - - - -

-
-
-
- -
-
- -
-

$84.99

-

Fourth Product -

-

This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-

6 reviews

-

- - - - - -

-
-
-
- -
-
- -
-

$94.99

-

Fifth Product -

-

This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-

18 reviews

-

- - - - - -

-
-
-
- -
-

Like this template? -

-

If you like this template, then check out this tutorial on how to build a working review system for your online store!

- View Tutorial -
+ {productDivs}
@@ -210,23 +45,16 @@ function App() {
- +
+
+ - -
-
-
-

Copyright © Your Website 2014

-
-
-
); } - export default App; diff --git a/src/components/Carousel.js b/src/components/Carousel.js new file mode 100644 index 0000000..3150b7f --- /dev/null +++ b/src/components/Carousel.js @@ -0,0 +1,37 @@ +import React from 'react'; + +function Carousel(){ + return ( +
+ +
+ +
+ +
+ ) +} +export default Carousel; diff --git a/src/components/Footer.js b/src/components/Footer.js new file mode 100644 index 0000000..7d0e1a0 --- /dev/null +++ b/src/components/Footer.js @@ -0,0 +1,14 @@ +import React from 'react'; + +function Footer() { + return ( +
+
+
+

Copyright © Your Website 2014

+
+
+
+ ) +} +export default Footer; diff --git a/src/components/Header.js b/src/components/Header.js new file mode 100644 index 0000000..572c1d6 --- /dev/null +++ b/src/components/Header.js @@ -0,0 +1,36 @@ +import React from 'react'; + +function Header () { + return ( + + + ); +} +export default Header; diff --git a/src/components/ProductDetail.js b/src/components/ProductDetail.js new file mode 100644 index 0000000..0a0342f --- /dev/null +++ b/src/components/ProductDetail.js @@ -0,0 +1,34 @@ +import React from 'react'; + +function ProductDetail(props) { +let ratingsArr = []; +for(let i = 0; i < 5; i++){ + if(i < props.product.rating) { + ratingsArr.push() + } else { + ratingsArr.push() + } +} +if(props.product.rating) + + return ( +
+
+ +
+

{props.product.price}

+

{props.product.name} +

+

See more snippets like this online store item at Bootsnipp - http://bootsnipp.com.

+
+
+

{props.product.reviews} reviews

+

+ {ratingsArr} +

+
+
+
+ ) +} +export default ProductDetail; diff --git a/src/index.js b/src/index.js index e58303d..c51978f 100644 --- a/src/index.js +++ b/src/index.js @@ -5,6 +5,6 @@ import './index.css'; import state from './state'; ReactDOM.render( - , + , document.getElementById('root') ); diff --git a/src/state.js b/src/state.js index b54e269..3a3b875 100644 --- a/src/state.js +++ b/src/state.js @@ -80,4 +80,4 @@ export default { "imgUrl": "http://dummyimage.com/189x109.png/cc0000/ffffff", "price": "$74.37" }] -} \ No newline at end of file +};