Conversion HTML en JSX : JSX et règles de JSX

Nous apprendrons ce qu'est le JSX et les règles du JSX.

JSX est une extension de syntaxe pour JavaScript. Vous pouvez écrire un formatage de type HTML dans un fichier JavaScript.

Il est basé sur le Web, Html, Css et JavaScript. les développeurs Web ont écrit le contenu de la page séparément sous forme de fichier Html, les conceptions sous forme de fichier Css et la logique sous forme de fichier JavaScript.

• Besoin de savoir : JSX est une extension de syntaxe, tandis que React est une bibliothèque JavaScript.

<div>





<pre class="brush:php;toolbar:false">
//CSS

.wrapper {
   display : flex;
}

function myFunction() {
  document.getElementById("wrapper").innerHTML = "Hello world";
}

Mais à mesure que le Web est devenu plus interactif, la logique est devenue plus importante. JavaScript gérait le Html. Par conséquent, dans React, la logique et le formatage cohabitent dans des composants.

Exemple de composant React :

import React, { useState } from "react";

function App() {
  const [formData, setFormData] = useState({
    username: "",
    password: "",
  });

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData((prevState) => ({ ...prevState, [name]: value }));
  };

  return (
    <form>
      <label>
        Username:
        <input
          type="text"
          name="username"
          value={formData.username}
          onChange={handleChange}
        />
      </label>
      <label>
        Password:
        <input
          type="password"
          name="password"
          value={formData.password}
          onChange={handleChange}
        />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

il est important de conserver le balisage et la logique du rendu ensemble pour garder une balise HTML synchronisée les unes avec les autres à chaque édition.

Les composants React sont une fonction JavaScript qui contient le balisage que React affiche dans le navigateur. Les Composants React utilisent une extension de syntaxe appelée JSX pour ce balisage. JSX ressemble à du HTML.

Les règles de JSX

1. Renvoie un seul élément racine

Pour renvoyer des éléments d'un composant, enveloppez-les avec une seule balise parent. Vous pouvez utiliser un ou un fragment (<>)

Par exemple div

<div>
  <h1>Hedy Lamarr's Todos</h1>
  <img 
    src="https://picsum.photos/200/300" 
    alt="lorempicsum" 
  >
</div>

Par exemple <>

<>
   <h1>Hedy Lamarr's Todos</h1>
  <img 
    src="https://picsum.photos/200/300" 
    alt="lorempicsum" 
  />
</>

• Les fragments vous permettent de regrouper des éléments sans laisser de trace dans l'arborescence HTML du navigateur.

2. Fermez toutes les balises

En JSX, toutes les balises doivent être fermées. Par exemple, des balises à fermeture automatique telles que img en HTML

Exemple :

<img 
    src="https://picsum.photos/200/300" 
    alt="lorempicsum" 
  />

3. chameauCase

Dans React, de nombreuses propriétés HTML sont écrites avec camelCase.

Exemple :

 <img 
    src="https://picsum.photos/200/300" 
    alt="lorempicsum" 
    className="photo"
  />

<button onClick={handleClick}>Click Me</button>

Javascript en JSX

Dans JSX, vous souhaiterez parfois ajouter un peu de logique JavaScript ou faire référence à une fonctionnalité dynamique à l'intérieur de ce balisage. Dans ce cas, vous pouvez utiliser des parenthèses en JSX

• Passer l'attribut string à JSX

Quand vous souhaitez passer un attribut de chaîne à JSX, vous le mettez entre guillemets simples ou doubles

Exemple :

<div>





<pre class="brush:php;toolbar:false">
//CSS

.wrapper {
   display : flex;
}

Ici, src et alt sont transmis sous forme de chaînes. mais si vous souhaitez spécifier le texte src ou alt de manière dynamique, vous pouvez utiliser une valeur de javascript en utilisant des accolades au lieu de guillemets doubles

Exemple :

function myFunction() {
  document.getElementById("wrapper").innerHTML = "Hello world";
}

• Utiliser des accolades

Il est possible d'utiliser JavaScript avec des accolades {}. Vous pouvez utiliser des fonctions, des variables et bien plus encore.

Exemple :

import React, { useState } from "react";

function App() {
  const [formData, setFormData] = useState({
    username: "",
    password: "",
  });

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData((prevState) => ({ ...prevState, [name]: value }));
  };

  return (
    <form>
      <label>
        Username:
        <input
          type="text"
          name="username"
          value={formData.username}
          onChange={handleChange}
        />
      </label>
      <label>
        Password:
        <input
          type="password"
          name="password"
          value={formData.password}
          onChange={handleChange}
        />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

• Utiliser des appareils orthodontiques doubles

React ne nécessite pas que vous utilisiez des styles en ligne (les classes CSS fonctionnent très bien dans la plupart des cas). Mais lorsque vous avez besoin d'un style en ligne, vous pouvez transmettre un objet à l'attribut style. Utilisez des accolades doubles.

Exemple :

exporter la fonction par défaut TodoList() {
  retour (
    <ul>

• Vous voyez {{ }} en JSX, sachez que c'est un objet à l'intérieur des curlies JSX.

• Les propriétés de style en ligne doivent être écrites sous la forme camelCase.

Vous pouvez déplacer plusieurs expressions dans un seul objet et les utiliser dans votre JSX entre accolades

const personne = {
  nom : « Gregorio Y. Zara »,
  thème: {
    Couleur d'arrière-plan : 'rouge',
    couleur : 'jaune'
  }
} ;

exporter la fonction par défaut TodoList() {
  retour (
    <div>




<hr>

<h2>
  
  
  Conclusion
</h2>

<p>JSX est un outil important qui rend les processus de développement Web plus efficaces et pratiques. Avec JSX, vous pouvez conserver le balisage de rendu et la logique ensemble pour garder un décalque HTML synchronisé les uns avec les autres dans chaque modification.</p>


<hr>

<p>Si vous aimez mes articles, vous pouvez m'offrir un café :)<br>
<img src="https://img.php.cn/upload/article/000/000/000/173199438683667.jpg" alt="Converting HTML to JSX : JSX and Rules of JSX"></p>




          

            
        

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!