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 ...