7.ICE.1: Product Rendering

Search…

Introduction
Render an array of objects using JSX.
Setup
1.Begin with the base Webpack repo: https://github.com/rocketacademy/webpack-mvc-base-bootcamp.git​
2.Follow the instructions in Module 7.1: JSX Intro to set up Webpack for React.
3.Copy the contents of this JSON file into index.jsx. Conversely, you can also make a module for this data if you want.
1.This means copying the data and pasting it into a new data.json file
2.In your index.jsx file, import the data with import data from './data.json'
Base
Render the data in the array onto the screen. The HTML should look like this:
(R_emember to add the 'key' attribute for your mapped element!)_
<ul>
  <li>
    <p>id: 1</p>
    <p>name: Car</p>
    <p>description: The Apollotech B340 is an affordable wireless mouse with reliable connectivity, 12 months battery life and modern design</p>
    <p>created: 2020-12-28T09:02:15.112Z</p>
    <p>updated: 2020-12-28T09:02:15.112Z</p>
  </li>
  [...]
</ul>
Comfortable
1.Install Moment.js and format the dates to time from now.​
2.Use CSS so that the background colour of the items alternate between white and grey.

7.ICE: In-Class Exercises

7.ICE.2: Pokedex

Last modified 3mo ago

Copy link

Outline