réagir JSX
Réagir à remplacer l'utilisation conventionnelle JSX JavaScript.
JSX ressemble XML est une extension de la syntaxe JavaScript.
Nous n'utiliser pas nécessairement le JSX, mais il présente les avantages suivants:
- JSX exécuter plus rapidement, car il est compilé en code JavaScript après l'optimisation.
- Il est de type sécurisé, il peut être trouvé au cours des erreurs de compilation.
- Utilisez JSX modèle de création plus facile et plus rapide.
Utilisez JSX
JSX ressemble à HTML, nous pouvons regarder des exemples:
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
Nous pouvons être imbriqué dans le code ci - dessus balises HTML multiples, vous devez utiliser un élément div qui l' entoure, l' élément instances p ajoute l' attribut personnalisé dedonnées MyAttribute, ajouter des attributs personnalisés doivent utiliser le préfixe de données.
ReactDOM.render(
<div>
<h1>本教程</h1>
<h2>欢迎学习 React</h2>
<p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
</div>
,
document.getElementById('example')
);
fichier indépendant
Votre code Réagir JSX peut être placé sur un document distinct, par exemple, nous créons un helloworld_react.js fichier, comme suit:
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
Ensuite, introduit dans le fichier JS dans le fichier HTML:
<body> <div id="example"></div> <script type="text/babel" src="helloworld_react.js"></script> </body>
expression JavaScript
Nous pouvons utiliser des expressions JavaScript dans le JSX. Écris une expression entre accolades{}.Des exemples sont les suivants:
ReactDOM.render(
<div>
<h1>{1+1}</h1>
</div>
,
document.getElementById('example')
);
Vous ne pouvez pas utilisersi else dans JSX, un seul peut utiliser le (opérateur ternaire)expressionconditionnelleà la place. L'exemple suivant, si la variablei estégale à volonté la sortie1du navigateurvrai,si vous modifiez la valeur de i, il afficherafaux.
ReactDOM.render(
<div>
<h1>{i == 1 ? 'True!' : 'False'}</h1>
</div>
,
document.getElementById('example')
);
style
Réagir recommandons d'utiliser des styles en ligne. Nous pouvons utiliser la syntaxecamelCase pour définir les styles en ligne. Réagir ajoute automatiquement pxaprès un certain nombre d'élément spécifié. L'exemple suivant illustre l' ajout de style en lignede myStyle pour les éléments h1:
var myStyle = {
fontSize: 100,
color: '#FF0000'
};
ReactDOM.render(
<h1 style = {myStyle}>本教程</h1>,
document.getElementById('example')
);
note
Remarque besoin d'écrire des accolades, des exemples sont les suivants:
ReactDOM.render(
<div>
<h1>本教程</h1>
{/*注释...*/}
</div>,
document.getElementById('example')
);
tableau
JSX permet l'insertion dans le réseau de modèle, le réseau sera automatiquement étendu à tous les membres:
var arr = [
<h1>本教程</h1>,
<h2>学的不仅是技术，更是梦想！</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
balises HTML vs. Réagir ensemble
Réagir peut rendre les balises HTML (cordes) ou Réagir composants (classes).
Pour rendre les balises HTML, utilisez simplement le nom de la balise en lettres minuscules dans le JSX.
var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));
Pour rendre React composant, créez simplement un début variable locale avec une lettre majuscule.
var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.getElementById('example'));
Réagir la JSX utilisent des conventions majuscules et minuscules pour distinguer les classes de composants locaux et des balises HTML.
Remarque:
Parce que JSX est JavaScript, un certain nombre d'identifiants tels que la
classetfornon recommandés comme un nom d'attribut XML. Comme alternative, React DOM utiliserclassNameethtmlForfaire la propriété correspondante.