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:

  1. Less time to onboard - it answers the questions on where should this go? or how does it work with other features?
  2. Easier to maintain - everything is organized and where it should belong
  3. 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:


Key Areas to Note

ClientAppAll your React.js front end code resides here
ClientApp/src/hooksStores all your custom hooks
ClientApp/src/servicesStores your .js services which access and pull data from your API
ClientApp/src/storeContains all your Redux store files, slicers, reducers etc.
CoreContains core components
Core/DomainContains .cs files that make up the domain of your project
Core/JsonModelsDefines the models that are used for API payloads
Core/RepositoriesDefines the interface for your repositories
DependencyResolutionHas your IoC container (Inversion of Control) which wires up dependency injection
MigrationsYour code first migrations for entity framework core
PersistenceThis contains classes for your data layer and defines your context and unit of work
Persistence/RepositoriesContains the implementation of your repositories
ServicesServices that access your data layer via repositories
Services/InterfacesImplement interfaces for your services to use dependency injection


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.