Make professional mobile apps with React Native and Typescript — Structure your codebase in the right way (Chapter 3— Part 1)
Structure your codebase in the right way to be scalable and maintainable in the future.
It’s time to get serious!
Let's make an app called T Assistant. You’ll see it in the stores later after I finish this series. It consists of many small tools such as weather forecasts, notes, etc. It also has the Settings module to enable Dark mode, change languages. Authentications will be included, too.
Let's take a look at Facebook's instruction first: https://reactjs.org/docs/faq-structure.html. There is no standard structure for all projects. However, it depends on you, developers to make the structure that you're most comfortable with. Therefore, the content of this part is heavily opinionated. The structure is built on years of experience with React & React Native. You can take it as a reference to build your own one.
Pro tip: Store all your source code and resources (images, son data, icons, etc) inside the src folder.
This is a first-level folder structure in the src folder:
The app.tsx file is the entry file of our application & the root component.
The assets folder contains all resources we use in our application. It has 2 folders: images and jsons to hold all images and JSON data we use which should be flattened in the folder (except the locales folder used for internationalization you'll encounter later).
When we build a large app, we tend to break it into smaller independent modules first. For our app, they are weather forecasts, notes, settings, etc. All of those share common components, hooks, functionalities, interfaces, and services that are placed inside the core folder.
In the core folder, there are components, hooks, interfaces, helpers, and services. The hooks folder consists of all custom hooks we use, the same applied for the interfaces folder. The helpers folder consists of all common functions we use. Note that they are all flat, not nested.
Pro tip: I often put all API calls into the services folder. So that we have a centralized place to manage them. As a result, components call them to talk to the server instead of interacting directly with it.The same logic apply to the local database & files interaction.
The components folder is a little different. Each component is a folder that has at least 2 files: component.tsx & component.styles.ts. The names of those files are the same as their parent folder name (previously, I just used index.tsx & styles.ts but I found it hard to read in the VSCode tab and the debugger). If it is big enough, it should be divided into smaller components and those components stay in the child components folder.
The modules folder has multiple folders representing their corresponding module. Each folder has the same structure as the core folder (which consists of components, hooks, interfaces, helpers, and services). Plus, it has 2 new folders: screens & models. The screens folder stores screen components and the models folder contains global state data used in its parent module.
The last one is the store folder locates in the src (root) folder. It's the center store which aggregates all modules' models.
Pro tip: Don't make blanks folders. Only make one if you really need it. If a component doesn't have children components, do not make a components folder inside it. You should start with the screen component first. Break it into smaller components. If those components are used in the same modules, move them into the component folder inside the same module. If they're used in other modules, move them into the core/component folder. The same approach is applied for services, helpers.
That's how I structure my apps. I hope it helps you guys find out what’s your best fit.
You can clone the sample here:
git clone -b structure_codebase https://github.com/thinhtran3588/react-native-starter-kit.gitThings you have learned in this part:
- structure your codebase.
