What is the best way to organize a project structure in react?

Question

React

Hello, tell me examples of a good project structure in react, as well as how detailed it is to split the code into components.

For example , there is a product card with various elements (add to cart button, a plate with information about the discount, trade offers, etc.). Obviously, the add to cart button is a separate component, but what about sales offers and discount information? Should they be separated into a separate component, or should they just be part of the card?

I looked at some repositories of online stores on the git, but I'm not sure that the authors used good approaches to organizing the structure, because at first glance it seemed that such a project would quickly turn into a trash can.

Perhaps someone can share examples of repositories where good development practices have been applied.

Answer 1

1) The basic principles are well described in the doc
2) It all depends on the size of the project and the team. On small volumes, everything is not so important
3) A lot of code in one file is inconvenient. Many small files are also inconvenient. You always need to look for a balance.
4) It is definitely worth highlighting everything reused as separate components. Standard buttons, inputs, interface elements, etc.
5) By the way, it's a good practice to wrap all third-party components in your own. So it will be easier to modify them or even replace them with self-written ones, when it is fixed.
6) Everything will turn into trash if you do not change the structure and approaches as the project grows. Deal with problems as they come up.