The only thing I don't like is your use of index.tsx every where. I prefer naming my files by the component name inside (usually one component per file). This apply to other kind of files too.
That way it's much easier to find things, instead of tons of files with the same name.
Another tip is not to use default exports. It's much easier to find uses.
Hi Ziv, I'm using index.tsx for components because I'm putting styles, types, tests under a folder named after the component's name. index.tsx serves as an access point to a component or a page, where exports can be organized.
I definitely agree with deconstructing exports, but naming one as default also helps identify the exported component. I would do exports in index.tsx like this.
As far I understand, this practice assumes a configured tree shaking on a package bundler.
I have seen sites where unused components and even tests files are still referenced from the index file (and downloaded).
Well configured, it leaves less and shorter imports.
Yes Edmundo, tree shaking strictly bundles only explicitly exported modules and avoids unnecessary ones. I believe it's an essential practice for good production build. I also use lighthouse to scan and optomize.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Great writeup.
The only thing I don't like is your use of index.tsx every where. I prefer naming my files by the component name inside (usually one component per file). This apply to other kind of files too.
That way it's much easier to find things, instead of tons of files with the same name.
Another tip is not to use default exports. It's much easier to find uses.
Hi Ziv, I'm using
index.tsxfor components because I'm putting styles, types, tests under a folder named after the component's name.index.tsxserves as an access point to a component or a page, where exports can be organized.I definitely agree with deconstructing exports, but naming one as default also helps identify the exported component. I would do exports in
index.tsxlike this.Then it's easy to import components in one line, like what Material UI is doing.
As far I understand, this practice assumes a configured tree shaking on a package bundler.
I have seen sites where unused components and even tests files are still referenced from the index file (and downloaded).
Well configured, it leaves less and shorter imports.
Yes Edmundo, tree shaking strictly bundles only explicitly exported modules and avoids unnecessary ones. I believe it's an essential practice for good production build. I also use lighthouse to scan and optomize.