Comment corriger l'erreur Expected an assignment or function call and instead saw an expression ?
JSX est une extension du langage de programmation JavaScript. Elle permet de mixer du code HTML ou XML et JavaScript ensemble de manière plus simple. Le code sera traduit par un transcompilateur, comme Babel, pour être transformé en code JavaScript classique afin d'être interprété par n'importe quel navigateur. Cette écriture a été popularisée par le framework ReactJS. On l'utilise pour écrire le code HTML des composants. Le message d'erreur "Expected an assignment or function call and instead saw an expression" vient de cette nouvelle syntaxe.
La syntaxe JSX permet de réduire considérablement la longueur du code que vous allez écrire en JavaScript et en HTML. Une de ses propriétés est le fait de pouvoir, avec la flèche, stocker le résultat d'une fonction directement dans une variable.
//Javascript classique
function maFonction {
return document.createElement('span');
}
let maVariable = maFonction();
//JSX
let maVariable => ( <span></span> );
Il faut cependant faire attention aux caractères que vous écrivez. Si vous aviez mis la balise "<span>" entre des accolades, alors vous auriez obtenu le message d'erreur "Expected an assignment or function call and instead saw an expression". En effet, le fait de mettre le code entre parenthèses indique qu'il va être automatiquement retourné. Si vous utilisez des accolades, vous devez alors ajouter le mot-clé "return" pour indiquer que vous retournez une valeur.
//Erreur
let maVariable => { <span></span> };
//Correct
let maVariable => ( <span></span> );
//Correct avec les accolades
let maVariable => { return <span></span> };
Vous devez faire attention également aux conditions si vous choisissez d'utiliser des parenthèses. Seules les conditions utilisant l'opérateur ternaire sur une seule ligne sont possibles dans ce cas.