You can create an online shop using React. In this example we don't have a backend from where we load the data, but we have a JavaScript file with some hardcoded products. The YouTube link where I created the project is: https://youtu.be/wEvW5wlHjEA Here we have some products that will be used in our application: ``` let productList = [ { "id":"2e36e6a6-21f5-46af-a16f-9b9d57fc9dcf", "name":"Handcrafted Fresh Towels", "price":"$223.00", "shortDescription":"Officiis ab optio consequuntur quidem et excepturi debitis.", "description":"Dolorem omnis qui omnis. Dolores occaecati autem aliquam nihil in non repellendus. Asperiores vel qui voluptatem qui aliquid. Vel sunt eos porro qui sed aliquam autem amet. Ea iure fugit animi est qui neque.", "image":"https://picsum.photos/id/1/500/500/", "category":"Music" }, { "id":"30f4b1e9-4db7-4e01-8f95-f12d023e24df", "name":"Incredible Rubber Mouse", "price":"$125.00", "shortDescription":"Quia facere odit voluptate.", "description":"Necessitatibus minus repellendus quo aut voluptatem et. Et earum non sequi sed aut nulla. Sit velit ratione totam nemo qui ipsam delectus aut aut. Expedita voluptas aut dolores est fuga.", "image":"https://picsum.photos/id/10/500/500/", "category":"Garden" }, { "id":"25164bd3-552c-402f-9b56-94306726e812", "name":"Handcrafted Frozen Chair", "price":"$133.00", "shortDescription":"Ex magni rerum voluptas.", "description":"Aliquid animi et iste eos aperiam necessitatibus est. Eum consectetur velit veritatis sequi praesentium voluptatem eum. Vel est sapiente quae. Non quas nam id adipisci hic voluptatem et. Amet nam adipisci consequatur quo molestias doloremque molestias.", "image":"https://picsum.photos/id/100/500/500/", "category":"Health" }, { "id":"1009923d-e700-4a56-affc-6d39360547e8", "name":"Gorgeous Frozen Salad", "price":"$251.00", "shortDescription":"Eaque velit eum ut ad.", "description":"Placeat in magni recusandae velit dignissimos reprehenderit ea. Harum cumque alias enim quia consequatur et tenetur.", "image":"https://picsum.photos/id/1000/500/500/", "category":"Kids" }, { "id":"985e78f7-371f-4d8d-9482-f35ca105403e", "name":"Handcrafted Cotton Ball", "price":"$267.00", "shortDescription":"Est voluptates est ex fuga et itaque.", "description":"Qui iusto dicta enim pariatur. Eveniet minus reprehenderit rerum occaecati quis sed rem sunt saepe. Alias sapiente officiis in. Quia necessitatibus aspernatur aut magni quasi. Est in enim mollitia est sunt officiis modi et sit. Nam necessitatibus veritatis repellendus deleniti maiores dignissimos.", "image":"https://picsum.photos/id/1001/500/500/", "category":"Movies" } ]; ``` In the App component we add the list of products, using the following code: ```

{productList.map(product => (

{product.name}

{product.description}

{product.price}

Add to cart

))}

``` Also, in the App component we add a random product: ``` const randomItem = Math.floor(Math.random() * productList.length); const promotedProduct = productList[randomItem]; promotedProduct.newPrice = Math.round(parseInt(promotedProduct.price.substring(1)) / 2); const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; const today = new Date(); const monthName = monthNames[today.getMonth()]; const formatedDate = `${today.getDate()} ${monthName}`; ``` The HTML for the random product is: ```

Don't miss today's hot deal!

{promotedProduct.name}

{promotedProduct.shortDescription}

{promotedProduct.price}

${promotedProduct.newPrice} only on {" "} {formatedDate}

Buy now

``` If you liked this article, you can check our website for more articles, courses and books: https://frontendbytes.com/

frontend_bytes

Create an online shop using React - part 1

Join Our Newsletter. No Spam, Only the good stuff.