➡️ In this article, different possibilities to structure files in a React project.

Article in English ✒️

Introduction 📁

At the start of a project, when there's no file structure in place, it's easy to waste time trying to find the right architecture, whereas it should only take a few minutes!

In this tutorial, we will explore different methods for structuring a React project:

1. Methods recommended by the React documentation.

2. My way of structuring my projects.

Part 1: Docs React 📄

Group by features or routes:

Inside the src folder, I have different folders which contain all the files of a feature, like file: index, css, test, api.

(example docs react)
src/
    feed/
        index.js
        Feed.js
        Feed.css
        FeedStory.js
        FeedStory.test.js
        FeedAPI.js
     profile/
        index.js
        Profile.js
        ProfileHeader.js
        ProfileHeader.css
        ProfileAPI.js

Grouping by file type

Still under src, you define global files such as a components file that will contain all the components of your project (button, banner, etc.).

(example docs react)
src/
    api/
      APIUtils.js
      APIUtils.test.js
      ProfileAPI.js
      UserAPI.js
    components/
      Avatar.js
      Avatar.css
      Feed.js
      Feed.css
      FeedStory.js
      FeedStory.test.js
      Profile.js
      ProfileHeader.js
      ProfileHeader.css

Part 2: My file structure 📂

For my part, I use the technique by file type because I can easily find what I need based on its functionality.

A folder named api will group together my various API calls, assets for my images, and you can imagine for the rest.

I could also add, for example, a folder named utils with inside it a hooks folder and a tests folder. The tests folder might either have its own folder or be directly within the feature being tested, which can be convenient for large projects.

But in the components, for example, I group by functionality, allowing me to have all the files related to my component together.

🎉 Thank you for reading to the end!
🤩 If you found this helpful please consider subscribing and following.

📕 You can browse my blog to discover other topics that interest you.
➡️ blog.tomwebdev.fr

🌐 To learn more about me, visit my website.
➡️ tomwebdev.fr

Article en Français ✒️

Introduction 📁

Au démarrage d'un projet, lorsque l'on n'a pas de structure de fichier on peut vite perdre du temps à trouver la bonne architecture, alors que ça devrait prendre seulement quelques minutes !

Dans ce tutoriel, nous explorerons différentes méthodes pour structurer un projet React:

1. Méthodes recomandés par la Doc React

2. Ma façon de structurer mes projets

Part 1: Docs React 📄

Regrouper par fonctionnalité ou route:

A l'intérieur du dossier src, j'ai différents dossiers qui contiennent tous les fichiers d'une fonctionnalité, comme le fichier: index, css, test, api.

(example docs react)
src/
    feed/
        index.js
        Feed.js
        Feed.css
        FeedStory.js
        FeedStory.test.js
        FeedAPI.js
     profile/
        index.js
        Profile.js
        ProfileHeader.js
        ProfileHeader.css
        ProfileAPI.js

Grouper par type de fichier

Toujours sous src, vous définissez des fichiers globaux comme un fichier components qui contiendra tous les composants de votre projet (bouton, bannière, etc.).

(example docs react)
src/
    api/
      APIUtils.js
      APIUtils.test.js
      ProfileAPI.js
      UserAPI.js
    components/
      Avatar.js
      Avatar.css
      Feed.js
      Feed.css
      FeedStory.js
      FeedStory.test.js
      Profile.js
      ProfileHeader.js
      ProfileHeader.css

Part 2: Ma structure de fichiers 📂

Pour ma part, j'utilise la technique par type de fichier car je peux facilement trouver ce dont j'ai besoin en fonction des fonctionnalités.

Un dossier nommé api regroupera mes différents appels API, assets pour mes images, et vous imaginez pour le reste.

Je pourrais également ajouter, par exemple, un dossier nommé utils contenant à l'intérieur un dossier hooks et un dossier tests. Le dossier tests peut soit avoir son propre dossier, soit se trouver directement dans la fonctionnalité testée, ce qui peut être pratique pour les grands projets.

Mais dans les composants par exemple, je regroupe par fonctionnalité, ce qui me permet d'avoir ensemble tous les fichiers liés à mon composant.

🎉 Merci d'avoir lu jusqu'au bout !

🤩 Si vous avez trouvé cela utile, pensez à vous abonner et à me suivre.

📕 Vous pouvez parcourir mon blog pour découvrir d'autres sujets qui vous intéressent.
➡️ blog.tomwebdev.fr

🌐 Pour en savoir plus sur moi, visitez mon site Web.
➡️ tomwebdev.fr