“Feature” is a pretty broad term and you’re free to choose whatever that means to you. Let’s adjust the folder structure one last time and group our files by feature. So from my perspective, it's always good if you can navigate a codebase in multiple ways. But that doesn't help much if you don't remember the name in the first place. You need to know where and in how many places a component is used to understand in which folder you can find it.Īt this point you might think: you can simply open a file by its name with the help of your IDE (e.g. It feels arbitrary that some components exist in the shared components folder just because they are used on multiple pages.
We can understand it but we first need to process folder names like create-todo (todo entity) or login (user entity) and separate them from the unimportant stuff (e.g.
Looking at the pages folder it’s not immediately clear that this app has todos, projects, and users. The ingenious idea: We’ll build the next todo app! To juice this story up we’ll follow the (slightly satiric) journey of a new startup through different stages and a growing codebase. In other terms: Where we put our App.js file is less important than the overall approach to organizing files. We won't lay out every detail but rather take a big-picture perspective. If you're looking for an example project with the final feature-based folder structure I prepared a repository here on GitHub. It also includes a short list of best practices and a challenge to turn a design from the React Job Simulator into a feature-based folder structure. This write-up reflects my observations of these folder structures evolving in a growing codebase and the problems they can cause. grouping by pages with colocation of related components, contexts, and hooks. grouping by pages with global folders for contexts, hooks, etc. separate folders for components, contexts, hooks) So I went out to get an overview of the most popular approaches to organizing React projects. But still React’s unopinionated approach frequently raises questions: “Where should I put my files? How should I organize my code?” Honestly, even with years of experience, I found myself asking the same questions.
0 kommentar(er)
