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