3.6 Crée un nouveau projet

Bonjour à tous et bienvenue pour le démarrage du projet. Avant toute chose, il vous faut créer un projet React. Normalement, vous avez déjà vu dans les vidéos précédentes comment installer React et comment générer un nouveau projet — n'hésitez pas à y retourner si besoin. Une fois votre projet créé, ouvrez-le dans Visual Studio Code pour suivre la suite.

Structure du projet et lancement

Dans mon cas, j'ai créé un dossier react-exo qui contient un sous-dossier starting-setup : c'est là que nous allons commencer notre projet. Si vous avez bien installé toutes les dépendances, vous devriez retrouver les éléments classiques d'un projet React :

  • node_modules/ : toutes les dépendances npm
  • public/ : les fichiers statiques servis directement
  • src/ : le code source, avec App.js, index.css et index.js

Pour lancer le projet, ouvrez le terminal intégré de VS Code et placez-vous dans le dossier du projet avec la commande cd starting-setup. Une fois à l'intérieur, lancez le serveur de développement avec : 

npm start

Patientez quelques secondes : le navigateur va s'ouvrir automatiquement sur l'adresse locale (généralement http://localhost:3000). Par défaut, vous tomberez sur le logo React qui tourne en continu. Pas d'inquiétude : je vais vous fournir le code de départ à recopier dans App.js, index.css et index.js pour obtenir une page d'accueil avec « Let's get started ! ». Mettez la vidéo en pause si nécessaire pour bien noter le contenu de chaque fichier.

Une fois que votre serveur local affiche correctement la page de démarrage, votre environnement est prêt. Je vous invite à passer au prochain cours pour commencer à analyser ce que contient un projet React standard.

En résumé

Cette leçon explique comment créer et initialiser un nouveau projet React. Le tuteur guide pas à pas pour vérifier l'installation, ouvrir le projet en local avec npm start et montre la structure de base d'une application React avec ses fichiers principaux : App.js, index.js et les fichiers CSS associés.

Points clés

  • Installer React et vérifier la présence des dossiers node_modules, public et src
  • Naviguer dans le terminal vers le dossier du projet avec la commande cd
  • Lancer la commande npm start pour démarrer le serveur local
  • Le logo React tournant s'affiche par défaut au premier démarrage du projet
  • Structure fondamentale : App.js (composant principal), index.js (point d'entrée) et fichiers CSS associés
  • Consulter le code source fourni pour débuter la modification du projet

Questions fréquentes

Quels sont les dossiers obligatoires dans un projet React initial?

Un projet React contient au minimum node_modules (dépendances installées), public (fichiers statiques) et src (code source) avec App.js, index.js et les fichiers CSS associés.

Comment démarrer un projet React en local?

Ouvrez le terminal, naviguez vers le dossier du projet avec la commande cd, puis exécutez npm start pour lancer le serveur local sur votre navigateur.

Que signifie le logo React qui tourne au démarrage?

C'est l'interface par défaut fournie par Create React App qui indique que le serveur local fonctionne correctement. Elle doit être remplacée par votre propre code React.