search

c-hive / guides

Guides for code style, way of working and other development concerns
MIT License
26 stars 5 forks source link

Construct a better ReactJS structure #24

Closed gomorizsolt closed 4 years ago

gomorizsolt commented 5 years ago

Some of our projects contain functions in the utils folder that are tightly coupled to a specific component and are no longer reusable in any way. This is a bad practice due to the intention of utils:

Non-UI / non-component / utility features not tightly linked to the specific project

We have therefore decided to extract the specific functions alongside the component they belong. I would propose naming it helpers but other suggestions are welcome.

Reference:

gomorizsolt commented 5 years ago

Questions.

How to structure helpers?

Where should custom errors be located? Outside or inside src?

thisismydesign commented 5 years ago

utils: Non-UI / non-component / utility features not tightly linked to the specific project I would propose naming it helpers

I think utils are the correct name. From our earlier example, MediumUtils would still themselves be non-component even though they are related to a component.

How to structure helpers?

Group them by functionality. E.g. MediumUtils can contain one or more functions. I would propose to store them in a utils folder though as with test and style or routes files we already have many on the same level.

Where should custom errors be located? Outside or inside src?

Sounds like a separate topic not sure how this came up. But inside for sure. They can be scoped for the whole project or specific components.

gomorizsolt commented 5 years ago

Sounds like a separate topic not sure how this came up.

It's true, but realized we haven't agreed upon this.

gomorizsolt commented 5 years ago

Thanks for the answers, updated the structure. I have also renamed the *.css files to *.style.js as we use CSS-in-JS over regular CSS.

thisismydesign commented 4 years ago

Done some updates in https://github.com/c-hive/guides/commit/801f3bafff3396c3383627ebea12e740c33936dd and https://github.com/c-hive/guides/commit/6ffb4046c4f56124f5296ee447600bb83ef57c44

I'm not sure we explicitly should point out a utils folder as it's more the exception. If it makes sense, use it for sure. With hooks, it is also easier to break down logic into smaller components/files. Therefore I'd consider separating "utils" a sign of the component is too big.

Closing unless there're further comments.