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.