File Structure in React or Native Repository
Surprisingly common question:
How do I structure my React or React Native repository?
Simple answer:
Long answer:
There is no “one size fits all” solution. However, the approach mentioned above works, and for sure you’ll want to apply it after reading this section. As there are also some patterns you might use in your projects, I decided to put them in one place, so you can start with a more suitable approach from the beginning and not reinventing the wheel.
As a starting point, it’s good to understand what you want to build. There are five main categories for a repo you can choose from:
- Hack project/ Pet project
- MVP
- Production App
- Huge app
- Cross-platform RN + Web app
Before we go deeper into the repo purpose, let’s explain first some base technic you might use.
Base technics
1. Grouping by features
Feature — a distinctive attribute or aspect of something.
Example: An app for managing orders that includes some users:
➕Pros: easy to navigate → When you work on “orders” you have everything in one folder.
2. Grouping by Type
➕Pros: standard open source structure→ Although a bit overused 😅
3. Hybrid Feature / Types
➕Pros: your structure will grow, and it will be still manageable, but keep your eye on too deep nesting (aliases might help here 💪).
General rules
- Don’t overthink it, but stay flexible to be able to change it
- Avoid too much nesting
- Be ready to refactor
- Use aliases
- Agree with other team members on some structure you want to follow
Repo purpose
1. Hack project/ Pet project
Probably you don’t want to overthink it, go with “The simple answer” ^^
2. MVP
Bottomline, take some boilerplate which you like and go with it 🚀.
You can start with grouping by Type and then if you need more flexibility you can add a feature group.
3. Production App
A hybrid approach is something that you want to explore and agree with your team.
4. Huge App
At the point when you have 40+ features, it is easier for everyone to navigate to a specific feature and work on a specific area which might be a just pure component or redux layer. At this point, you also have some Junior devs which very often are overwhelmed with the codebase, so it’s easier for them to navigate and follow the team’s pattern.
5. Cross-platform RN + Web app
Now you are sharing probably up to 95% of the codebase between Web, iOS, Android and if you have server sider rendering probably also between node environment. The first thing which will save you is file extensions, which are relevant to the environment.
- order.web.jsx
- order.ios.jsx
- order.android.jsx
- order.native.jsx
- order.node.jsHere you can find the hybrid approach with aliases that works quite well →
Below is the example of repo structure I used for 95% code reuse, for fully cross-platform support.
💥 Bonus 💥
File name conventions:
My favourite is to search by filename, but your file names should be meaningful. The best is to agree with the team extensions you want to use. Here is our list:
- .page
- .container.
- .service.
- .helper.
- .api.
- .redux.
- .actions.
- .reducers.
- .styles.Conclusion
Start where you want, and you feel comfortable, but it’s good to know your options and some proven tactics. If you give it a try, please let me know how did that go.
