JSX (JavaScript XML — React)
Les fichiers JSX (.jsx) contiennent du JavaScript avec une syntaxe de type XML pour décrire les éléments d'interface utilisateur. JSX est la base du développement de composants React, permettant aux développeurs d'écrire du HTML au sein de la logique JavaScript.
Type MIME
text/jsx
Type
Texte
Compression
Sans perte
Avantages
- + Intuitive HTML-like syntax for UI component definitions
- + Full JavaScript power within markup expressions
- + Component composition is clear and readable
Inconvénients
- − Requires transpilation — cannot run directly in browsers
- − Mixes concerns (markup + logic) which some developers dislike
- − Must use className instead of class (React-specific)
Quand utiliser .JSX
Utilisez JSX pour les composants React. Utilisez .jsx pour le JavaScript pur avec JSX, .tsx pour TypeScript avec JSX. La plupart des bundlers modernes (Vite, esbuild) gèrent les deux nativement.
Détails techniques
JSX est du sucre syntaxique qui se transpile en appels React.createElement() (classique) ou en runtime JSX automatique (React 17+). Prend en charge les expressions dans les accolades, les composants sous forme de balises en majuscule et les fragments (<>...).
Historique
Facebook a introduit JSX en 2013 aux côtés de React. Bien qu'initialement controversé pour le mélange de HTML et de logique, JSX est devenu le modèle d'interface utilisateur standard pour React et a influencé d'autres frameworks (Solid.js, Preact).