{"id":68156,"date":"2023-04-13T07:32:48","date_gmt":"2023-04-13T06:32:48","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=68156&post_type=knowledgebase&preview_id=68156"},"modified":"2025-10-01T20:43:27","modified_gmt":"2025-10-01T19:43:27","slug":"react-must-be-in-scope-when-using-jsx","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/react-must-be-in-scope-when-using-jsx\/","title":{"rendered":"Comment corriger l’erreur \u00ab React Must Be in Scope When Using JSX \u00bb (5 m\u00e9thodes)"},"content":{"rendered":"

Travailler avec React<\/a> peut parfois s’av\u00e9rer d\u00e9licat, notamment lorsqu’il s’agit de g\u00e9rer des erreurs qui ne sont pas toujours faciles \u00e0 comprendre.<\/p>\n

Une erreur courante que les d\u00e9veloppeurs peuvent rencontrer est l’erreur \u00ab React must be in scope when using JSX \u00bb. Cette erreur se produit lorsque React n’est pas correctement import\u00e9 ou initialis\u00e9 dans un composant qui utilise la syntaxe JSX.<\/p>\n

Dans cet article, nous allons examiner les causes de cette erreur et fournir des solutions pour la corriger.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Quelles sont les causes de l’erreur \u00ab React must be in scope when using jsx \u00bb ?<\/h2>\n

JSX (JavaScript XML) est une extension syntaxique qui vous permet d’\u00e9crire du code de type HTML<\/a> en JavaScript<\/a>. Les navigateurs ne comprennent pas JSX, mais les bo\u00eetes \u00e0 outils pr\u00e9-configur\u00e9es comme Create React App incluent un outil de transformation JSX sous le capot qui convertit le code JSX en code JavaScript valide, qui peut \u00eatre interpr\u00e9t\u00e9 par les navigateurs.<\/p>\n

Dans les versions de React ant\u00e9rieures \u00e0 la 17.0, JSX \u00e9tait transform\u00e9 en appels de fonction React.createElement()<\/code> par le transformateur JSX au moment de la compilation. Cela n\u00e9cessitait d’importer React pour que les \u00e9l\u00e9ments React fonctionnent. Avec l’introduction d’un nouveau transformateur JSX dans React v17.0, les fonctions sp\u00e9ciales des nouveaux points d’entr\u00e9e du paquet React sont automatiquement import\u00e9es, ce qui \u00e9limine la n\u00e9cessit\u00e9 d’importer React dans chaque fichier qui utilise explicitement JSX.<\/p>\n

\u00c0 titre d’exemple, examinons le composant fonctionnel suivant :<\/p>\n

function App() {\n  return <h1>Welcome to Kinsta!<\/h1>;\n}<\/code><\/pre>\n
Au moment de la compilation, il est transform\u00e9 en JavaScript normal :<\/p>\n
function App() {\n  return React.createElement('h1', null, 'Welcome to Kinsta!');\n}<\/code><\/pre>\n
React n’\u00e9tant pas d\u00e9fini, l’erreur \u00ab ‘React’ must be in scope when using jsx. \u00bb sera toujours affich\u00e9e<\/p>\n\n
2 fa\u00e7ons de corriger l’erreur \u00ab Ract must be in scope when using jsx \u00bb<\/h2>\n
Cette erreur peut \u00eatre corrig\u00e9e de plusieurs mani\u00e8res en fonction de la version de React que vous utilisez.<\/p>\n