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. Fichiers
Commençons à concevoir notre
application. Dans sa première version, nous définirons
trois composants :
-
un composant Task permettant d’afficher
une tâche ;
-
un autre composant TaskList permettant d’afficher
une liste de tâches (nous utiliserons le premier composant Task) ;
-
et enfin notre composant App qui affichera un titre ainsi que
la liste de tâches via le composant TaskList.
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 export default Task.
Le composant TaskList est
un brin plus complexe, mais ne comporte pas de nouveautés ...