React
  • Introduction
  • Getting Started
    • Introduction
    • Before you get started
  • 1. Fundamentals
    • Introduction
    • Rendering
      • JSX
      • Exercise
      • Solution
    • Components
      • Stateless
        • Exercise
        • Solution
      • Stateful
        • Exercise
        • Solution
      • Styling
        • Exercise
        • Solution
        • Using CSS Modules
    • Folder Architecture
  • 2. Intermediate
    • Lifecycle methods
    • Controlled and Uncontrolled components
    • Anti-patterns
    • Refs and the DOM
    • Lifting State Up
  • 3. Advanced Topics
    • Conventions
    • Reconciliation
    • Performance Optimizations
      • Avoiding Reconciliation
      • PureComponent
      • Avoiding inline lambdas
      • Development vs Production build
    • Context
  • 4. Advanced Patterns
    • Higher-order Components
    • Children as Function
    • Renderless Components
    • Portals
    • Error handling
  • Exercises
    • Introduction
    • 1. ProductList light
      • Step 1
      • Step 2
      • Step 3
      • Step 4
      • Extra
      • Solution
Powered by GitBook
On this page
  • 1. Setup create-react-app
  • 2. Download product list as JSON
  1. Exercises
  2. 1. ProductList light

Step 1

1. Setup create-react-app

Take a look at the Getting started page and make sure you have create-react-app up and running.

2. Download product list as JSON

  • Find your favorite Shopify store, eg. Chubbies and download the list of products as JSON by going to the /products.json URL.

  • Add the downloaded file to your project, you will be able to import it as JSON in your code by doing:

// App.js
import products from './products.json';

⚠️ Importing a JSON file is made possible here because you are using create-react-app. Under the hood, create-react-app has a webpack configuration that allows you to import JSON file.

Previous1. ProductList lightNextStep 2

Last updated 6 years ago