ReactJS – Introduction à JSX

JSX est une extension de la syntaxe JavaScript qui permet d’écrire du code sous forme de balises directement dans du JavaScript.

Par exemple avec JSX nous pouvons écrire :

var element = <div id="main-element"class="title">Hello, world!</div>;

Ce code doit être transformé en JavaScript pour pouvoir être compréhensible par un navigateur.

L’exemple précédent devra être transformé comme suit :

var element = React.createElement(
  "div",
  {id: "main-element", className: "title"},
  "Hello, world!"
)

Il est tout à fait possible d’écrire directement ce code.

On peut aussi utiliser Babel qui est un compilateur JavaScript qui a pour rôle de transformer du code JavaScript " moderne " (ES6, ReactJs ou autre) en une version compréhensible par tous les navigateurs.

L’attribut HTML class s’écrit className en JSX, cela vient du fait que le mot class est protégé en Javascript.

<!--  Chargement de React et de ReactDOM  -->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!--  Chargement de Babel  -->
<script  src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"></script>
<!--  Positionnement de l'élément à ajouter  -->
<div id="app"></div>
 

Zoom

Testez vos propres exemples sous Jsfiddle. Cliquez ici