Created
October 13, 2019 03:33
-
-
Save vicradon/33414971e024ba091fdc953912497ab0 to your computer and use it in GitHub Desktop.
Product Components Challenge in Scrimba React Tut
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div id="root"></div> | |
| <script src="index.pack.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* APP.JS */ | |
| import React from "react" | |
| import productsData from "./vschoolProducts" | |
| import Product from "./Product" | |
| function App() { | |
| const productComponents = productsData.map(prod => <Product key = {prod.id} name = {prod.name} description = {prod.description} />) | |
| return ( | |
| <div> | |
| { productComponents } | |
| </div> | |
| ) | |
| } | |
| export default App | |
| /* PRODUCT.JS */ | |
| import React from "react"; | |
| const Product = props => { | |
| const {name, description} = props; | |
| return ( | |
| <div> | |
| <p>Name: {name}</p> | |
| <p>Description: {description}</p> | |
| </div> | |
| ) | |
| } | |
| export default Product; | |
| /* INDEX.JS */ | |
| import React from 'react' | |
| import ReactDOM from 'react-dom' | |
| import App from "./App" | |
| ReactDOM.render(<App />, document.getElementById('root')) | |
| /* vschoolProducts.js */ | |
| const products = [ | |
| { | |
| id: "1", | |
| name: "Pencil", | |
| price: 1, | |
| description: "Perfect for those who can't remember things! 5/5 Highly recommend." | |
| }, | |
| { | |
| id: "2", | |
| name: "Housing", | |
| price: 0, | |
| description: "Housing provided for out-of-state students or those who can't commute" | |
| }, | |
| { | |
| id: "3", | |
| name: "Computer Rental", | |
| price: 300, | |
| description: "Don't have a computer? No problem!" | |
| }, | |
| { | |
| id: "4", | |
| name: "Coffee", | |
| price: 2, | |
| description: "Wake up!" | |
| }, | |
| { | |
| id: "5", | |
| name: "Snacks", | |
| price: 0, | |
| description: "Free snacks!" | |
| }, | |
| { | |
| id: "6", | |
| name: "Rubber Duckies", | |
| price: 3.50, | |
| description: "To help you solve your hardest coding problems." | |
| }, | |
| { | |
| id: "7", | |
| name: "Fidget Spinner", | |
| price: 21.99, | |
| description: "Because we like to pretend we're in high school." | |
| }, | |
| { | |
| id: "8", | |
| name: "Sticker Set", | |
| price: 14.99, | |
| description: "To prove to other devs you know a lot." | |
| } | |
| ] | |
| export default products |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment