Utiliser JSX et React

Ce que vous allez créer

JSX est similaire à un mélange de XML et HTML. Vous utilisez JSX dans le code React pour créer facilement des composants pour vos applications. JSX se transforme en JavaScript lorsque React compile le code.

React vous permet de créer du code réutilisable et de structurer facilement votre application à partir d'un état d'esprit basé sur les composants. Enfin, l’écart entre maquiller des structures filaires d’idées formées sémantiquement et les mettre en œuvre n’a jamais été aussi étroit..

Votre premier goût de JSX

Voici un exemple d'utilisation de JSX pour le rendu HTML:

js var div =

; ReactDOM.render (div, document.getElementById ('exemple'));

Pour créer un composant, utilisez simplement une variable locale commençant par un lettre majuscule, par exemple.:

"js var MyComponent = React.createClass (//); var myElement = ;

ReactDOM.render (myElement, document.getElementById ('exemple')); "

Remarque: JSX contient des mots réservés, car il s’agit essentiellement de JavaScript après des mots clés tels que classe et pour sont déconseillés en tant que noms d'attributs. Au lieu de cela, les composants React attendent les noms de propriété React tels que nom du cours et htmlFor, par exemple.

Balises de nidification

Spécifiez les enfants dans votre JSX comme suit:

"js var utilisateur, profil;

// Vous écrivez dans JSX: var app = Cliquez sur ;

// Ce qui sera affiché dans JS: var app = React.createElement (Utilisateur, className: "vip-user", React.createElement (Profile, null, "clic")); "

Tester JSX

Utilisez le Babel REPL pour tester JSX.

Sous-composants et espaces de noms

La création de formulaires est simple avec JSX et ses sous-composants, par exemple:

"js var Form = FormComponent;

var App = (