React Base Fiddle (JSX)
Starting point for creating JSFiddles with React. This uses React with Addons.
by Fabio Dan
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<div id="container"></div>
<!--
Imagine that we already have a JSON API (see below data) and a mock from our designer.
The mock looks like this:
https://imgur.com/htRHbvG
Create a product listing component in ReactJS using the data below.
Please talk about your thought process when building the component.
{
"statusCode": "0",
"statusMessage": "The API View Merchandised Content was executed successfully",
"metadescription": "Fruit",
"skus": [{
"productURL": "https://groceries.asda.com:443/api/items/view?itemid=910000374507",
"id": "910000374507",
"extraLargeImageURL": "https://ui1.assets-asda.com:443/g/v5/981/313/5051413981313_280_IDShot_3.jpeg",
"name": "ASDA Grower's Selection Satsumas",
"price": "£1.00",
"imageURL": "https://ui2.assets-asda.com:443/g/v5/981/313/5051413981313_130_IDShot_4.jpeg"
}, {
"productURL": "https://groceries.asda.com:443/api/items/view?itemid=1121465",
"id": "1121465",
"extraLargeImageURL": "https://ui1.assets-asda.com:443/g/v5/677/308/5051413677308_280_IDShot_3.jpeg",
"name": "ASDA Grower's Selection Ripen at Home Kiwi Fruit",
"price": "£0.75",
"imageURL": "https://ui2.assets-asda.com:443/g/v5/677/308/5051413677308_130_IDShot_4.jpeg"
}, {
"productURL": "https://groceries.asda.com:443/api/items/view?itemid=910000911005",
"id": "910000911005",
"extraLargeImageURL": "https://ui3.assets-asda.com:443/g/v5/013/823/5054070013823_280_IDShot_3.jpeg",
"name": "ASDA Chosen by Kids Pears",
"price": "£1.00",
"imageURL": "https://ui2.assets-asda.com:443/g/v5/013/823/5054070013823_130_IDShot_4.jpeg"
}, {
"productURL": "https://groceries.asda.com:443/api/items/view?itemid=910001181511",
"id":...Babel + JSX
var res = {
"statusCode": "0",
"statusMessage": "The API View Merchandised Content was executed successfully",
"metadescription": "Fruit",
"skus": [{
"productURL": "https://groceries.asda.com:443/api/items/view?itemid=910000374507",
"id": "910000374507",
"extraLargeImageURL": "https://ui1.assets-asda.com:443/g/v5/981/313/5051413981313_280_IDShot_3.jpeg",
"name": "ASDA Grower's Selection Satsumas",
"price": "£1.00",
"imageURL": "https://ui2.assets-asda.com:443/g/v5/981/313/5051413981313_130_IDShot_4.jpeg"
}, {
"productURL": "https://groceries.asda.com:443/api/items/view?itemid=1121465",
"id": "1121465",
"extraLargeImageURL": "https://ui1.assets-asda.com:443/g/v5/677/308/5051413677308_280_IDShot_3.jpeg",
"name": "ASDA Grower's Selection Ripen at Home Kiwi Fruit",
"price": "£0.75",
"imageURL": "https://ui2.assets-asda.com:443/g/v5/677/308/5051413677308_130_IDShot_4.jpeg"
}, {
"productURL": "https://groceries.asda.com:443/api/items/view?itemid=910000911005",
"id": "910000911005",
"extraLargeImageURL": "https://ui3.assets-asda.com:443/g/v5/013/823/5054070013823_280_IDShot_3.jpeg",
"name": "ASDA Chosen by Kids Pears",
"price": "£1.00",
"imageURL": "https://ui2.assets-asda.com:443/g/v5/013/823/5054070013823_130_IDShot_4.jpeg"
}, {
"productURL": "https://groceries.asda.com:443/api/items/view?itemid=910001181511",
"id": "910001181511",
"extraLargeImageURL": "https://ui1.assets-asda.com:443/g/v5/013/755/5054070013755_280_IDShot_3.jpeg",
"name": "ASDA Chosen By Kids Easy Peasy Peelers",
"price": "£1.00",
"imageURL": "https://ui2.assets-asda.com:443/g/v5/013/755/5054070013755_130_IDShot_4.jpeg"
}, {
"productURL": "https://groceries.asda.com:443/api/items/view?itemid=910000911861",
"id": "910000911861",
"extraLargeImageURL": "https://ui3.assets-asda.com:443/g/v5/013/762/5054070013762_280_IDShot_3.jpeg",
"name": "ASDA Chosen by Kids Apples",
"price": "£0.95",
"imageURL":...