How to use files in public folder in ReactJS ?

In React, the files store public folder contains static files such as index.html, javascript library files, images, and other assets, etc. which you don't want to be processed by Webpack. Files in this folder are copied and pasted as they are directly into the build folder. Files inside the `public` folder can only be referenced from the HTML.

Understanding the Public Folder

When you create a React app using create-react-app, a public folder is automatically generated. This folder is where you store static files that should be publicly accessible.

The typical contents of the public folder include:

• index.html: The template for your app's main HTML file.
• favicon.ico: The small icon that appears on the browser tab.
• Other static files like images, PDFs, or custom stylesheets.

Steps to Create a React Application

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Project Structure:

The project structure will look like the following after creating the assets folder with gfg.png file sample. Also, we have kept the gfgPublic.png file in the public folder.

// App.js  file

import Intro from './components/Intro';
import './App.css';

function App() {
  return (
    <div className="App">
      <Intro />
    </div>
  );
}

export default App;

// Intro.js file

import gfgLogo from "../assets/gfg.png";

const Intro = () => {
    return (
        <div className="App">
            Image at src/assets/gfg.png : <br />
            <img src={gfgLogo} />
            <br />
            Image at public/gfgPublic.png: <br />
            <img
                src={
                    process.env.PUBLIC_URL + "/logo512.png"
                }
            />
            <br />
        </div>
    );
};

export default Intro;

# .env file

PUBLIC_URL = "./public/" 

Output

Console window shows the external import of the png.

Conclusion

We can use the .env file to use the files from public directory. Store the files url as env variables and use in the js files as required. The alternate methods for this task invloves using the assets as static of referencing script files in public/index.html.