How to improve imports in your code

tsuyusk

Rafael Sant'Ana

Posted on July 13, 2021

How to improve imports in your code

Hello, there!

After a while without new posts, I decided to come back with a really useful tip to simplify your code and reduce repetition.

Have you ever saw a code like this ?
many_imports
Wouldn't It be great if we could simply shorten it to this ?
simplified_imports

Well, It's possible!

In order to do it, we will simply create a file named 'index.(js/ts)' inside components' folder, and add the following code in it:

exports_index_ts

And now you can import components easier from other files without needing to repeat their names.


If you think that it is still not worth it, because in index.(js/ts) the components are still being imported, there is another solution:

Instead of default exporting components

export default Input
Enter fullscreen mode Exit fullscreen mode

Simply export them without default keyword

export const Input (...)
Enter fullscreen mode Exit fullscreen mode

And in index.(js/ts) do this:

second_way_to_simplify

💖 💪 🙅 🚩
tsuyusk
Rafael Sant'Ana

Posted on July 13, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related