Dans ce tutoriel, nous allons vous montrer comment créer une application React.js depuis Visual Studio Code et comment l’intégrer sur Github. React.js est une bibliothèque JavaScript utilisée pour créer des interfaces utilisateur dynamiques.
Prérequis :
- Visual Studio Code (VS Code)
- Node.js
- Git
- Un compte Github
Étape 1 : Créer un nouveau projet React.js
Ouvrez VS Code et créez un nouveau dossier pour votre projet. Ouvrez un terminal et naviguez jusqu’au dossier de votre projet. Exécutez la commande suivante pour créer un nouveau projet React.js :
npx create-react-app my-app
Attendez que le projet soit créé.
Étape 2 : Exécuter l’application
Dans le terminal, naviguez jusqu’au dossier de votre projet en utilisant la commande :
cd my-app
Exécutez la commande suivante pour lancer l’application :
npm start
Ouvrez votre navigateur et accédez à l’adresse suivante : http://localhost:3000/. Vous devriez voir votre application React.js en cours d’exécution.
Étape 3 : Configuration de Git
Ouvrez un terminal et naviguez jusqu’au dossier de votre projet en utilisant la commande :
cd my-app
Exécutez la commande suivante pour initialiser Git :
git init
Exécutez la commande suivante pour ajouter tous les fichiers de votre projet :
git add .
Enfin, exécutez la commande suivante pour effectuer un premier commit :
git commit -m "Initial commit"
Étape 4 : Création d’un nouveau dépôt Github
Connectez-vous à Github et créez un nouveau dépôt. Donnez un nom à votre dépôt et cliquez sur le bouton « Créer un dépôt ». Copiez l’URL de votre dépôt.
Étape 5 : Lier votre dépôt Github à votre projet
Dans le terminal, exécutez la commande suivante pour lier votre dépôt Github à votre projet :
git remote add origin
Ensuite, exécutez la commande suivante pour envoyer vos modifications sur Github :
git push -u origin master
Connectez-vous à Github et vérifiez que vos modifications ont été envoyées avec succès.
Conclusion
Dans ce tutoriel, nous avons vu comment créer une application React.js depuis VS Code et comment l’intégrer sur Github. Vous pouvez maintenant continuer à développer votre application en utilisant Git pour suivre les modifications et Github pour héberger votre projet