JSX

Introduction

Comme nous l'avons appris précédemment, React JSX est une extension de JavaScript. Elle permet au développeur de créer un DOM virtuel en utilisant la syntaxe XML. Il se compile en pur JavaScript (appels de fonction React.createElement). Puisqu'il se compile en JavaScript, il peut être utilisé dans n'importe quel code JavaScript valide. Par exemple, les codes ci-dessous sont parfaitement valides.

• Affecter à une variable.

var greeting = <h1>Hello React!</h1>

• Affecter à une variable en fonction d'une condition.

var canGreet = true; 
if(canGreet) { 
    greeting = <h1>Hello React!</h1> 
}

• Peut être utilisé comme valeur de retour d'une fonction.

function Greeting() { 
    return <h1>Hello React!</h1>
} 
greeting = Greeting()

• Peut être utilisé comme argument d'une fonction.

function Greet(message) { 
    ReactDOM.render(message, document.getElementById('react-app') 
} 
Greet(<h1>Hello React!</h1>)

Expressions

JSX prend en charge les expressions en syntaxe JavaScript pure. L'expression doit être encadrée par des accolades, { }. L'expression peut contenir toutes les variables disponibles dans le contexte, où le JSX est défini. Créons un JSX simple avec une expression.

Exemple

<script type="text/babel">
    var cTime = new Date().toTimeString();
    ReactDOM.render(
        <div><p>The current time is {cTime}</p></div>, 
        document.getElementById('react-app')
    );
</script>