JSX

Les techniques que vous apprendrez dans ce tutoriel sont fondamentales pour la construction de n'importe quel type d'appli React.

Jusqu'à présent, nous avons écrit React sans JSX. Ce qui ne se fait d'ailleurs pas. Je ne connais pas une seule personne qui rédige son code React de cette façon. Tout le monde utilise JSX. Je vous ai montré cette méthode afin que vous compreniez l'utilité de JSX. Il permet uniquement de rendre votre code plus compréhensible.

Si j'écris React.createElement("h1", { id: "main-title" }, "My Website") ; en fait, ce que je souhaite rédiger c'est <h1 id="main-title">My Website</h1> . Ce que JSX permet de faire, c'est de nous aider à traduire le code que nous écrirons en syntaxe compréhensible par React.

A présent, créons un fichier que nous allons nommer Crypto.jsx.

Faites attention de bien ajouter .jsx et non .js. Vite ne pourra pas compiler notre JSX si l'extension de fichier n'est pas correctement définie.

./src/Crypto.jsx

const Crypto = (props) => {
    return (
      <div>
        <h1>{props.name}</h1>
        <h2>{props.code}</h2>
      </div>
    );
};
export default Crypto;

Je ne sais pas pour vous, mais je trouve cela beaucoup plus compréhensible. Et si cela vous met mal à l'aise d'introduire du HTML dans votre JavaScript, je vous invite à tenter le coup jusqu'à la fin de la session. D'ici là, vous devriez vous sentir un peu plus à l'aise. Et vous pouvez toujours revenir à l'ancienne.

Cependant, vous savez maintenant ce que JSX fait pour vous. Il s'agit simplement de traduire ces balises HTML en appels React.createElement . C'est ça. Vraiment. Plus de magie ici. JSX ne fait rien d'autre. Beaucoup de gens qui apprennent React n'apprennent pas cela.

Remarquez l'étrange syntaxe {props.name} : c'est ainsi que vous définissez les variables dans JSX. Si vous enlevez le {} , il sortira littéralement "props.name" dans le DOM.

Maintenant que nous connaissons JSX, nous pouvons aller convertir notre App.js.

./App.jsx

// Renommer le fichier App.js => App.jsx
// Supprimer l'import React (Vite le prend en charge)
import { createRoot } from "react-dom/client";
import Crypto from "./Crypto";

// Supprimer le composant crypto

const App = () => {
  return (
    <div>
      <h1>Liste des cryptos</h1>
      <Crypto name="Ethereum" code="ETH"/>
      <Crypto name="Bitcoin" code="BTC"/>
      <Crypto name="Cardano" code="ADA"/>
    </div>
  )
}

const container = document.getElementById("app");
const root = createRoot(container);
root.render(<App />);

De même modifier index.html pour qu'il importe le fichier jsx.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css" />
    <title>Crypto Images</title>
  </head>
  <body>
    <div id="app">Pas de rendu de l'application</div>
    <script type="module" src="./App.jsx"></script>
  </body>
</html>

Vous avez remarqué "Crypto" avec le C en majuscule ? En effet, il faut toujours que les composants React soit en majuscule. S'ils ne sont pas majuscule, Vite va vouloir les interpréter comme un élément HTML.