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

En résumé

Cette leçon explore les fonctions fléchées (arrow functions) comme syntaxe alternative en JavaScript/React. L'instructeur vous invite à remplacer votre code existant par des fonctions fléchées pour une meilleure pratique, tout en rappelant que c'est optionnel. La leçon prépare le terrain pour les prochains concepts plus interactifs : rendre le site dynamique au lieu d'afficher des données statiques.

Points clés

• Les fonctions fléchées offrent une syntaxe alternative moderne pour remplacer les fonctions classiques JavaScript
• Le refactoring du code vers les fonctions fléchées est recommandé mais optionnel selon votre préférence
• Actuellement, les composants React affichent des données statiques qui ne changent jamais
• La prochaine étape consistera à rendre l'application plus interactive et engageante pour l'utilisateur
• Les fonctions fléchées sont couvertes dans le cours JavaScript, accessible en cas de besoin

Questions fréquentes

Pourquoi utiliser les fonctions fléchées au lieu des fonctions classiques ?

Les fonctions fléchées offrent une syntaxe plus concise et moderne. L'instructeur les recommande pour le projet, bien que l'ancien code soit également fonctionnel. C'est une bonne pratique JavaScript.

Est-ce que je suis obligé de remplacer tout mon code par des fonctions fléchées ?

Non, ce n'est pas obligatoire. Vous pouvez continuer avec votre syntaxe actuelle si vous vous sentez plus à l'aise. Cependant, le cours vous invite à tester la conversion pour progresser dans la maîtrise du langage.

Quel est l'objectif après l'apprentissage des fonctions fléchées ?

L'objectif suivant est de rendre le site plus interactif en rendant les données dynamiques plutôt que statiques. Cela permettra de créer une expérience utilisateur plus engageante et agréable.