React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>



<!--

Imagine that we already have a JSON API (see below data) and a mock from our designer.

The mock looks like this:
https://i.imgur.com/htRHbvG.png

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": "910001181511",
		"extraLargeImageURL":...

Babel + JSX

const data = [{
		"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": "https://ui2.assets-asda.com:443/g/v5/013/762/5054070013762_130_IDShot_4.jpeg"
	}];


class App extends React.Component {

  render() {
    return <div>...