Comment lancer un projet React ? (Guide détaillé 2025)

Introduction

Juste avant de lancer un projet React, je vous propose d’en apprendre un peu plus sur cette technologie. React est une bibliothèque JavaScript développée par Meta (Facebook) en 2013. Elle est utilisée par des sites que vous consultez au quotidien, comme Instagram, Netflix, Airbnb ou Uber. C’est une technologie complète qui a largement fait ses preuves, utilisée pour créer des interfaces utilisateur dynamiques et performantes.

À ce stade, vous pouvez vous demander pourquoi utiliser React. À cela, je vous répondrais que React possède une grande communauté et un écosystème riche, car il est utilisé depuis des années par de nombreux développeurs. En effet, React est populaire principalement grâce à ses composants, qui – si vous apprenez à les utiliser – seront la clé de voûte de tous vos projets. Ces composants sont réutilisables et personnalisables, ce qui facilite grandement le développement.

Ainsi, lancer un projet avec React est une étape fondamentale lorsqu’on souhaite se familiariser avec cette technologie. Il existe plusieurs façons de démarrer un projet React, mais aujourd’hui, nous allons voir comment le faire en local, c’est-à-dire directement sur votre PC. Il existe aussi une méthode pour lancer un projet où que vous soyez depuis votre navigateur web, mais nous n’en parlerons pas dans cet article. Nous verrons également les bonnes pratiques à adopter pour bien structurer son projet React, car il vaut mieux les apprendre dès le début afin d’éviter les mauvaises habitudes qui compliqueraient la collaboration et la gestion de gros projets.

Lancer un projet React directement sur son PC demande quelques prérequis que nous verrons juste après. En bref, il faudra installer un éditeur de code – il en existe plusieurs, et je vous en présenterai un qui fonctionne parfaitement, mais libre à vous d’en choisir un autre. Il faudra aussi installer Node.js, qui permet d’exécuter du JavaScript en dehors de l’environnement du navigateur web. Pour lancer un projet React, aucune connaissance préalable n’est nécessaire. Cependant, pour apprendre React efficacement, il est conseillé d’avoir des bases en JavaScript ainsi qu’en HTML/CSS.

Prérequis pour lancer un projet React

L’Editeur de code : Visual Studio Code

Le premier logiciel qu’on va installer pour lancer un projet React s’appelle Visual Studio Code, il est beaucoup utilisé dans le monde de la programmation et du web en particulier.

1. Aller sur le Site de téléchargement de Visual Studio Code en cliquant sur ce lien. Puis choisissez la version à installer en fonction de votre système d’exploitation.

Page web de téléchargement pour Visual Studio Code

2. Ouvrez le fichier exécutable et suivez les instructions.

Node.js

Ensuite, il va falloir installer Node.js qui va servir à utiliser Vite qui permettra de créer et lancer un projet React avec une vu web qui s’actualisera automatiquement à chaque sauvegarde. Vous n’avez pas besoin d’avoir de connaissance de Node.js, mais il est quand même indispensable de l’avoir sur votre PC pour lancer un projet React.

1. Aller sur le site officiel de Node.js à partir de ce lien. Puis cliqué sur « Télécharger Node.js (LTS) ».

2. Ouvrez le fichier exécutable et suivez les instructions.

Installer et configurer un projet React

Utilisation d’un Template Vite

C’est maintenant que les choses sérieuses commencent ! Grâce à Vite, vous allez pouvoir lancer un projet React. À partir d’une simple commande, vous aurez accès à un projet déjà mis en place et automatiquement téléchargé. Évidemment, ce projet de base n’est pas ce qui est intéressant, mais il vous servira de point de départ. Vous pourrez supprimer tout ce qui ne vous est pas utile et commencer à coder votre propre projet.

Si vous êtes prêt, on peut commencer.

1. Ouvrez Visual Studio Code, que nous avons installé précédemment.

2. Cliquez sur « File » en haut à gauche, puis sur « Open Folder », et choisissez l’endroit où vous souhaitez créer votre projet React.

3. Ensuite, cliquez sur « Terminal » en haut à gauche, puis sur « New Terminal ». Le terminal devrait apparaître en bas de votre fenêtre.

4. Dans le terminal, entrez la commande suivante (vous pouvez remplacer nouveau_projet par le nom de votre projet) :

 npm create vite@latest nouveau_projet

5. Il est possible que le message « Need to install the following packages » s’affiche. Si c’est le cas, suivez l’instruction en tapant « y » dans le terminal et en appuyant sur Entrée.

6. Ensuite, utilisez les flèches directionnelles haut et bas pour naviguer dans le menu et appuyez sur Entrée pour choisir les configurations. Pour un projet React, sélectionnez « React » puis « JavaScript ».

7. Une fois l’installation terminée, ouvrez votre projet dans Visual Studio Code avec la commande suivante :

cd nouveau_projet

Bravo, vous avez réussi à lancer un projet React ! C’est sûrement votre premier, mais croyez-moi, ce ne sera certainement pas le dernier.

Installer les dépendances de votre projet

Vous avez presque fini ! Pour lancer un projet React, il reste une étape intermédiaire importante qu’il est nécessaire d’effectuer. Que vous utilisiez le template de Vite ou bien que vous ayez préalablement installé un projet React que vous souhaitez modifier, vous devez installer les dépendances du projet. Voici comment procéder :

1. Il faut déjà se placer dans le terminal, dans votre dossier de projet (si vous suivez l’article depuis le début, vous l’avez déjà fait juste avant). Pour cela, ouvrez votre dossier de projet directement depuis Visual Studio Code en cliquant sur « File » en haut à gauche, puis sur « Open Folder ».

2. Ensuite, si ce n’est pas déjà fait, ouvrez le terminal en cliquant sur « Terminal » en haut à gauche, puis sur « New Terminal ». Le terminal devrait apparaître en bas de votre fenêtre.

3. Maintenant, il ne reste plus qu’à entrer la commande ci-dessous :

npm install

C’est bon ! Il ne reste plus qu’à ouvrir votre projet directement dans un navigateur web.

Lancer le projet avec VITE

Est-ce que vous êtes prêt pour la partie que vous allez préférer ? Si oui, continuons. Nous allons maintenant lancer un projet React directement dans un navigateur web via un lien localhost. C’est-à-dire que le projet sera visible uniquement par vous sur votre navigateur web à partir du lien. À chaque fois que vous redémarrez votre projet, vous devrez exécuter à nouveau cette action.

1. Si ce n’est pas déjà fait, ouvrez votre dossier de projet dans Visual Studio Code via « File » > « Open Folder », puis ouvrez le terminal avec « Terminal » > « New Terminal ».

2. Ensuite, exécutez la commande ci-dessous :

npm run dev

3. Vous pouvez maintenant CTRL-clic sur le lien localhost, puis votre projet s’ouvrira automatiquement dans votre navigateur par défaut. Si vous voulez choisir un autre navigateur, pas de souci : copiez le lien et collez-le dans la barre d’URL d’un autre navigateur.

Site template de Vite utilisant React — Site template avec Vite utilisant React

Pourquoi apprendre React en 2025 ? Mon plan indispensable

Pourquoi apprendre React en 2025 ? Découvrez pourquoi j’ai choisi d’apprendre React, ses avantages, et comment bien débuter !

Lire l’article

Structurer son projet de manière efficace

Cette partie s’adresse aux personnes ayant déjà des bases en React. Si vous ne connaissez vraiment rien à React, vous pouvez lire cette section quand même et la garder dans un coin de votre tête. Vous pourrez aussi y revenir quand vous aurez acquis plus de connaissances en React et que vous voudrez lancer un projet React.

Utilisations des dossiers

Structurer son projet de manière efficace est primordial pour deux raisons :

Facilite la collaborations avec d’autres développeurs.
Permet de comprendre son code, même longtemps après l’avoir écrit.

Si vous avez déjà installé le template Vite, vous pouvez vous inspirer de l’organisation des dossiers.

Il y a le dossier /src, qui va contenir la majorité de ce que vous allez écrire en React.

Vous pouvez dès à présent ajouter des dossiers qui stockeront spécifiquement certaines choses :

components/ : Vous y mettrez tous les composants réutilisables.
pages/ : Pour les pages principales.
hooks/ : Vous pourrez y mettre les hooks personnalisés.
styles/ : Stockera tous les styles CSS.

Utilisation des composants personnalisés

Une chose importante à utiliser en React est les composants personnalisés. C’est indispensable pour lancer un projet React. Pour faire simple, avec React, vous pouvez créer des composants qui ressemblent aux composants HTML, à l’exception que c’est vous qui modifiez ces composants comme vous le souhaitez.

Chaque composant est une fonction qui commence par une majuscule et qui retourne du code JSX.

Par exemple : <header /> est un composant inclus en HTML, et <Header /> est un composant que vous avez créé avec du code qui pourrait ressembler à cela :

export default function Header() {
  return (
    <header>
      <img src={logoImg} alt="logo" />
      <h1>Titre</h1>
      <p>
        Description
      </p>
    </header>
  );
}

Chaque composant doit être placé dans un fichier qui porte le même nom que le composant, et ce fichier sera ensuite placé dans le dossier components/. Vous devez créer un nouveau composant dès que vous voyez du code qui se répète.

FAQ sur le lancement d’un projet React

Peut-on utiliser React sans connaître JavaScript ?

Il est fortement déconseillé d’utiliser React sans connaître JavaScript, car React est une technologie qui se base sur JavaScript. Cependant, il n’est pas nécessaire d’être un expert en JavaScript. Si vous avez déjà les bases, vous réussirez quand même à apprendre React.

React est-il difficile à apprendre ?

Comme chaque technologie ou langage de programmation, React peut être difficile à apprendre, mais ce n’est pas impossible si vous avez déjà des bases en JavaScript et HTML/CSS. Si vous êtes constant dans votre apprentissage et que vous pratiquez régulièrement, React pourra même paraître simple à apprendre.

Quel langage utilise React ?

React utilise principalement JavaScript, mais avec une extension appelée JSX (JavaScript XML). JSX permet d’écrire des composants React en combinant du HTML et du JavaScript dans un même fichier. Cependant, lors de la compilation, JSX est transformé en JavaScript pur, ce qui permet à React de gérer dynamiquement l’interface utilisateur.

Quelle est la différence entre React et React Native ?

React est une bibliothèque JavaScript pour créer des interfaces utilisateur sur le web. React Native permet de créer des applications mobiles natives pour iOS et Android en utilisant le même concept de composants, mais avec des éléments natifs propres à chaque plateforme.

Conclusion

Pour conclure, lancer un projet React n’est pas difficile. Il suffit, après avoir installé un éditeur de code et Node.js, d’exécuter quelques commandes. Peut-être qu’actuellement vous vous dites que vous allez oublier les commandes utiles pour lancer un projet React, c’est pourquoi je vous conseille de mettre cette page dans vos favoris et de revenir dessus chaque fois que vous en avez besoin. Puis, avec le temps, vous vous souviendrez exactement des étapes à suivre pour lancer un projet React, et croyez-moi, cela arrive plus vite qu’on ne le pense.

Cet article vous a peut-être servi de base pour commencer avec React, mais il ne permet pas d’apprendre React en profondeur. Je vous invite maintenant, une fois que vous savez comment lancer un projet React, à apprendre à maîtriser cette technologie pour vous amuser à créer des sites dynamiques.

Si vous avez apprécié cet article, je vous invite à laisser un commentaire juste en dessous pour me dire quelles connaissances vous avez sur React, si cet article vous a servi et comment l’améliorer si vous trouvez des axes à modifier.

Comment lancer un projet React ? Guide complet pour débutants