Note: This document is a work in progress. You can help improve it.

React Assets

Using import to load assets

React apps use Webpack

Webpack is a tool for packaging assets

  • JavaScript
  • JSON (JavaScript Object Notation)
    • a lightweight data-interchange format, representing javascript object in text
    • It is easy for humans to read and write. It is easy for machines to parse and generate
  • Images
  • Fonts
  • CSS

Webpack comes with various loaders to able to import various data types

Webpack pulls from our source and helps generate JavaScript for the browser

When we import an image

import photo from "./skywalker.png";
We get a string representing the path to the image to use in code
render() {
return (
<img src={photo}/>

When we import a JSON file

import octocats from `./cats.json`
We get a JSON object we can access and use
render() {
const cats = => {
return <Octocat name={} image={cat.image}/>
return (