Good way to import your components to Base component in ReactJS

So this blog is about how to import all our components to our base component in a proper manner.

Let's get started with this:-

When we start learning react at first we create our components inside the components folder, export it from there and then we import the required components to our base component directly.

Let us see an example here:-

Here the base component which is App.js is right inside the srcfolder and I have created a folder named components inside which each component have their separate folder which contains the actual component file and a css file for that component. So you can get an idea looking at the image above.

You can see in the above image each component is imported in separate lines. So here I have imported around 8-9 components so it is looking like this but imagine if you are having more than 20 components now, now what? half of your file is just filled with import statements and that doesn't look good.

So to avoid this what you have to do is create a file named index.js right inside your component folder and export each and every component from this file like this :-

If you can export all the components like this then it will be directly imported from the components folder to your base component like this:-

In the above image you can see that now it is looking good as compared to previous method and yes when you auto import a component it will automatically come inside the import block of the components, so no need to worry about that.

So this is it, like this you can import your components properly.

Thank you for reading this blog:

- Mayuresh Kunder