diff --git a/src/App.js b/src/App.js index 4139cab..7ec2396 100644 --- a/src/App.js +++ b/src/App.js @@ -1,44 +1,25 @@ import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; +import state from './state' +import ProductDetail from './components/ProductDetail'; +import Header from './components/Header'; +import Carousel from './components/Carousel'; +import Footer from './components/Footer'; + +function App(props) { + const productDivs = props.products.map((p, i) =>{ + return ; + }); + console.log("props coming in", props); + console.log("productDivs",productDivs); + -function App() { return (
- - -
+
@@ -52,149 +33,12 @@ 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

-

- - - - - -

-
-
-
+ {productDivs}

Like this template? @@ -210,19 +54,12 @@ function App() {

- +
- -
-
-
-

Copyright © Your Website 2014

-
-
-
+
diff --git a/src/components/Carousel.js b/src/components/Carousel.js new file mode 100644 index 0000000..eda6da5 --- /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..767b4fa --- /dev/null +++ b/src/components/Header.js @@ -0,0 +1,38 @@ +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..d85d405 --- /dev/null +++ b/src/components/ProductDetail.js @@ -0,0 +1,35 @@ +import React from 'react'; + +function ProductDetail(props) { + +const ratings = []; +for (let i =0; i < 5; i++) { + if (i < props.product.rating) { + ratings.push() + } else { + ratings.push() + } +} + + return ( +
+
+ +
+

{props.product.price} +

+

{props.product.name} +

+

{props.product.description}

+
+
+

{props.product.reviews}

+

+ {ratings} +

+
+
+
+ ); +} +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') );