Comprendre la structure d’un projet create-react-app

Partie 1: découvrez Create React App

Créé par les équipes de Facebook, Create React App est un outil qui vous aidera à créer un nouveau projet react. S’il existe d’autres outils (Next, Gatsby, Parcel, etc.), Create React App reste la référence, notamment pour les nouveaux utilisateurs de React.

Create React App va vous permettre de générer un squelette de code pour votre application. Il embarque un certain nombre d’outils préconfigurés, tels que Webpack, Babel et ESLint, afin de vous garantir la meilleure expérience de développement possible.

Pour manipuler Create React App ici, nous allons avoir besoin d’un gestionnaire de paquet (package manager) directement dans le terminal. Ici, je vais utiliser yarn

Pour commencer, placez-vous dans le dossier où vous voulez créer votre projet. Personnellement, j’ai une partition spéciale dans laquelle je crée mes projets de code.

Pour initialiser votre projet, nous allons faire :

Yaaaaay ! Vous avez votre premier projet créé avec Create React App !

Partie 2: découvrez les fichiers

Nodes modules:

Dans l’ensemble vous n’aurez généralement pas besoin d’ouvrir ce dossier, il contient toutes les librairies javascript dont vous aurez besoin

Public:

Le dossier public vous y trouverez le fichier index.html qui est notre point départ avec la div qui a pour class root qui permet de signifier a React ou est ce qu’il doit venir s’ancrer.

.gitignore

Le fichier .gitignore a pour rôle de signifier a git les fichiers qui ne doivent pas être pusher sur le repo distant notamment le dossier node module.

Package.json:

Le fichier package.json est certainement le fichier qui contient plusieurs informations sur votre application React notamment les scripts, les dépendances.

Readme :

Le fichier Readme permet de documenter votre app en Markdown, il est fortement recommander si vous voulez vous souvenir de tout ce qu’il y’a a faire ou si vous voulez que d’autre personne participe a votre projet.

Src:

Le dossier src est l’endroit ou toute la magie de votre application va opérer, on y retrouve le fichier index.js qui est le fichier qui charge notre premier composant le composant App qui est ensuite greffer a la div avec la class root qui se trouve dans le fichier index.hmtl au niveau du dossier public.

Voila vous avez toutes les explications pour comprendre la structure de votre nouveau projet create-react-app

The Nothing 🔺