JavaScript et React : Creer Votre Premier Composant

Salut HaWkers ! JavaScript est le langage de programmation le plus populaire pour le developpement web front-end, et React est une bibliotheque JavaScript qui est devenue l'une des plus populaires pour la creation d'interfaces utilisateur interactives. Dans ce tutoriel, nous allons creer notre premier composant React.

Preparation de l'Environnement

Avant de commencer, vous devez avoir Node.js et npm (Node Package Manager) installes sur votre ordinateur. Si vous ne les avez pas encore, vous pouvez telecharger Node.js et npm ici. npm sera installe automatiquement lorsque vous installerez Node.js.

Apres les avoir installes, vous pouvez creer un nouveau projet React en utilisant create-react-app, qui est un environnement de developpement pret a l'emploi qui vient avec tout ce dont vous avez besoin pour construire une application React :

npx create-react-app mon-premier-composant

Apres avoir cree le projet, entrez dans le repertoire du projet et demarrez le serveur de developpement :

cd mon-premier-composant
npm start

Maintenant, si vous ouvrez http://localhost:3000 dans votre navigateur, vous verrez la page d'accueil de votre nouveau projet React.

Creation du Composant

Creons un nouveau composant appele MonComposant. Dans le dossier src, creez un nouveau fichier appele MonComposant.jsx. Dedans, nous allons definir et exporter notre composant :

import React from 'react';

function MonComposant() {
  return <div>Bonjour, le monde !</div>;
}

export default MonComposant;

C'est notre premier composant React ! C'est une fonction qui retourne ce que nous voulons afficher dans le navigateur — dans notre cas, une div avec le texte "Bonjour, le monde !".

Utilisation du Composant

Pour utiliser notre nouveau composant, nous allons l'importer dans notre composant App, qui est le composant principal de notre application. Dans le fichier App.jsx, faites ce qui suit :

import React from 'react';
import MonComposant from './MonComposant';

function App() {
  return (
    <div className="App">
      <MonComposant />
    </div>
  );
}

export default App;

Maintenant, si vous ouvrez http://localhost:3000 dans votre navigateur a nouveau, vous verrez le message "Bonjour, le monde !" qui est affiche par notre composant MonComposant.

Conclusion

Et voila ! Vous avez cree et utilise votre premier composant React. Bien sur, c'est un exemple tres basique, et les composants React peuvent faire bien plus que cela. Ils peuvent avoir un etat, recevoir des props, afficher d'autres composants et bien plus encore. Mais j'espere que ce tutoriel vous a donne une idee de comment commencer a creer vos propres composants en utilisant React.

Pour continuer a ameliorer vos competences en JavaScript et React, consultez l'article sur Componentisation en React : Organisation et Reutilisation du Code.

C'est parti !