Importing multiple files in react

by

I think maybe a better idea is to use an index file for your images folder.

Supposing you have this structure:

Initial folder structure, where all images are on subfolders inside assets/images

And you need to import all of your images to your HomePage component.
You can easily create an index.js file on your images folder, exporting all the images using require, like this:

export const Background = require('./bg/background.jpg');
export const First = require('./photos/first.jpg');
export const Second = require('./photos/second.jpg');
export const LinkedIn = require('./social/linkedin.png');

Then on your component you can import all of them with a single import.

import {
  Background,
  First,
  Second,
  LinkedIn
} from '../../assets/images'

And this would be your final folder structure:
Final folder structure where we have an index.js inside assets/images

Hope it helps! 😉

Updated on 25/04/2021:

If you want to use ES6 named imports:

images/index.js:

import Background from './bg/background.jpg';
import First from './photos/first.jpg';
import Second from './photos/second.jpg';
import LinkedIn from './social/linkedin.png';

export {
  Background,
  First,
  Second,
  LinkedIn
};

More Related Contents:

  1. setState doesn’t update the state immediately
  2. How to update nested state properties in React
  3. Unable to access React instance (this) inside event handler [duplicate]
  4. Adding script tag to React/JSX
  5. Arrow function without curly braces
  6. How to scroll to an element?
  7. When to use ES6 class based React components vs. functional ES6 React components?
  8. Why and when do we need to bind functions and eventHandlers in React?
  9. What does three dots do in ReactJS [duplicate]
  10. React functional stateless component, PureComponent, Component; what are the differences and when should we use what?
  11. How to add multiple classes to a ReactJS Component?
  12. React useState hook event handler using initial state
  13. Can I use arrow function in constructor of a react component?
  14. When should I use brackets with imports
  15. ES6 array map doesn’t return anything: ReactJS
  16. setState() inside of componentDidUpdate()
  17. Why do I have to .bind(this) for methods defined in React component class, but not in regular ES6 class
  18. Why React Hook useState uses const and not let
  19. where is create-react-app webpack config and files?
  20. Unable to use Arrow functions inside React component class [duplicate]
  21. Best way to polyfill ES6 features in React app that uses create-react-app
  22. React.createClass vs. ES6 arrow function
  23. this.setState is not a function [duplicate]
  24. How do you import a javascript package from a cdn/script tag in React?
  25. Error: How to serialize data from getStaticProps : Next.js
  26. What do curly braces mean in JSX (React)?
  27. Update one of the objects in array, in an immutable way
  28. How to namespace es6 classes (for React components)
  29. React functional component default props vs default parameters
  30. Exporting functions with reactjs and babel

Leave a Comment