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 :

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