Optimising multiple imports of images in React JS
In this article, we will explore a method for optimizing image importing to improve the readability of your code. 🎨
In React JS, it is common to import a large number of images for use in a component. While this may be necessary, it can also result in a cluttered and difficult to read codebase. In order to improve the readability of the code, it may be helpful to find ways to optimize the image importing process.😢
🎈First create a JS document -> imagesContainer.js, where the image imports will be kept.
🎈Hence, in imagesContainer.js, we create the global variable IMAGES and export it.
🎈After for each of the images in the parent component, it will move the export to imagesContainer.js similar to the following example.
🎈The last step is to access the export of each image in its original component. So we had to import the IMAGES variable, and access the images as in the following image
