Bonjour le monde en React.js

Bienvenue dans notre “Tutoriel React.js Hello World” où nous vous guiderons pour créer votre première application React. React.js est devenue l’une des bibliothèques JavaScript front-end les plus populaires pour construire des interfaces utilisateur. Son architecture basée sur les composants et son DOM virtuel la rendent efficace et flexible. Si vous êtes nouveau sur React.js, un exemple “Hello World” est le point de départ idéal pour comprendre ses concepts de base. Dans cet article, nous allons vous montrer comment créer une application simple “Hello World” en React.js.

Pré-requis

Avant de commencer, assurez-vous d’avoir Node.js et npm (Node Package Manager) installés sur votre machine. Vous pouvez les télécharger et les installer depuis le site officiel de Node.js.

Configuration d’une application React

React fournit un outil appelé create-react-app pour configurer rapidement un nouveau projet React. Ouvrez votre terminal ou invite de commandes et exécutez la commande suivante pour créer une nouvelle application React appelée hello-world-react :

npx create-react-app hello-world-react

Cette commande va créer un nouveau répertoire appelé hello-world-react et y configurer une structure de projet React de base.

Ensuite, naviguez dans le répertoire du projet :

cd hello-world-react

Création d’un composant Hello World

En React, tout est un composant. Nous allons créer un simple composant fonctionnel pour afficher notre message “Hello World”.

Ouvrez le répertoire src dans votre éditeur de code et créez un nouveau fichier appelé HelloWorld.js. Ensuite, ajoutez le code suivant pour définir notre composant :

// src/HelloWorld.js

import React from 'react';

function HelloWorld() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <p>This is a basic React.js application.</p>
    </div>
  );
}

export default HelloWorld;

Dans ce code :

• Nous importons React car chaque composant React doit avoir accès à la bibliothèque React.
• La fonction HelloWorld est un simple composant fonctionnel qui renvoie du JSX (JavaScript XML).
• JSX nous permet d’écrire du code semblable à du HTML dans le JavaScript.
• Nous exportons le composant HelloWorld pour pouvoir l’utiliser dans d’autres parties de notre application.

Rendu du composant Hello World

Maintenant, rendons notre composant HelloWorld dans le composant principal App.

Ouvrez le répertoire src et modifiez le fichier App.js. Remplacez son contenu par le code suivant :

// src/App.js

import React from 'react';
import './App.css';
import HelloWorld from './HelloWorld';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <HelloWorld />
      </header>
    </div>
  );
}

export default App;

Dans ce code :

• Nous importons le composant HelloWorld que nous avons créé plus tôt.
• À l’intérieur du composant App, nous rendons le composant HelloWorld.
• Les className=”App” et className=”App-header” sont pour le style. Vous pouvez trouver ces styles dans le fichier src/App.css.

Exécution de l’application React

Maintenant que nous avons créé notre composant “Hello World” et l’avons rendu, lançons notre application React !

Dans le terminal, assurez-vous d’être dans le répertoire hello-world-react, puis exécutez :

npm start

Cette commande démarre le serveur de développement et ouvre votre application dans le navigateur par défaut. Vous devriez voir “Hello, World!” affiché dans le navigateur avec le paragraphe accompagnant.

Comprendre le code React

• Composants : En React, nous créons des composants UI réutilisables. Notre composant HelloWorld est un simple composant fonctionnel qui renvoie du JSX.
• JSX : JSX nous permet d’écrire du code semblable à du HTML directement dans nos fichiers JavaScript. Cela rend notre code plus lisible et concis.
• Rendu : Dans le composant App, nous rendons le composant HelloWorld. React utilise un DOM virtuel pour mettre à jour efficacement le DOM réel lorsque les composants changent.
• npm start : Cette commande démarre le serveur de développement. Toute modification apportée à votre code rechargera automatiquement l’application dans le navigateur.

Conclusion

Cet exemple simple démontre les concepts de base de React, y compris les composants, JSX et le rendu. En poursuivant votre apprentissage de React, vous explorerez des sujets plus avancés comme la gestion d’état, les props et les méthodes de cycle de vie. La documentation officielle de React est une excellente ressource pour approfondir ces sujets : Documentation React.

Maintenant que vous avez une compréhension de base, n’hésitez pas à expérimenter en ajoutant plus de composants, styles, et fonctionnalités à votre application React. Bonne programmation!