Questions about create-react-app public folder reading different files

Question

I'm a beginner on Reactjs ans Javascript.
I read that create-react-app can access the public folder like this to get an image:

  img src={process.env.PUBLIC_URL + '/img/logo.png'} />;

But this also works but cant find documentation about it:

  let photo = '/img/logo.png';

and another thing is if I try to read a json file the same way it fails:

let someJson = process.env.PUBLIC_URL + 'resume.json';

test code

 return (
      <div className="App">
      <header className="App-header">
        <img src={photo} className="App-logo" alt="logo" />
        <p>
         {someJson.basics.name} // FAIL ...
        </p>
      </header>
    </div>
  );

json

{
  "basics": {
    "name": "Foo Bar"
    }
}

Why can I get the image and not the json?

Answer 1

You can import your JSON file inside the component. This is the recommended way, instead of using the public var path which has its downsides.

From the React docs

You can also add other assets to the public folder. Note that we normally encourage you to import assets in JavaScript files instead (...) If you put a file into the public folder, it will not be processed by webpack. Instead it will be copied into the build folder untouched. To reference assets in the public folder, you need to use an environment variable called PUBLIC_URL.

import React from "react";
// resume JSON file is at the same level than this file
import resume from "./resume.json";

export default function App() {
  return (
    <div className="App">
      <p>{resume.basics.name}</p>
    </div>
  );
}

Listed downsides from using %PUBLIC_URL% (in Node) or process.env.PUBLIC_URL (in JavaScript)

• None of the files in public folder get post-processed or minified.
• Missing files will not be called at compilation time, and will cause 404 errors for your users.
• Result filenames won’t include content hashes so you’ll need to add query arguments or rename them every time they change.