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.