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

<div id="pos"></div>

const Hello = function(){
       //Donner à React le code HTML à afficher
	return 
Hello world
}
//// Demander à React d'attacher le composant Hello à la div qui a pour id 'pos' 
ReactDOM.render(<Hello />, document.getElementById('pos'));

Ajouter un style (noter fontSize au lieu de font-size avec les CSS)

Le style est un objet {} et on ajoute un objet {{ }}

const Hello = function(){
	return <h1 style={{color: 'red',fontSize: '40px'}}>Hello world</h1>
}

Ajouter une classe (noter className au lieu de class avec HTML)

const Hello = function(){
	return <h1 className= "entete" >Hello world</h1>

Testez vos propres exemples sous Jsfiddle. Cliquez ici