How to properly structure a react project?

Question

React

Hello. Not so long ago I started learning React Native, but a small question arose about the structuring of the project.
At first, I saw somewhere and followed a similar scheme: all components were divided into folders, which also contained a file with styles for the component and various kinds of dependencies (icons, pictures, etc.). But later it became not very convenient, for example, when using the same styles and classes in different components, because you don’t want to duplicate them, and then the styles for the component will be scattered throughout the project. Or, for example, there is a problem with a logo that is in the directory of the Header component, but later it becomes necessary to use it for the Footer component.
Perhaps there is some optimal solution to this problem?

Answer 1

make a shared folder (or whatever you like) where you put everything you need to use in different components.
If there is a need to transfer something somewhere, then this is not a "problem", this is normal, take it and transfer it, the application has changed - the optimal structure is already different.

Answer 2

General in app/assets, private in app/components/assets

Answer 3

I prefer the feature-first approach, where everything related to a particular feature is in a separate folder. The situation you describe occurs regularly, and this is the case when you need to refactor and move the common functionality into a certain shared folder, which will be a dependency for everyone who uses it. There's nothing wrong with that, it's common practice. The main thing is that what you make into a dependency is an independent entity, and not just one variable or function. The logo is quite a separate entity. A set of icons, animations, or general style rules that other components use is also quite a separate entity.
In the future, it is possible to move a set of common components into a separate repository and a yarn / npm module, but you should not rush into this.
Another thing is when one independent feature has a dependence on another feature that is not directly related to it - this is not always good, it is better to move the common functionality into a separate feature so that these two obviously depend on it.

Answer 4

Src
-components
--form
---input
---button
---... --...
-compositions
--header
--footer
--...
-domain
-containers
--auth ---resources - ---default.png ---... --navigator.js -services --api --store --styles -config