Diviser notre code en composants

Créer des composants

Ce chapitre va vous montrer comment créer des composants React.JS. Nous allons donc découper notre maquette initiale pour extraire les 4 compostant suivants :

• le header
• le formulaire
• la liste
• le footer

💡 Nous pourrions aller plus loin en créant un sous-composant représentant une entrée de la liste. Pour cette vidéo de découverte, nous irons cependant à l'essentiel.

Créez dès maintenant un dossier "components" dans "src". Ça n'est pas obligatoire, mais cela reste une bonne pratique pour ranger nos composants.

Le composant "Header"

Créez un fichier "Header.js" dans le dossier "components". Nous allons récupérer le code de balise header du fichier "App.js" pour en faire un composant :

import logo from '../logo.svg';

const Header = ({todos}) => { 
    return (
        <header>
            <img src={logo} alt="" />
            <h1>TO DO LIST</h1>
        
            <div>
                <i className="fas fa-tasks"></i>
                <span>{ (todos.filter(todo => !todo.done)).length } / {todos.length}</span>
            </div>
        </header>        
    )
}

export default Header;

Comme nous l'avons vu précédemment, un composant est une fonction qui retourne du JSX. C'est ce que nous avons fait ici.

En JavaScript, du code déporté dans un fichier est nommé "module". Il est nécessaire d'exporter notre composant pour pouvoir l'utiliser dans d'autres fichiers.

💡 Notez, sur la première ligne, que le chemin

Vous pouvez maintenant importer le composant dans le fichier "App.js" (import Header from './components/Header') avant de remplacer le code du header par l'appel au composant : <Header/>

Les autres composants

Reproduisez maintenant la démarche pour créer les composants :

• Form
• List
• Footer

Vous devriez obtenir un fichier "App.js" proche de ce modèle :

import './App.css';
import '@fortawesome/fontawesome-free/css/all.css'
import {Fragment} from 'react'
import Header from './components/Header';
import Footer from './components/Footer';
import Form from './components/Form';
import List from './components/List';

function App() {

  return (
    <Fragment>
      <Header/>
      <main>
        <Form />
        <List />
      </main>
      <Footer/>
    </Fragment>
  );
}

export default App;

""