- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
- Related Articles
- How to import other Python files?
- How can we import CSV files into MySQL tables by using mysqlimport?
- Autocomplete and suggestion in ReactJS
- What are the differences between import and static import statements in Java?
- Difference between import tkinter as tk and from tkinter import
- Difference between ReactJS and Vue.js
- Difference between NodeJS and ReactJS
- LocalStorage in ReactJS
- RegEx in ReactJS
- Suspense in ReactJS
- Difference between import and package in Java?
- Conditional Rendering in ReactJS
- Context API in ReactJS
- CSS Loader in ReactJS
- Custom Hooks in ReactJS

Advertisements