qu'est-ce que réagir jsx-js tutoriel-php.cn

qu'est-ce que réagir jsx

藏色散人

Libérer： 2020-11-30 15:54:35

original

2156 Les gens l'ont consulté

react jsx est une extension de syntaxe JavaScript qui ressemble beaucoup à XML. React utilise JSX pour remplacer le JavaScript standard : 1. JSX s'exécute plus rapidement ; être trouvé pendant le processus de compilation ; 3. Utiliser JSX pour écrire des modèles est plus rapide.

qu'est-ce que réagir jsx

L'environnement d'exploitation de ce tutoriel : système Windows10, React16, cet article est applicable à toutes les marques d'ordinateurs.

Recommandé : "Vidéo de programmation"

React JSX

React utilise JSX pour remplacer le JavaScript standard.

JSX est une extension de syntaxe JavaScript qui ressemble beaucoup à XML.

Nous n'avons pas nécessairement besoin d'utiliser JSX, mais il présente les avantages suivants :

JSX fonctionne plus rapidement car il est optimisé après avoir été compilé en code JavaScript.
Il est de type sécurisé et des erreurs peuvent être trouvées lors de la compilation.
L'écriture de modèles à l'aide de JSX est plus simple et plus rapide.

Jetons un coup d'œil au code suivant :

const element = <h1>Hello, world!</h1>;

Copier après la connexion

Cela peut paraître étrange. La syntaxe des balises n'est ni une chaîne ni du HTML.

Cela s'appelle JSX, une extension de syntaxe pour JavaScript. Nous vous recommandons d'utiliser JSX pour décrire les interfaces utilisateur dans React.

JSX est implémenté dans JavaScript.

Nous savons que les éléments sont les plus petites unités qui composent les applications React, et JSX est utilisé pour déclarer des éléments dans React.

Différents des éléments DOM du navigateur, les éléments de React sont en fait des objets ordinaires. React DOM peut garantir que le contenu des données du DOM du navigateur est cohérent avec les éléments React.

Pour restituer les éléments React dans le nœud DOM racine, nous les rendons sur la page en les transmettant tous les deux à la méthode ReactDOM.render() :

Instance React

var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById(&#39;example&#39;));

Copier après la connexion

Remarque :

Étant donné que JSX est JavaScript, certains identifiants comme class et for ne sont pas recommandés comme noms d'attribut XML. Au lieu de cela, React DOM utilise className et htmlFor pour les attributs correspondants.

Utiliser JSX

JSX ressemble au HTML, nous pouvons regarder l'exemple :

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById(&#39;example&#39;)
);

Copier après la connexion

Nous pouvons imbriquer plusieurs balises HTML dans le code ci-dessus, nous devons utiliser un div L'élément l'enveloppe. L'élément p dans l'exemple ajoute l'attribut personnalisé data-myattribute. Pour ajouter un attribut personnalisé, vous devez utiliser le préfixe data-.

Instance React

ReactDOM.render(
    <div>
    <h1>PHP中文网</h1>
    <h2>欢迎学习 React</h2>
    <p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
    </div>
    ,
    document.getElementById(&#39;example&#39;)
);

Copier après la connexion

Fichier séparé

Votre code React JSX peut être placé sur un fichier séparé, par exemple, nous créons un fichier helloworld_react.js avec le code suivant :

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById(&#39;example&#39;)
);

Copier après la connexion

Introduisez ensuite le fichier JS dans le fichier HTML :

Instance React

<body>
  <div id="example"></div>
<script type="text/babel" src="helloworld_react.js"></script>
</body>

Copier après la connexion

Expression JavaScript

On peut utiliser des expressions JavaScript en JSX. Les expressions sont écrites entre accolades {}. Les exemples sont les suivants :

Exemple de React

ReactDOM.render(
    <div>
      <h1>{1+1}</h1>
    </div>
    ,
    document.getElementById(&#39;example&#39;)
);

Copier après la connexion

Les instructions If else ne peuvent pas être utilisées dans JSX, mais des expressions conditionnelles (opération ternaire) peuvent être utilisées à la place. Dans l'exemple suivant, si la variable i est égale à 1, le navigateur affichera vrai. Si la valeur de i est modifiée, il affichera faux.

Exemple de réaction

ReactDOM.render(
    <div>
      <h1>{i == 1 ? &#39;True!&#39; : &#39;False&#39;}</h1>
    </div>
    ,
    document.getElementById(&#39;example&#39;)
);

Copier après la connexion

Style

Styles en ligne recommandés par React. Nous pouvons utiliser la syntaxe camelCase pour définir les styles en ligne. React ajoutera automatiquement des px après avoir spécifié le numéro de l'élément. L'exemple suivant montre l'ajout du style en ligne myStyle à l'élément h1 :

Exemple React

var myStyle = {
    fontSize: 100,
    color: &#39;#FF0000&#39;
};
ReactDOM.render(
    <h1 style = {myStyle}>PHP中文网</h1>,
    document.getElementById(&#39;example&#39;)
);

Copier après la connexion

Comments

Les commentaires doivent être écrits entre accolades. L'exemple est le suivant. :

Instance React

ReactDOM.render(
    <div>
    <h1>PHP中文网</h1>
    {/*注释...*/}
     </div>,
    document.getElementById(&#39;example&#39;)
);

Copier après la connexion

Array

JSX permet d'insérer des tableaux dans des modèles, et le tableau développera automatiquement tous les membres :

Instance React

var arr = [
  <h1>PHP中文网</h1>,
  <h2>学的不仅是技术，更是梦想！</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById(&#39;example&#39;)
);

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

qu'est-ce que réagir jsx