{"id":69426,"date":"2023-05-24T11:45:26","date_gmt":"2023-05-24T10:45:26","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=69426&post_type=knowledgebase&preview_id=69426"},"modified":"2025-10-01T20:43:05","modified_gmt":"2025-10-01T19:43:05","slug":"guide-syntaxe-jsx","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/guide-syntaxe-jsx\/","title":{"rendered":"Le guide simple de la syntaxe JSX"},"content":{"rendered":"

Traditionnellement, les d\u00e9veloppeurs<\/a> s\u00e9parent le balisage et la logique dans des fichiers distincts, en utilisant HTML<\/a> pour la structure et CSS<\/a> pour le style, puis en \u00e9crivant JavaScript<\/a> pour g\u00e9rer les interactions et la manipulation des donn\u00e9es.<\/p>\n

Et s’il existait un moyen de combiner ces technologies, de simplifier le processus de d\u00e9veloppement et de faciliter la cr\u00e9ation d’interfaces utilisateur complexes ? C’est l\u00e0 que JSX entre en jeu.<\/p>\n

Dans cet article, vous apprendrez ce qu’est JSX, comment il fonctionne et pourquoi il est important pour cr\u00e9er des interfaces utilisateur dynamiques dans le cadre du d\u00e9veloppement web<\/a>.<\/p>\n

Explorons plus en d\u00e9tail cette technologie r\u00e9volutionnaire.<\/p>\n

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

Qu’est-ce que JSX ?<\/h2>\n

JSX (JavaScript XML<\/a>) est une extension syntaxique pour JavaScript qui permet aux d\u00e9veloppeurs d’\u00e9crire du code de type HTML \u00e0 l’int\u00e9rieur d’un fichier JavaScript. Elle a \u00e9t\u00e9 d\u00e9velopp\u00e9e par Meta (anciennement Facebook).<\/p>\n

La syntaxe de JSX ressemble \u00e0 celle du HTML, avec des balises d’ouverture et de fermeture, des attributs et des \u00e9l\u00e9ments imbriqu\u00e9s.<\/p>\n

Par exemple, vous pouvez \u00e9crire le code JSX suivant pour rendre un simple \u00e9l\u00e9ment d’en-t\u00eate :<\/p>\n

const heading = <h1>Hello, JSX!<\/h1>;<\/code><\/pre>\n
Ce code ressemble \u00e0 du HTML, mais c’est du JavaScript<\/a>. Le mot-cl\u00e9 const cr\u00e9e une nouvelle variable nomm\u00e9e heading, et la valeur de cette variable est le r\u00e9sultat de l’expression JSX.<\/p>\n\n
Comment fonctionne JSX ?<\/h2>\n
JSX est transform\u00e9 en JavaScript normal avant d’\u00eatre ex\u00e9cut\u00e9 dans le navigateur<\/a>. Cette transformation est effectu\u00e9e \u00e0 l’aide d’un outil appel\u00e9 transpileur. Le transpileur le plus populaire pour JSX est Babel.<\/p>\n
Babel transforme le code JSX en une s\u00e9rie d’appels de fonctions. Ces appels de fonction sont \u00e9quivalents au code HTML \u00e9crit en JSX. Le navigateur peut alors ex\u00e9cuter le code JavaScript r\u00e9sultant.<\/p>\n
Par exemple, le code JSX suivant :<\/p>\n
const element = <h1>Hello, world!<\/h1>;<\/code><\/pre>\n
est transform\u00e9 en code JavaScript :<\/p>\n
const element = React.createElement(\"h1\", null, \"Hello, world!\");<\/code><\/pre>\n
Cette transformation permet aux d\u00e9veloppeurs d’\u00e9crire du code dans une syntaxe famili\u00e8re et facile \u00e0 lire, tout en profitant de la puissance et de la flexibilit\u00e9 de JavaScript.<\/p>\n
JSX et React<\/h2>\n
JSX fait partie int\u00e9grante de React<\/a>, permettant aux d\u00e9veloppeurs d’\u00e9crire le balisage et la logique de ces composants dans un seul fichier.<\/p>\n
Voici un exemple simple de code JSX dans un composant<\/a> React :<\/p>\n
import React from 'react';\n\nfunction Greet() {\n  return <h1>Hello World!<\/h1>;\n}\n\nexport default Greeting;<\/code><\/pre>\n
Dans cet exemple, vous avez un composant fonctionnel nomm\u00e9 Greet<\/code> qui rend un \u00e9l\u00e9ment h1<\/code> avec un message d’accueil.<\/p>\n
Le compilateur React transformera ce code en code JavaScript optimis\u00e9 qui peut \u00eatre ex\u00e9cut\u00e9 par le navigateur, permettant au composant d’\u00eatre rendu \u00e0 l’\u00e9cran.<\/p>\n
Voici en quoi le compilateur React transformerait le composant Greet<\/code>:<\/p>\n
import React from 'react'\n\nfunction Greet() {\n  return React.createElement(\"h1\", {}, \"Hello, World!\")\n}<\/code><\/pre>\n
Dans ce code, le code JSX a \u00e9t\u00e9 transform\u00e9 en un appel React.createElement<\/code> qui cr\u00e9e la m\u00eame structure et le m\u00eame contenu que le code JSX original.<\/p>\n
C’est ce qui se passe en coulisses lorsque React compile le code JSX, ce qui lui permet d’\u00eatre ex\u00e9cut\u00e9 par le navigateur. Cependant, le code transform\u00e9 peut \u00eatre moins lisible que le code JSX original.<\/p>\n
Dans la version 17 de React, une nouvelle fonctionnalit\u00e9 de transformation JSX<\/a> a \u00e9t\u00e9 introduite, qui importe automatiquement des fonctions sp\u00e9ciales \u00e0 partir des nouveaux points d’entr\u00e9e du paquet React, ce qui permet aux d\u00e9veloppeurs d’utiliser JSX sans avoir \u00e0 importer React en t\u00eate de leurs fichiers.<\/p>\n
\/\/ Inserted by a compiler (don't import it yourself!)\nimport {jsx as _jsx} from 'react\/jsx-runtime';\n\nfunction App() {\n  return _jsx('h1', { children: 'Hello world' });\n}<\/code><\/pre>\n
Utiliser des expressions JavaScript avec JSX<\/h3>\n
Dans JSX, les expressions JavaScript peuvent \u00eatre int\u00e9gr\u00e9es directement dans le balisage pour g\u00e9n\u00e9rer du contenu de mani\u00e8re dynamique. Cela permet aux d\u00e9veloppeurs d’utiliser du code JavaScript pour calculer des valeurs, effectuer des op\u00e9rations et effectuer un rendu conditionnel du contenu dans leurs composants JSX.<\/p>\n
Cet exemple montre comment utiliser deux expressions JavaScript dans JSX :<\/p>\n
import React from 'react';\n\nconst MyComponent = () => {\n  const name = 'John';\n  const age = 30;\n\n  return (\n    <div>\n      <h1>Hello, {name}!<\/h1>\n      <p>You are {age} years old.<\/p>\n      <p>Next year, you will be {age + 1} years old.<\/p>\n      {age >= 18 && <p>You are an adult.<\/p>}\n    <\/div>\n  );\n};\n\nexport default MyComponent;<\/code><\/pre>\n
Dans cet exemple, des expressions JavaScript telles que {name}<\/code>, {age}<\/code>, {age + 1}<\/code>, et {age >= 18 && <p>You are an adult.<\/p>}<\/code> sont utilis\u00e9es pour rendre le contenu de mani\u00e8re dynamique en fonction des valeurs des variables de nom et d’\u00e2ge.<\/p>\n
Utilisation de CSS avec JSX<\/h3>\n
Les feuilles de style CSS peuvent \u00eatre appliqu\u00e9es aux composants JSX de diff\u00e9rentes mani\u00e8res, telles que les styles en ligne, les fichiers CSS distincts ou les biblioth\u00e8ques CSS en JS. Les styles en ligne sont d\u00e9finis directement dans le balisage JSX \u00e0 l’aide d’objets JavaScript, tandis que les fichiers CSS s\u00e9par\u00e9s ou les biblioth\u00e8ques CSS-in-JS permettent de styliser les composants de mani\u00e8re externe et modulaire.<\/p>\n
Cet exemple montre comment appliquer des styles en ligne d\u00e9finis \u00e0 l’aide d’un objet JavaScript \u00e0 des \u00e9l\u00e9ments \u00e0 l’aide de l’attribut style dans JSX :<\/p>\n
import React from 'react';\n\nconst MyComponent = () => {\n  const styles = {\n    backgroundColor: 'blue',\n    color: 'white',\n    padding: '10px'\n  };\n\n  return (\n    <div style={styles}>\n      <h1>Hello, World!<\/h1>\n      <p>This is a component with inline styles.<\/p>\n    <\/div>\n  );\n};\n\nexport default MyComponent;<\/code><\/pre>\n
Dans cet exemple, les propri\u00e9t\u00e9s CSS telles que backgroundColor<\/code>, color<\/code>, et padding sont d\u00e9finies en tant que paires cl\u00e9-valeur dans l’objet styles, et leurs valeurs sont des cha\u00eenes repr\u00e9sentant les valeurs CSS.<\/p>\n
Remarque :<\/strong> Bien que les styles en ligne offrent souplesse et simplicit\u00e9, il est recommand\u00e9 d’utiliser des classes CSS ou des biblioth\u00e8ques CSS-in-JS pour des styles plus complexes ou r\u00e9utilisables dans des applications plus importantes.<\/p>\n
6 r\u00e8gles JSX importantes<\/h2>\n
Lorsque vous \u00e9crivez du code JSX, vous devez respecter certaines r\u00e8gles pour vous assurer qu’il est valide et facile \u00e0 lire.<\/p>\n
1. Renvoyez toujours un seul \u00e9l\u00e9ment racine<\/h3>\n
En JSX, vous devez toujours renvoyer un seul \u00e9l\u00e9ment racine. Cela signifie que tout votre code JSX doit \u00eatre contenu dans un seul \u00e9l\u00e9ment ext\u00e9rieur. Par exemple, voici un code JSX valide :<\/p>\n
return (\n  <div>\n    <h1>Hello World!<\/h1>\n    <p>This is my first React component.<\/p>\n  <\/div>\n)<\/code><\/pre>\n
Mais ce n’est pas le cas parce qu’il renvoie deux \u00e9l\u00e9ments au lieu d’un :<\/p>\n
return (\n  <h1>Hello World!<\/h1>\n  <p>This is my first React component.<\/p>\n)<\/code><\/pre>\n
Il est important de garder cela \u00e0 l’esprit lorsque vous convertissez des codes HTML en JSX.<\/p>\n
2. Utilisez className au lieu de class<\/h3>\n
En HTML, vous utilisez l’attribut class<\/code> pour sp\u00e9cifier une classe CSS pour un \u00e9l\u00e9ment. Cependant, en JSX, vous devez utiliser l’attribut className<\/code> \u00e0 la place. Par exemple, en JSX, vous devez utiliser l’attribut :<\/p>\n
\/\/ Good\n<div className=\"my-class\">This element has a CSS class.<\/div>\n\n\/\/ Bad\n<div class=\"my-class\">This element has a CSS class.<\/div><\/code><\/pre>\n
L’utilisation de className<\/code> au lieu de class<\/code> est importante et permet d’\u00e9viter les conflits de noms, car class<\/code> est un mot-cl\u00e9 r\u00e9serv\u00e9 en JavaScript.<\/p>\n
3. Utilisez des accolades pour les expressions JavaScript<\/h3>\n
Lorsque vous devez inclure une expression JavaScript dans votre code JSX, vous devez l’entourer d’accolades {}<\/strong>. Cela peut \u00eatre utilis\u00e9 pour tout ce qui concerne l’affichage de donn\u00e9es dynamiques ou le rendu conditionnel de composants. Voici un exemple :<\/p>\n
\/\/ Good\n<div>{myVariable}<\/div>\n\n\/\/ Bad\n<div>myVariable<\/div><\/code><\/pre>\n
Vous pouvez \u00e9galement ex\u00e9cuter des op\u00e9rations math\u00e9matiques \u00e0 l’int\u00e9rieur des accolades, comme par exemple :<\/p>\n
<p>The total cost is {25*10}<\/p><\/code><\/pre>\n
De plus, dans vos accolades, vous pouvez mettre en place des instructions conditionnelles \u00e0 l’aide d’op\u00e9rateurs ternaires :<\/p>\n
<h1>{(x) < 15 ? \"Welcome\" : \"Goodbye\"}<\/h1><\/code><\/pre>\n
Voici un meilleur exemple avec le composant React :<\/p>\n
function Greeting() {\n  const isLoggedIn = true;\n\n  return (\n    <div>\n      {isLoggedIn ? (\n        <h1>Welcome back!<\/h1>\n      ) : (\n        <h1>Please log in.<\/h1>\n      )}\n    <\/div>\n  );\n}<\/code><\/pre>\n
Dans cet exemple, nous d\u00e9finissons un composant Greeting<\/strong>. Le composant utilise l’op\u00e9rateur ternaire pour rendre conditionnellement un message d’accueil bas\u00e9 sur la valeur de isLoggedIn<\/code>. Si isLoggedIn<\/code> est true<\/code>, le composant rend un \u00e9l\u00e9ment h1<\/code> avec le texte \u00ab\u00a0Welcome back !\u00a0\u00bb. Si isLoggedIn<\/code> est false<\/code>, le composant affiche un \u00e9l\u00e9ment h1<\/code> avec le texte \u00ab Please log in. \u00bb.<\/p>\n
4. Utilisez camelCase pour la plupart des choses en JSX<\/h3>\n
En JSX, utilisez la camelCase pour la plupart des choses, y compris les attributs, les gestionnaires d’\u00e9v\u00e9nements et les noms de variables. Cette convention est coh\u00e9rente avec les conventions de d\u00e9nomination JavaScript et contribue \u00e0 la lisibilit\u00e9.<\/p>\n
Par exemple, utilisez onClick au lieu de onclick<\/code>, et className<\/code> au lieu de class<\/code>.<\/p>\n
\/\/ Good\n<button onClick={handleClick} className=\"btn\">Click me!<\/button>\n\n\/\/ Bad\n<button onclick={handle_click} class=\"btn\">Click me!<\/button><\/code><\/pre>\n
5. Fermez toujours les balises<\/h3>\n
En JSX, vous devez toujours fermer vos balises, m\u00eame si elles n’ont pas de contenu. Par exemple, en JSX, vous devez toujours fermer vos balises, m\u00eame si elles n’ont pas de contenu :<\/p>\n
\/\/ Good\n<div><\/div>\n\n\/\/ Bad\n<div\/><\/code><\/pre>\n
6. Utiliser des balises auto-fermantes pour les \u00e9l\u00e9ments vides<\/h3>\n
Si un \u00e9l\u00e9ment n’a pas de contenu, vous pouvez utiliser une balise de fermeture automatique au lieu d’une balise d’ouverture et de fermeture. En voici un exemple :<\/p>\n
\/\/ Good\n<img src=\"my-image.jpg\" alt=\"My Image\"\/>\n\n\/\/ Bad\n<img src=\"my-image.jpg\" alt=\"My Image\"><\/img><\/code><\/pre>\n
Pourquoi JSX est-il important pour le d\u00e9veloppement web ?<\/h2>\n
JSX est important pour le d\u00e9veloppement web pour les raisons suivantes :<\/p>\n
    \n
  1. Il permet aux d\u00e9veloppeurs de cr\u00e9er des interfaces utilisateur de mani\u00e8re plus intuitive et plus famili\u00e8re.<\/li>\n<\/ol>\n
      \n
    1. Au lieu de manipuler directement le DOM, les d\u00e9veloppeurs peuvent utiliser JSX pour d\u00e9crire la structure de leur interface utilisateur d’une mani\u00e8re plus proche de l’\u00e9criture HTML.<\/li>\n<\/ol>\n
        \n
      1. Cela permet un d\u00e9veloppement plus efficace et plus souple. JSX n’\u00e9tant que du JavaScript, les d\u00e9veloppeurs peuvent tirer parti de toutes les fonctionnalit\u00e9s de JavaScript pour cr\u00e9er des interfaces utilisateur plus complexes et plus dynamiques.<\/li>\n<\/ol>\n
          \n
        1. Il s’agit d’une partie importante de la biblioth\u00e8que React<\/a>, qui est l’un des choix les plus populaires pour la construction d’interfaces utilisateur dans le d\u00e9veloppement web moderne. Si vous souhaitez utiliser React, vous devrez apprendre JSX.<\/li>\n<\/ol>\n\n
          R\u00e9sum\u00e9<\/h2>\n
          JSX est une extension syntaxique pour JavaScript qui permet aux d\u00e9veloppeurs d’\u00e9crire des balises de type HTML \u00e0 l’int\u00e9rieur d’un fichier JavaScript. Cela facilite la cr\u00e9ation d’interfaces utilisateur dynamiques et interactives pour les applications web.<\/p>\n
          Vous avez appris quelques r\u00e8gles \u00e0 suivre lors de l’utilisation de JSX – en suivant ces r\u00e8gles, nous pouvons \u00e9crire un code propre, lisible et maintenable qui est coh\u00e9rent avec les conventions de nommage JavaScript.<\/p>\n","protected":false},"excerpt":{"rendered":"
          Traditionnellement, les d\u00e9veloppeurs s\u00e9parent le balisage et la logique dans des fichiers distincts, en utilisant HTML pour la structure et CSS pour le style, puis en …<\/p>\n","protected":false},"author":287,"featured_media":69427,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[979,1020],"class_list":["post-69426","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-frameworks-javascript","topic-outils-developpement-web"],"yoast_head":"\nLe guide simple de la syntaxe JSX - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Apprenez tout sur JSX (JavaScript XML), une extension syntaxique pour JavaScript qui permet aux d\u00e9veloppeurs d'\u00e9crire du code de type HTML \u00e0 l'int\u00e9rieur d'un fichier JavaScript.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/fr\/blog\/guide-syntaxe-jsx\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Le guide simple de la syntaxe JSX\" \/>\n<meta property=\"og:description\" content=\"Apprenez tout sur JSX (JavaScript XML), une extension syntaxique pour JavaScript qui permet aux d\u00e9veloppeurs d'\u00e9crire du code de type HTML \u00e0 l'int\u00e9rieur d'un fichier JavaScript.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/guide-syntaxe-jsx\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-24T10:45:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-01T19:43:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/what-is-jsx.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1500\" \/>\n\t<meta property=\"og:image:height\" content=\"750\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Apprenez tout sur JSX (JavaScript XML), une extension syntaxique pour JavaScript qui permet aux d\u00e9veloppeurs d'\u00e9crire du code de type HTML \u00e0 l'int\u00e9rieur d'un fichier JavaScript.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/what-is-jsx.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/guide-syntaxe-jsx\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/guide-syntaxe-jsx\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Le guide simple de la syntaxe JSX\",\"datePublished\":\"2023-05-24T10:45:26+00:00\",\"dateModified\":\"2025-10-01T19:43:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/guide-syntaxe-jsx\/\"},\"wordCount\":1599,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/guide-syntaxe-jsx\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/what-is-jsx.jpg\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/guide-syntaxe-jsx\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/guide-syntaxe-jsx\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/guide-syntaxe-jsx\/\",\"name\":\"Le guide simple de la syntaxe JSX - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/guide-syntaxe-jsx\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/guide-syntaxe-jsx\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/what-is-jsx.jpg\",\"datePublished\":\"2023-05-24T10:45:26+00:00\",\"dateModified\":\"2025-10-01T19:43:05+00:00\",\"description\":\"Apprenez tout sur JSX (JavaScript XML), une extension syntaxique pour JavaScript qui permet aux d\u00e9veloppeurs d'\u00e9crire du code de type HTML \u00e0 l'int\u00e9rieur d'un fichier JavaScript.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/guide-syntaxe-jsx\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/guide-syntaxe-jsx\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/guide-syntaxe-jsx\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/what-is-jsx.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/what-is-jsx.jpg\",\"width\":1500,\"height\":750},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/guide-syntaxe-jsx\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Outils de d\u00e9veloppement web\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/outils-developpement-web\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Le guide simple de la syntaxe JSX\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/fr\/#website\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d'h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Le guide simple de la syntaxe JSX - Kinsta\u00ae","description":"Apprenez tout sur JSX (JavaScript XML), une extension syntaxique pour JavaScript qui permet aux d\u00e9veloppeurs d'\u00e9crire du code de type HTML \u00e0 l'int\u00e9rieur d'un fichier JavaScript.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/fr\/blog\/guide-syntaxe-jsx\/","og_locale":"fr_FR","og_type":"article","og_title":"Le guide simple de la syntaxe JSX","og_description":"Apprenez tout sur JSX (JavaScript XML), une extension syntaxique pour JavaScript qui permet aux d\u00e9veloppeurs d'\u00e9crire du code de type HTML \u00e0 l'int\u00e9rieur d'un fichier JavaScript.","og_url":"https:\/\/kinsta.com\/fr\/blog\/guide-syntaxe-jsx\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2023-05-24T10:45:26+00:00","article_modified_time":"2025-10-01T19:43:05+00:00","og_image":[{"width":1500,"height":750,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/what-is-jsx.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Apprenez tout sur JSX (JavaScript XML), une extension syntaxique pour JavaScript qui permet aux d\u00e9veloppeurs d'\u00e9crire du code de type HTML \u00e0 l'int\u00e9rieur d'un fichier JavaScript.","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/what-is-jsx.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Joel Olawanle","Dur\u00e9e de lecture estim\u00e9e":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/guide-syntaxe-jsx\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/guide-syntaxe-jsx\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Le guide simple de la syntaxe JSX","datePublished":"2023-05-24T10:45:26+00:00","dateModified":"2025-10-01T19:43:05+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/guide-syntaxe-jsx\/"},"wordCount":1599,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/guide-syntaxe-jsx\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/what-is-jsx.jpg","inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/guide-syntaxe-jsx\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/guide-syntaxe-jsx\/","url":"https:\/\/kinsta.com\/fr\/blog\/guide-syntaxe-jsx\/","name":"Le guide simple de la syntaxe JSX - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/guide-syntaxe-jsx\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/guide-syntaxe-jsx\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/what-is-jsx.jpg","datePublished":"2023-05-24T10:45:26+00:00","dateModified":"2025-10-01T19:43:05+00:00","description":"Apprenez tout sur JSX (JavaScript XML), une extension syntaxique pour JavaScript qui permet aux d\u00e9veloppeurs d'\u00e9crire du code de type HTML \u00e0 l'int\u00e9rieur d'un fichier JavaScript.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/guide-syntaxe-jsx\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/guide-syntaxe-jsx\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/guide-syntaxe-jsx\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/what-is-jsx.jpg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/what-is-jsx.jpg","width":1500,"height":750},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/guide-syntaxe-jsx\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Outils de d\u00e9veloppement web","item":"https:\/\/kinsta.com\/fr\/sujets\/outils-developpement-web\/"},{"@type":"ListItem","position":3,"name":"Le guide simple de la syntaxe JSX"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/fr\/#website","url":"https:\/\/kinsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d'h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinsta.com\/fr\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/69426","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=69426"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/69426\/revisions"}],"predecessor-version":[{"id":69439,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/69426\/revisions\/69439"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69426\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69426\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69426\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69426\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69426\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69426\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69426\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69426\/translations\/es"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69426\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/69427"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=69426"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=69426"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=69426"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}