React JS

Créer une application qui affiche un « Hello World » avec React Js               

Bienvenue dans ce tutoriel pour créer votre premier projet React Js et afficher « Hello World« , en utilisant l’éditeur Visual Studio Code. Vous pouvez utiliser un éditeur qui vous convient le mieux.

Dans ce tutoriel nous allons :

  • Installer les prérequis Node.js et create-react-app
  • Générer le projet React nommé hello-world
  • Ouvrir le projet dans VS Code
  • Explorer les fichiers et dossiers
  • Lancer l’application
  • Modifier App.js pour afficher « Hello World »

À la fin, vous aurez créé votre premier projet React Js et saurez comment démarrer et personnaliser une application.

Prêts ? C’est parti !

Installer les prérequis

Installer Node.js et create-react-app

Téléchargez et installez la dernière version LTS de Node.js depuis le site officiel : https://nodejs.org/en/

Vérifiez que npm (gestionnaire de paquets) est aussi installé en tapant npm -v dans votre terminal.

Installez ensuite create-react-app en global avec la commande :

npm install -g create-react-app

Générer le projet React

Dans votre terminal, exécutez la commande :

create-react-app hello-world

Cela va générer le skeleton d’une application React dans le dossier hello-world.

Le dossier hello-world contient le code de l’application.

Ouvrir dans VS Code

Ouvrez le dossier hello-world dans Visual Studio Code :

Structure du projet

L’explorateur de fichiers montre les dossiers et fichiers du projet.

Fichiers importants :

  • public/ : fichiers statiques
  • src/ : code source react
    • index.js : point d’entrée
    • App.js : composant racine
    • App.css : styles App
  • package.json : dépendances npm
Lancer l’application

Dans le terminal de votre éditeur, tapez npm start pour démarrer l’app.

Cela ouvre un navigateur avec la page de base de l’application qui tourne sur le port 3000 par défaut.

Vous pouvez également saisir dans votre navigateur : localhost:3000

Vous venez de démarrer votre application React Js.

Nous allons maintenant modifier le contenu pour afficher notre message « Hello World !« .

Voyons d’abord ce que contient notre fichier App.js

import logo from './logo.svg';

import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );

export default App;

Modifions maintenant le contenu de notre fichier App.js comme suit :

import './App.css';

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

export default App;

Enregistrons nos modifications et retournons sur notre navigateur.

Félicitations, vous avez créé votre première app React Js.

Et voilà pour ce tutoriel ! Vous savez désormais créer une application React et la personnaliser.