React JSX

JSX (JavaScript XML) est une extension de syntaxe JavaScript qui ressemble à XML. Dans React, il est souvent utilisé à la place du JavaScript classique pour écrire des composants UI, ce qui vous permet de décrire la structure et le comportement des composants d'une manière similaire à HTML.

L'utilisation de JSX n'est pas obligatoire, mais elle présente les avantages principaux suivants :

• Exécution efficace : après compilation en code JavaScript, il est optimisé et s'exécute plus rapidement ;
• Sécurité de type : les erreurs peuvent être détectées au moment de la compilation (encore mieux avec TypeScript) ;
• Écriture pratique : la structure de l'interface utilisateur est intuitive et claire, l'intégration d'expressions JavaScript est plus flexible et l'écriture de modèles est simple et rapide ;
• Nature essentielle : ce n'est pas une chaîne/du HTML ; il est compilé en appels React.createElement par Babel (intégré à Vite).

Regardons d'abord le code suivant :

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

Cette syntaxe de balise apparemment étrange n'est ni une chaîne ni du HTML.

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

JSX est implémenté à l'intérieur de JavaScript.

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

Contrairement aux éléments DOM du navigateur, les éléments dans React sont en réalité de simples objets. React DOM garantit que le contenu des données du DOM du navigateur reste cohérent avec les éléments React.

Pour rendre des éléments React dans un nœud DOM racine, nous les passons tous à ReactDOM.render() pour les rendre sur la page :

Remarque :

Puisque JSX est JavaScript, certains identifiants commeclassetforne sont pas recommandés commeclassNameethtmlFornoms d'attributs XML. Au lieu de cela, React DOM utilise

---

Règles de syntaxe JSX

Règles de syntaxe JSX

JSX ressemble à HTML, mais a des règles strictes :

• HTML peut<br>, mais JSX doit<br />(auto-fermant).
• Toutes les balises doivent être fermées :<div></div>。

class → className：

Parce que class est un mot-clé JavaScript, utilisez className à la place.

<div className="container">内容</div>

htmlFor (dans label) :

<label for="id"> → <label htmlFor="id">

Composants commençant par une lettre majuscule :

Les composants personnalisés doivent commencer par une lettre majuscule (les minuscules seront traitées comme des balises HTML).

<Card />  {/* 正确，自定义组件 */}
<card />  {/* 错误，会被当成 <card> HTML 标签 */}

Commentaires :

utilisez{/* comment content */}。

jsx{/* 这是一个 JSX 注释 */}

Élément racine :

return ne peut avoir qu'un seul nœud racine.

return (
  <>  {/* 碎片 Fragment，空标签，不渲染 DOM */}
    <h1>标题</h1>
    <p>段落</p>
  </>
);

Nous pouvons ouvrir src/App.jsx et modifier le return en :

return (
  <>
    <h1 className="title">JSX 语法规则演示</h1>
    <img src="../vite.svg.html" alt="Vite Logo" />
    <br />
    {/* 自闭合标签和注释 */}
    <p>注意 className 和闭合标签</p>
  </>
);

Enregistrez pour voir l'effet.

---

Intégration d'expressions, rendu conditionnel, rendu de listes

La fonctionnalité la plus puissante de JSX est que vous pouvez utiliser {} pour intégrer des expressions JavaScript (uniquement des expressions, pas des instructions comme if/for).

Intégration d'expressions

Toute expression JS valide peut être placée à l'intérieur{}：

const name = 'example';
const now = new Date().toLocaleString();

return (
  <div>
    <h1>你好，{name}！</h1>
    <p>当前时间：{now}</p>
    <p>计算结果：{2 + 3 * 5}</p>  {/* 17 */}
  </div>
);

Rendu conditionnel

Utilisez des opérateurs ternaires ou&&：

const isLoggedIn = true;
const count = 0;

return (
  <div>
    {isLoggedIn ? <h1>欢迎回来，{name}！</h1> : <h1>请登录</h1>}
    
    {count > 0 && <p>你有 {count} 条未读消息</p>}  {/* count 为 0 时不渲染 */}
  </div>
);

À éviter :N'utilisez pas d'instructions if directement dans JSX (elles peuvent être utilisées à l'intérieur de corps de fonction).

Rendu de liste (Importance de key)

Utilisez map() pour afficher des tableaux. Vous devez ajouter un attribut key à chaque élément (un identifiant unique qui aide React à mettre à jour efficacement le DOM).

const items = [
  { id: 1, name: '苹果' },
  { id: 2, name: '香蕉' },
  { id: 3, name: '橙子' },
];

return (
  <ul>
    {items.map(item => (
      <li key={item.id}>  {/* key 必须唯一且稳定！ */}
        {item.name}
      </li>
    ))}
  </ul>
);

Importance de key :

• Sans key : React émettra un avertissement, ce qui peut provoquer des erreurs de rendu (surtout lorsque la liste change dynamiquement).
• Mauvaise habitude : utiliser index comme key (key={index}) — lorsque l'ordre de la liste change, cela peut provoquer des re-rendus inutiles ou une perte d'état.
• Bonne pratique : utilisez un ID unique provenant des données (comme l'id de la base de données).

Styles

React propose plusieurs approches de style ; apprenons d'abord les deux plus basiques.

Styles en ligne

Utilisez l'attribut style, dont la valeur est un objet (camelCase) :

return (
  <div
    style={{
      backgroundColor: '#F0F0F0',
      padding: '20px',
      borderRadius: '8px',
      textAlign: 'center',
      fontFamily: 'Arial, sans-serif',
    }}
  >
    <h2 style={{ color: 'blue', marginBottom: '10px' }}>
      内联样式示例
    </h2>
  </div>
);

• Avantage : les styles dynamiques sont faciles (des variables peuvent être utilisées).
• Inconvénient : pas pratique pour maintenir des styles complexes.

CSS Modules (recommandé, isolation par portée)

Vite prend en charge les CSS Modules par défaut, ce qui évite la pollution globale.

Créez src/App.css (existe déjà) ou un nouveau fichier src/styles/Card.module.css :

/* Card.module.css */
.card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 20px;
  margin: 20px;
}

.title {
  color: #333;
  margin: 0 0 10px 0;
}

.content {
  color: #666;
}

Importez-le et utilisez-le dans le composant (les noms de classes locales sont générés automatiquement) :

import styles from './styles/Card.module.css';

return (
  <div className={styles.card}>
    <h3 className={styles.title}>标题</h3>
    <p className={styles.content}>内容</p>
  </div>
);

• Avantage : les noms de classes sont automatiquement hachés (par ex., .card__abc123), donc il n'y a aucun conflit.

Exercice complet :Modifiez le composant Card précédent pour utiliser les CSS Modules.

Créez src/components/Card.module.css :

.container {
  width: 300px;
  border: 1px solid #ccc;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  background: white;
}

.image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.title {
  margin: 0 0 10px 0;
  padding: 20px 20px 0;
  color: #333;
}

.content {
  padding: 0 20px 20px;
  color: #666;
}

Modifiez Card.jsx :

import styles from './Card.module.css';

const Card = ({ title, content, imageUrl }) => {
  return (
    <div className={styles.container}>
      {imageUrl && <img src={imageUrl} alt={title} className={styles.image} />}
      <h3 className={styles.title}>{title}</h3>
      <p className={styles.content}>{content}</p>
    </div>
  );
};

export default Card;

---

Utilisation de JSX

JSX ressemble à HTML ; nous pouvons regarder un exemple :

Nous pouvons imbriquer plusieurs balises HTML dans le code ci-dessus, et devons les envelopper avec un élément div. L'élément p dans l'exemple possède un attribut personnalisédata-myattribute, pour ajouter des attributs personnalisés, vous devez utiliserdata-comme préfixe.

Fichier séparé

Votre code React JSX peut être placé dans un fichier séparé, par exemple nous créons unhelloworld_react.jsfichier, le code est le suivant :

Ensuite, incluez le fichier JS dans le fichier HTML :

---

Expressions JavaScript

Nous pouvons utiliser des expressions JavaScript dans JSX. Les expressions s'écrivent entre accolades{}à l'intérieur. L'exemple est le suivant :

Dans JSX, vous ne pouvez pas utiliserif elseinstructions, mais vous pouvez utiliserconditionnelle (opération ternaire)expression à la place. Dans l'exemple suivant, si la variableiest égale à1le navigateur afficheratrue, si la valeur de i est modifiée, il afficherafalse.

---

Styles

React recommande d'utiliser des styles en ligne. Nous pouvons utilisercamelCasesyntaxe pour définir des styles en ligne. React ajoutera automatiquement après le numéro de l'élément spécifiépx. L'exemple suivant démontre pour l'élémenth1, en ajoutantmyStylestyle en ligne :

---

Commentaires

Les commentaires doivent être écrits entre accolades, par exemple :

---

Tableaux

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

Autres extensions