Import Files and Images in ReactJS

In this article, we are going to see how to import CSS Files, images and functions defined in other folder to the main App.js file.

In React, we need to dynamically import the images from their folder.

Example

In this example, we will define a project structure with the images and components already defined in the assets and components folder and then we are going to dynamically import them in our main App.js file.

Project Structure

App.js

import React from 'react';
import MyComponent from './components/my -component.js';
import TutorialsPoint from './assets/img.png';

const App = () => {
   return (
      <div>
      <img src={TutorialsPoint} />
      <MyComponent />
      </div>
   );
};
export default App;

my-component.js

import React from 'react';

const MyComponent = () => {
   return <div>Hii! This is the custom MyComponent</div>;
};

export default MyComponent;

Output

This will produce the following result.

Rahul Bansal

Updated on 18-Mar-2021 11:01:08

• Related Questions & Answers
• How to import other Python files?
• Autocomplete and suggestion in ReactJS
• Difference between ReactJS and Vue.js
• Difference between NodeJS and ReactJS
• Difference between import tkinter as tk and from tkinter import
• How can we import CSV files into MySQL tables by using mysqlimport?
• What are the differences between import and static import statements in Java?
• LocalStorage in ReactJS
• RegEx in ReactJS
• Suspense in ReactJS
• Difference between import and package in Java?
• Conditional Rendering in ReactJS
• CSS Loader in ReactJS
• Context API in ReactJS
• Custom Hooks in ReactJS