10 ways to better organize and design your React Application

The page says React code organization has a strong effect on how easily teams find things, make changes, and keep an app manageable as it grows. It compares this to building foundations and argues that structure should follow domain responsibilities, not just technical roles.

It then recommends using folders per component, absolute paths, a shared common module, wrappers around external libraries, close placement of related code, pure utility functions, separate business logic from UI through custom hooks, and exact dependency versions in package.json.

Reading notes

#

• Group components by domain responsibilities, such as pages or modules, instead of technical buckets.
• Put complex components in their own folders so their subcomponents and related files stay together.
• Prefer absolute paths over relative paths to make navigation and refactoring easier.
• Keep shared utilities, components, hooks, and constants in a common module when they are used across pages or modules.
• Wrap third-party libraries or components in custom components so the app keeps a consistent API and can replace them more easily later.
• Keep shared code in one place when it is used more than once across pages or modules.
• Use locality of behavior so code, functions, and resources stay near where they are used.
• Keep utility functions pure and purpose-specific, and keep business logic out of them.
• Move business logic out of UI components and into custom hooks.
• Pin dependency versions in package.json with exact versions instead of version ranges.