Votre premier laboratoire React

Introduction

Bonjour et bienvenue sur LabEx! Dans ce premier laboratoire, vous allez apprendre le programme classique "Hello, World!" en React.

Cliquez sur le bouton Continue ci-dessous pour commencer le laboratoire.

Bonjour React

Prérequis

Avant de commencer, nous devons nous assurer que Node.js et npm sont installés sur la machine virtuelle (VM) LabEx.

Ouvrez le terminal ou l'invite de commande et exécutez les commandes suivantes :

cd ~/project
curl -sL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get update
sudo apt-get install -y nodejs

Initialisation de React

Essayons de lancer une démo "Hello World" en React.

Ouvrez votre terminal ou votre invite de commande et exécutez la commande suivante pour créer un nouveau projet React :

cd ~/project
npx create-react-app hello-world-demo

Veuillez attendre que l'installation soit terminée.

Mise à jour de l'application React

Ensuite, mettons à jour l'application React par défaut pour afficher un message "Hello, World!".

Ouvrez le fichier src/App.js dans votre éditeur de code préféré et remplacez le contenu par le code suivant :

import React from "react";

function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

export default App;

Par défaut, le serveur de développement React utilise le port 3000. Pour le changer au port 8080, ouvrez le fichier package.json dans votre éditeur de code.

Localisez la section scripts et mettez à jour le script start pour inclure la variable d'environnement PORT :

"scripts": {
  "start": "BROWSER=none PORT=8080 react-scripts start",
 ...
}

Enfin, exécutez la commande suivante pour démarrer le serveur de développement React :

cd hello-world-demo
npm start

C'est fait! Vous avez lancé avec succès une démo "Hello World" en React sur votre serveur local en utilisant le port 8080.

Maintenant, vous pouvez passer à l'onglet Web 8080 et cliquer sur le bouton de rafraîchissement pour voir la page web.

Résumé

Félicitations! Vous avez terminé votre premier laboratoire LabEx.

Si vous souhaitez en savoir plus sur LabEx et sur la façon de l'utiliser, vous pouvez visiter notre Support Center. Ou vous pouvez regarder la vidéo pour en apprendre davantage sur LabEx.

La programmation est un long chemin, mais le Prochain laboratoire n'est qu'à un clic de distance. Allons-y!