loading...

How I structure my React /TS applications

djamaile profile image Djamaile ใƒป3 min read

It is currently summer vacation for me and I will be working on side projects. For my summer projects, I will use ReactJS for every front-end I create. I created a boilerplate repository that I can re-use for every side project. So, the goal of this post is to display my structure, but I am interested in your project structure and how you would do it differently.

If you just want to see the code, here you go: https://github.com/djamaile/react-boilerplate-2020

Here is the picture of the structure:Alt Text

Let's dive into the folders!

๐Ÿ“– Api

In the API folder, I keep my API routes and API calls. Also, I create a generic request function with Axios. Which can be reused for API-requests.

Alt Text

๐Ÿ–ผ๏ธ Assets

In the assets folders, I have three subfolders. Firstly, the CSS folder where I keep all my in-js-CSS files. Secondly, the images folder and I think this folder speaks for itself. Lastly, the theme folder and the theme folder is for Material-UI.

For every React project, I use Material-UI. With Material-UI we can also create a custom theme and that is what we do in the theme folder.
Alt Text

๐Ÿงฑ Components

Furthermore, we have the famous components folder. Re-usable functions will be put in the components folder and it can be used by functional components in the views folder.

โ˜‚๏ธ Hooks

The hooks folder is cool but mostly unused. I rarely make custom hooks, but I still keep the folder there in case I have some genius idea that needs to be a hook.

๐Ÿ—บ๏ธ Routes

In the routes folder, I keep my routes! I think the only 'weird' thing I do in my routes folder is using suspense. I am using suspense to split the code of the views. Also, we use the theme provider of Material-UI so we can use the theme we created in the theme folder.
Alt Text

๐Ÿงช Tests

Tests folder is there, but the question is if I even test...

โŒจ๏ธ Types

So, as you know I am using Typescript. Therefore I have a folder called types where I can put in my Typescript types and interfaces. Props types are the only exemption. They get declared above the components themself.

๐Ÿ”จ Utils

I always create a lot of functions within a component. As a result, the component can become quite bloated. When I feel that is happening I will move the functions within the utils folder. Also, if a function is used by some other component then it is also going to the utils folder.

๐Ÿ—„๏ธ Extra files

As you can see I still have some files at the root level. The important files are the configuration files for Eslint and Prettier. These two extend the Airbnb rules. Moreover, I have my own rules within them and for anyone with experience with Eslint and Prettier, it can be quite annoying to set them up. So, having these files already configured for every project I do is a lifesaver.

Well, that is my structure. You might be wondering but where are the folders for your state management? Well, I didn't create those folders because I use different state managers all the time. It just depends on what I want to use at that moment. How does your structure compare to mine?

Posted on by:

djamaile profile

Djamaile

@djamaile

Full-Stack Engineer

Discussion

markdown guide
 

Nice, thanks for sharing! ๐Ÿ˜ƒ

 

Please, what is that theme you're using?

 
 

Very cool -- components vs views breakdown is interesting. is it always a 1:1 view and component directory (ie: "home" exists in both) or how do those two directory structures scale over time?

 

Good question! No, not all the components folders are 1:1 to the views folder. For example, a couple of months ago I was working with graphs. These graph components were not necessarily tied to a folder within views. So, I just made a graph folder within components and different views shared the graph components.

 

It seems to be like my VueJs folder stracture! Almost same.