Votre premier composant React - Partie 1

Aujourd’hui, je vous propose d’écrire votre premier composant React : c’est une introduction parfaite si vous débutez et que vous voulez faire un premier pas vers cette librairie.

Vincent Bocquet
Aug 8, 2017 · 8 min read

On va s’attacher à rester le plus simple possible, sur un seul fichier html.

Histoire de ne pas faire un simple bouton et d’avoir un objectif plus stimulant, je vous propose de concevoir une carte produit qui pourrait trouver sa place dans une page liste d’un site e-commerce :

À travers cela, on va pouvoir aborder toutes les notions de bases de React : les composants, le JSX, les props, les states et le cycle de vie.

Dans cette première partie, on va créer notre composant en “statique”, et nous verrons ensuite dans une deuxième partie comment rendre notre produit configurable et gérer l’événement d’ajout au panier.

On se lance ?

1 . Création d’un fichier HTML

Pour ce tutoriel, on va tout écrire dans un seul fichier HTML :

  • le JS
  • les styles CSS
  • et bien sûr la structure HTML de base

Ce n’est clairement pas une bonne pratique pour coder une application entière mais dans notre cas, c’est parfait pour débuter.

Ouvrez donc votre éditeur de texte (https://atom.io/ si vous n’en avez pas encore) et créez un fichier index.html vide :

Ouvrez également ce fichier dans votre navigateur web en parallèle, vous pourrez ainsi recharger la page facilement quand on effectuera des ajouts dans le code, et voir le résultat :

Maintenant que tout est en place, on va pouvoir écrire la structure de base de notre fichier HTML. Rien de spécial ici, il s’agit simplement de la base de tout fichier HTML : un doctype, une balise <html> qui contient un <head> et un <body> :

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8">
<title>Mon premier composant React</title>
</head>
<body>

</body>
</html>

Écrivez à votre tour cette structure dans votre fichier HTML. Vous pouvez recharger la page sur votre navigateur mais elle restera blanche : on n’affiche rien de spécial pour le moment.

2. Appel de la librairie React

Maintenant que nous avons un fichier HTML prêt, on va devoir appeler la librairie React pour pouvoir l’utiliser. Et ce n’est pas un mais deux fichiers JS qu’il va falloir utiliser :

  • React : La librairie du coeur de React
  • ReactDOM : La librairie pour interagir avec le DOM HTML de notre page

Le plus simple dans notre cas est de les appeler simplement avec deux balises <script> juste avant la fermeture du body :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mon premier composant React</title>
</head>
<body>

<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
</body>
</html>

3. Mise en place de Babel

Dans ce tutoriel, on va utiliser les dernières librairies et fonctionnalités Javascript. Ces fonctionnalités ne sont malheureusement pas toutes disponibles nativement sur nos navigateurs, même modernes.

Pour remédier à cela, il existe des transpileurs, qui transforme notre code Javascript moderne dans un code lisible entièrement par notre navigateur.

Babel (ou BabelJs) est l’un des transpileurs les plus connus. C’est lui que nous allons utiliser sur notre projet, et c’est très simple à mettre en place.

Ajoutez simplement ce script qui appelle la librairie Babel sous les deux scripts React et ReactDOM :

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

Sous ce script, on va également pouvoir créer une balise <script> vide dans laquelle on viendra écrire l’ensemble de notre composant. Pour indiquer qu’il faut transpiler le code, on ajoute simplement un attribut type="text/babel" .

À noter que nous n’aurons plus à interagir avec Babel. Maintenant qu’il est en place dans notre page HTML, vous pouvez l’oublier : il va faire son travail tout seul, automatiquement. Ne perdez donc pas trop de temps ici si vous êtes perdu, ce n’est pas l’essentiel.

Pour résumer, votre code HTML doit maintenant ressembler à cela :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mon premier composant React</title>
</head>
<body>
<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

4. Ajout d’une <div> pour injecter notre composant

Maintenant que React est appelé, il va falloir définir une <div> cible dans notre fichier HTML afin que nous puissions y injecter notre composant.

Ajoutez donc simplement une <div> avec un id “root” dans votre body :

<body>
<div id="root">/div>

Elle doit se trouver juste après l’ouverture du <body>, avant nos différentes balises <script>. React a effet d’un élément HTML existant afin d’y injecter ce que l’on va créer avec.

5. Création de la base du composant

Maintenant que la structure est en place, on va enfin pouvoir déclarer notre premier composant.

Comme nous l’avions vu plutôt, on va travailler essentiellement dans notre balise <script> vide, Elle est prête à recevoir du javascript.

Pour déclarer notre composant dans la page, on va utiliser la méthode render() de ReactDOM qui permet d’afficher un élément dans le DOM :

<script type="text/babel">
ReactDOM.render(
<Produit />,
document.getElementById('root')
);
</script>

On vient en quelques lignes d’appeler notre premier composant, dont le nom est “Produit”. Seulement si on rafraichit notre page index.html sur le navigateur, rien ne se passe : C’est normal, on vient d’appeler un composant qui n’existe pas encore.

On va donc le créer juste au-dessus, afin de pouvoir l’appeler ensuite :

<script type="text/babel">
class Produit extends React.Component {
render() {
return <div>Notre produit</div>;
}
}

Le moyen le plus explicite pour déclarer un composant est d’utiliser une classe Javascript. On peut voir cela comme une sorte de boite qui contient la définition de notre composant, et la manière dont il doit être rendu.

L’avantage ici est que notre classe se base sur une classe fournie directement par la librairie : React.Component. On va ainsi pouvoir s’appuyer sur ce composant de base pour créer le nôtre. Pour faire cela, il faut simple dire que notre composant “étend” le composant de base :

class Produit extends React.Component { }

Notre classe peut avoir des fonctions spécifiques en elle. C’est ce qu’on appelle des méthodes. Parmi les méthodes utiles, il existe la méthode render :

render() { }

Render va s’occuper de retourner un élément JSX.

Qu’est-ce que le JSX ? C’est tout simple, c’est un mélange entre l’XML / HTML et le Javascript. Un élément JSX peut-être déclaré avec des balises HTML, ou par exemple avec un composant.

De manière générale, render() contient ce qui va être affiché dans notre page HTML. Dans notre cas, c’est une simple <div> avec le nom de notre produit :

class Produit extends React.Component {
render() {
return <div>Notre produit</div>;
}
}

A noter que render() est obligatoire, vous ne pouvez pas déclarer un composant sans la définir.

Vous pouvez rafraichir votre navigateur et vous verrez enfin votre premier Composant affiché :

Bien sûr, c’est très basique et plutôt standard, mais c’est bien votre premier composant. Nous allons l’utiliser comme base pour l’améliorer visuellement et vous verrez que nous allons en faire petit à petit quelque chose d’intéressant !

6. Amélioration du HTML

Maintenant que nous avons la base de notre composant, nous allons rapidement améliorer sa structure HTML. Cela va nous permettre de nous rapprocher du rendu final que l’on souhaite avoir.

Ici, rien de bien compliqué et pas réellement lié à React, on va juste améliorer le rendu brut de notre composant. Voici ce que je vous propose de modifier :

  • Ajouter une image de présentation du produit
  • Insérer un bouton pour l’ajout au panier
  • Ajouter le prix du produit
  • Insérer le titre, prix et bouton dans une <div>
  • Ajouter des classes CSS pour y associer des styles par la suite

Voici la méthode render() complète avec ces changements :

render() {
return (
<div className="Product">
<img src="http://lorempixel.com/240/180/technics/7" />
<div className="Content">
<h1>Casque audio</h1>
<span><strong>Prix :</strong> 14€99</span>
<button>Ajouter au panier</button>
</div>
</div>
);
}

Tous ces ajouts n’ont pour le moment rien de spécifique à React, à part la façon dont l’attribut de classe CSS est déclaré : className au lieu de class. On peut très bien sortir notre <div> de la méthode return(), remplacer le nom de l’attribut className par class et utiliser directement notre <div> dans une page HTML, sans React.

7. Améliorer l’aspect du composant avec les CSS

Maintenant que nous avons une structure HTML plus fournie pour notre carte produit, il est temps d’y apporter quelques styles CSS.

On ne va pas trop s’attarder sur cette partie, elle n’est pas spécifique à React non plus. Voilà ce que je vous propose d’insérer comme styles :

body {
background: #f2f1f4;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

Ce n’est pas indispensable mais je pars avec l’idée qu’il est toujours plus agréable de bosser sur un composant qui a un aspect plus sympa. Vous pouvez aussi adapter les styles selon vos envies, cela n’aura pas d’impact sur la suite du tutoriel.

8. Récapitulatif du code complet

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mon premier composant React</title>

Et voici le rendu dans le navigateur :

Conclusion de cette première partie

Nous venons de construire notre premier composant React. Cela montre bien qu’il est possible de démarrer avec cette librairie de façon rapide, sans nécessairement mettre en place une stack complexe et riche.

Dans la 2ème et dernière partie, nous verrons comment dynamiser ce composant grâce aux state et props et ainsi rendre notre carte produit interactive !

Vincent Bocquet

Written by

Développeur Full-Stack (React, Javascript, PHP, Ruby On Rails, WordPress)

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade