Découverte de React

Installation des outils requis

Création du premier projet

Une fois que les outils nécessaires sont installés, commençons sans plus tarder. Créons un dossier, par exemple hello-react, et ouvrons un terminal dans ce dossier. Sans rentrer dans les détails pour le moment, sachez que React utilise une syntaxe qui lui est propre pour écrire les composants (un ajout au langage JavaScript), et donc qu’il est nécessaire de passer par une phase de compilation (en fait, de transpilation, c’est-à-dire la transformation d’un langage vers un autre), pour obtenir un code JavaScript que les navigateurs savent interpréter.

De nombreux outils existent afin de faire cette transformation et, au passage, de permettre par exemple de profiter des dernières nouveautés de JavaScript non prises en charge par tous les navigateurs, ou encore de découper notre application en fichiers comme bon nous semble. Parmi les plus connus, citons notamment Webpack très utilisé pour de très gros projets pour toutes les options et plugins qu’il propose.

Create-React-App (https://github.com/facebook/create-react-app) est également de plus en plus utilisé et permet de générer le squelette d’une application React en une seule commande.

Pour nos exemples, j’ai décidé d’utiliser un outil plus minimaliste : Parcel (https://parceljs.org/). Pour l’installer, nous utiliserons Yarn (ou NPM). Initialisons donc notre projet, et installons Parcel et les bibliothèques et outils qui nous seront utiles :

$ yarn init -y 
$ yarn add --dev parcel-bundler babel-preset-env \ 
   babel-preset-react 
$ yarn add react react-dom 

Une fois tout cela installé, nous allons modifier le fichier package.json (généré par Yarn), afin d’y ajouter les deux sections suivantes (avant l’accolade fermante } à la fin) :

{ 
 // ... 
 "scripts": { 
   "start": "parcel public/index.html" 
 }, 
 "babel": { 
   "presets": ["env", "react"] ...

Le langage JSX

Au fur et à mesure, vous verrez que le JSX est un langage très intuitif à utiliser. Voici deux propriétés de base pour ce qui est des balises utilisées :

Pour ce qui est des propriétés :

Pour les composants comme pour...

Un composant par fichier

Dans les exemples que nous venons de voir, il n’y avait qu’un seul fichier JavaScript où l’on déclarait nos composants. Pour des raisons évidentes, il serait intéressant de séparer nos composants en plusieurs fichiers.

Commençons à concevoir notre application. Dans sa première version, nous définirons trois composants :

De manière assez intuitive, nous créerons donc trois fichiers, un pour chaque composant.

Commençons avec le composant Task :

// src/Task.js 
import React from 'react' 
 
const Task = ({ task }) => <span>{task.label}</span> 
 
export default Task 

Rien de bien nouveau ici : nous créons un composant Task, auquel sera passé en propriété un objet task, contenant les informations sur la tâche à afficher. Cet objet aura un attribut label, que nous afficherons dans une balise span.

Comme notre fichier contient notre composant, nous souhaitons l’importer dans d’autres fichiers ; il est donc exporté par l’instruction...

Ajouter du style

Jusque-là, nous nous sommes occupés du contenu à afficher, pas vraiment de l’aspect visuel. Il est bien évidemment possible d’utiliser du CSS avec React, voyons comment.

Tout d’abord, la première chose à savoir est que dans la mesure où le contenu généré n’est constitué que d’éléments HTML bien standards, il est tout à fait possible d’utiliser une feuille de styles CSS, comme avec du HTML classique.

Il suffit :

Non seulement cette méthode fonctionne, mais elle est même utilisée par de nombreux développeurs, en raison de la similitude avec ce qui est fait depuis des années lorsqu’on écrit du HTML ou qu’on le génère avec du PHP par exemple.

Cependant la philosophie de React veut plutôt que l’on réfléchisse en termes de composants au maximum autonomes. Il serait donc dommage de séparer d’un composant les styles CSS qui le concernent.

La première option pour rapprocher un composant...