How to Structure your React.js and .NET 5.0 Projects

February 26th 2021 · By Daniel Karpienia · 3 min read · 514 words

Keeping a clean project structure is not only a good practice but provides many benefits. Anyone without a code walk through should be able to understand where and how project items collaborate.

Naming Conventions

Naming conventions are important. As your project grows and requires more and more collaborators. Being able to identify what is the purpose of an item based on the name has the following benefits:

Less time to onboard - it answers the questions on where should this go? or how does it work with other features?
Easier to maintain - everything is organized and where it should belong
Self documentation - having similar items grouped together provides code references on how to implement and use an item

For my React.js projects I use small-case as my file naming convention. Classes and stateless components I use TitleCase and functions, variables and parameters I use camelCase.

For the .NET 5.0 I use TitleCase as my file naming convention, classes, variables and for parameters I use camelCase.

Naming conventions can be subjective but I find by staying disciplined you quickly identify files, classes, functions and variables simply.

Folder and File Structure

On top of properly naming my project items I structure all my projects in the following manner:

+ClientApp
    +src
        +components
        +images
        +hooks
        +services
        +store
        +utils
+Controllers
+Core
    +Domain
    +Helpers
    +JsonModels
    +Repositories
+DependencyResolution
+Migrations
+Persistence
+Repositories
+Services
+Interfaces
+Utils

Key Areas to Note

Section	Purpose
ClientApp	All your React.js front end code resides here
ClientApp/src/hooks	Stores all your custom hooks
ClientApp/src/services	Stores your .js services which access and pull data from your API
ClientApp/src/store	Contains all your Redux store files, slicers, reducers etc.
Core	Contains core components
Core/Domain	Contains .cs files that make up the domain of your project
Core/JsonModels	Defines the models that are used for API payloads
Core/Repositories	Defines the interface for your repositories
DependencyResolution	Has your IoC container (Inversion of Control) which wires up dependency injection
Migrations	Your code first migrations for entity framework core
Persistence	This contains classes for your data layer and defines your context and unit of work
Persistence/Repositories	Contains the implementation of your repositories
Services	Services that access your data layer via repositories
Services/Interfaces	Implement interfaces for your services to use dependency injection

Conclusion

Staying disciplined in your project structure and naming conventions provide many benefits. Your project structure becomes the documentation of its self by grouping like classes and files together. I am a firm believer that you should not have to add comments to your code to explain the logic and the reasoning. This should be self evident in your code and project structure. Being able to onboard developers in less time, make your code base easier to maintain is a few of the many benefits of consistency.