Better way to import components in large react/react native projects

Image Credits: Medium/Rooney Reeves

A Component is the basic building block of React. They are independent reusable bits of code and comes in two types - Class and Functional components.

Ok, now let’s get straight to the point and discuss how to structure your project when you have a large number of components when you are working on a large project.

Generally when you are using components in a particular screen or file, we import it like so:

which will look cluttered when the codebase grows.

For better readability, we can create an index.js file in our root component directory and export all the components as named export like below:

Now, we can write our screens file like below:

And with this approach, in a single line you can import multiple components if you want to access them, instead of having multiple import statements.