We all have sometime imported files or components like this in multiple lines, this would be okay if there is only one component or file to be imported, but as the codebase grows, writing import statements for every single file would get tedious as we're just repeating ourselves.
We're importing the components using the relative paths by leaving the
src folder and going into the
components folder and then going into the specific component folder.
We could easily replace that by importing all the files from their respective folder in a single line like this using non-relative import.
Note: In the first image components are exported using default export and in the latter image non default export is used.
Each component gets it's own folder because components have several files involved like
css or sometimes even more so it makes sense to do have a separate folder for each one.
It would look something like this with the
component file, a
css file and
index.js file for exporting the component
In the root of
components folder we need to define an
index.js file which will export all the
components defined in it.
We can also use our import our components inside other component files using the same non-relative paths like this.
By using this way we can reduce our cleanly import our files.