React v18 TypeScript
A simple template to start your new React v18 TypeScript project. It includes some of the most used features for a React TypeScript initial project.
- React v18 TypeScript
- React Router DOM
- Styled Components
- GitHub Actions
How to use
Just click in
Use this template in order to start your new project with this code.
After that, change directory into the project:
in order to install packages dependencies.
in order to install Husky. And, if the hooks don’t work, you have to make them executable by running
chmod +x ./husky/pre-commit
chmod +x ./husky/pre-push
or delete both of them and then run
npx husky add .husky/pre-commit "yarn lint-staged"
npx husky add .husky/pre-push "yarn test:cov"
To run the application in the development mode:
To run the application in the production mode:
For Development the application will be available at
https://localhost:3000/; Production mode will be at
It makes use of the concept of Clean Code Architecture in order to build a more reliable and maintainable application.
│ └── images
│ └── Loading
│ └── Home
│ ├── context
│ ├── types
│ ├── useCases
│ ├── viewModels
│ └── views
This is just an example that I, personally, use. We divide the files as follows:
assets: as the name suggests, here lies all graphic data we may use in our application, like videos, images, svgs, gif…and so on.
components: we always think in terms of componentization. By this means, every single component (like a Loading one) we use in several places in our application, we should put it in here and reuse it throughout the code.
pages: usually every and each different route will have a different page. Therefore, we divide them into different folders. In this example, we have the
context: here we make use of React Context if the components in our page need to recall some state that lies in different components on the same page. This prevents us from cascading props.
types: every single type we use in our page, we put it all in here.
useCases: usually a useCase will have functions that communicate with our servers (like an HTTP request) or some complex objects maneuvers.
viewModels: in order for our view to not be static, it must have some definitions and actions, like updating it at some rate; onClick events; websocket events and others. Therefore, here lies all things needed to make the page (the view) dynamic.
views: only the UI must exist in this folder. It’s only what the user will see, like HTML and CSS.
shared: every other element that is used by more than one page, subject or component must exist here.