React par la pratique – 2 : Votre premier composant React

composant avec React

Sommaire

Introduction

Dans l’article précédent on a vu comment préparer notre environnement de développement pour pouvoir utiliser une version moderne de Javascript supportant la syntaxe React.

Tout est en place donc pour créer notre premier composant, sur ce on va créer un classique : le Hello World.

Avant de commencer

Je vous recommande de lire la documentation officielle de React afin de comprendre tout les concepts derrière les composants React, car je suppose qu’elle est très bien faite.

En effet dans cet article je vais aborder les aspects techniques et qui peuvent causer des problèmes quand on commence avec React.

Ressources à consulter:

  1. Introduction à React
  2. Documentation officielle

Création d’un composant React

1 – Installer les dépendances

commencez donc par installer React avec la commande ci-dessous:

npm i --save react react-dom

Ceci va installer et ajouter au fichier package.json les deux dépendances suivantes :
* react: La librairie principale.
* react-dom: pour permettre à React de manipuler le DOM et ainsi d’être utilisé dans un navigateur.

2 – Création d’un composant simple

On va ensuite créer un simple composant qui affiche le message « Hello World »

Pour faire cela on a le choix entre deux déclarations possibles:

Option 1 : Composant React:
// file : src/App.jsx

import React from 'react';

export default class App extends React.Component {
   render() {
      return <div>Hello world</div>
   }
}

Dans la première déclaration on a :

  1. un composant avec un état interne ( state )
  2. de la possibilité de contrôler tout se qui se passe durant son cycle de vie via les hooks ( componentDidMount, componentDidUpdate … )
Option 2 : Utiliser un « Pure function »:
export default function App() {
 return <div>Hello world</div>
}

Cette déclaration quand à elle propose un composant très léger qui ne fait que l’affichage du message.

Jusque là on n’a fait que déclarer le composant, on va ensuite l’utiliser dans notre page, on dit alors qu’on monte dans notre page.

Finalement on modifie le point d’entrée de l’application pour utiliser ce composant.

// file : src/index.jsx

import React from 'react';
import { render } from 'react-dom';

import App from './App'

render( <App />, document.getElementById('react-app'))

ceci va monter le composant App dans l’élément HTML ayant l’ID ‘react-app‘.

Pour terminer voici donc le contenu du fichier **index.html ** contenant cet élément.

<!-- file : src/index.jsx -->

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Exemple React</title>
    </head>

    <body>
        <div id="react-app"></div>
    </body>

</html>

à noter que webpack se charge d’injecter le fichier javascript compilé dans la page HTML sous le nom de ** bundle.js**.

Code source

Le code source est disponible sur github au tag suivant step-1 pour pointer directement sur cette étape.

pour rappel, voici la commande pour choisir un tag avec git :

git checkout step-1

Suite

Dans le prochain chapitre on va aborder les concepts de State et props à travers la création d’un composant.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *