3.20 une syntaxe de fonction alternative

Dans ce cours, nous allons découvrir une syntaxe alternative pour écrire les fonctions de nos composants React : la fonction fléchée (arrow function). Si vous avez suivi les cours JavaScript précédents, vous vous souvenez certainement de ce sujet. L'idée est de transformer toutes les déclarations de fonctions classiques de nos fichiers en arrow functions, afin d'obtenir un code plus concis et plus moderne.

Convertir les composants en fonctions fléchées

La conversion est très simple : on remplace function MaFonction() par const MaFonction = () =>. Nous appliquons ce changement dans tous nos fichiers de composants, y compris dans le dossier Expenses. Cette refonte n'est pas obligatoire : si vous êtes plus à l'aise avec la syntaxe précédente, vous pouvez la conserver. Mais si vous voulez tester quelque chose de nouveau et adopter une approche utilisée dans la majorité des projets React modernes, je vous invite à suivre la démarche.

Voici un exemple type avant/après :

// Avant
function ExpenseItem(props) {
  return <div>...</div>;
}

// Après (arrow function)
const ExpenseItem = (props) => {
  return <div>...</div>;
};

Une fois la conversion appliquée à tous nos fichiers, l'application continue de fonctionner exactement comme avant. C'est juste une question de style et de préférence d'écriture, mais cela uniformise le code et facilite la lecture quand on travaille en équipe.

Bien évidemment, il reste énormément de choses à explorer sur React. La prochaine étape va consister à rendre notre application plus interactive. Pour l'instant, tout est encore statique : les données affichées ne changent jamais. Or, on veut un site qui réagisse aux actions de l'utilisateur et qui soit beaucoup plus agréable à utiliser. On se retrouve dans le prochain cours pour aborder cette interactivité.