Écrire du balisage avec JSX

Introduction

Bienvenue dans la documentation React! Ce laboratoire vous présentera l'écriture de balisage avec JSX.

Écrire du balisage avec JSX

Le projet React a déjà été fourni dans la machine virtuelle. En général, vous n'avez qu'à ajouter du code dans App.js.

Utilisez la commande suivante pour installer les dépendances :

npm i

La syntaxe de balisage que vous avez vue ci-dessus s'appelle JSX. Elle est facultative, mais la plupart des projets React l'utilisent pour sa commodité.

Le JSX est plus strict que le HTML. Vous devez fermer les balises comme <br />. Votre composant ne peut également pas renvoyer plusieurs balises JSX. Vous devez les emballer dans un parent partagé, comme un <h1>...</h1> ou un emballage vide <>...</> :

// App.js
export default function Profile() {
  return (
    <>
      <h1>Hedy Lamarr</h1>
    </>
  );
}

Si vous avez beaucoup de HTML à convertir en JSX, vous pouvez utiliser un convertisseur en ligne.

Pour exécuter le projet, utilisez la commande suivante. Ensuite, vous pouvez actualiser l'onglet Web 8080 pour prévisualiser la page web.

npm start

Afficher des données

Le JSX vous permet d'insérer du balisage dans JavaScript. Les accolades vous permettent de "retourner dans" JavaScript pour pouvoir intégrer une variable de votre code et l'afficher à l'utilisateur. Par exemple, cela affichera user.name :

// App.js
const user = {
  name: "Hedy Lamarr"
};
export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
    </>
  );
}

Vous pouvez également "retourner dans JavaScript" à partir d'attributs JSX, mais vous devez utiliser des accolades au lieu de guillemets. Par exemple, className="avatar" passe la chaîne de caractères "avatar" comme classe CSS, tandis que src={user.imageUrl} lit la valeur de la variable JavaScript user.imageUrl, puis passe cette valeur comme attribut src :

// App.js
const user = {
  name: "Hedy Lamarr",
  imageUrl: "https://i.imgur.com/yXOvdOSs.jpg"
};
export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
      <img className="avatar" src={user.imageUrl} />
    </>
  );
}

Ajouter des styles

En React, vous spécifiez une classe CSS avec className. Cela fonctionne de la même manière que l'attribut HTML class :

<img className="avatar" />

Ensuite, vous écrivez les règles CSS pour elle dans un fichier CSS séparé :

/* App.css */
.avatar {
  border-radius: 50%;
}

React ne prescrit pas la manière dont vous ajoutez des fichiers CSS. Dans le cas le plus simple, vous ajouterez une balise <link> à votre HTML. Si vous utilisez un outil de construction ou un framework, consultez sa documentation pour savoir comment ajouter un fichier CSS à votre projet.

// App.js
import "./App.css";

Vous pouvez également placer des expressions plus complexes à l'intérieur des accolades JSX, par exemple, la concaténation de chaînes :

// App.js
const user = {
  name: "Hedy Lamarr",
  imageUrl: "https://i.imgur.com/yXOvdOSs.jpg",
  imageSize: 90
};

export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
      <img
        className="avatar"
        src={user.imageUrl}
        alt={"Photo of " + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize
        }}
      />
    </>
  );
}

Dans l'exemple ci-dessus, style={{}} n'est pas une syntaxe spéciale, mais un objet {} normal à l'intérieur des accolades JSX style={ }. Vous pouvez utiliser l'attribut style lorsque vos styles dépendent de variables JavaScript.

Sommaire

Félicitations! Vous avez terminé le laboratoire Écrire du balisage avec JSX. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.