Accéder à la page github

Les composants React

En pratique les codes javascripts sont écrits dans des fichiers distincts. Dans le répertoire "src", ajouter un fichier javascript "App.js" et renseignez les informations suivantes.

Remplacer le script tag dans votre fichier index.html par <script src="./App.js"></script>

./src/index.html

<!DOCTYPE html>
<html lang="fr">
<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 crossorigin src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
    <script src="./App.js"></script>
</body>
</html>

Vous verrez un warning dans votre console: Warning: each child in a list should have a unique key prop. Le message d'alerte de React essaie de vous aider à rendre votre code plus rapide. React essaie d'identifier de manière unique tous les composants de la liste. Ce qui lui permet, lorsqu'un seul composant change, de le modifier sans avoir à rafraichir le composant.

  • Pour permettre à un élément réact d'avoir plusieurs enfants, il suffit de lui passer un tableau (array) de composants.

  • Nous avons créé un second et nouveau composant qui s'appelle "Crypto". Ce composant représente une crypto. En général, lorsque vous avez une idée précise d'une segmentation de votre architecture, c'est une bonne idée de créer un composant dédiée.

  • Nous avons maintenant la possibilité d'utiliser ce composant plusieurs fois en faisant appel à React.createElement

  • createElement a 3 paramètres dont les deux derniers sont optionnels. Vu que Crypto n'a pas de propriétés ou d'enfants, nous pouvons l'appeler et ne renseigner que le premier paramètre.

  • En ré-utilisant le composant, nous nous rendons compte que nous ne faisons que répéter la même valeur. Ce qui n'est pas intéressant, vu qu'il n'existe pas uniquement l'Ethereum comme crypto-monnaie. Nous allons légèrement complexifier le précédent code de App.js:

./src/App.js

const Crypto = (props) => {
    return React.createElement("div", {}, [
        React.createElement("h1", {}, props.name),
        React.createElement("h2", {}, props.code)
    ]);
};


const App = () => {
    return React.createElement("div", {}, [
        React.createElement("h1", {}, "Liste des cryptos"),
        React.createElement(Crypto, {name: "Ethereum", code: "ETH"}),
        React.createElement(Crypto, {name: "Bitcoin", code: "BTC"}),
        React.createElement(Crypto, {name: "Cardano", code: "ADA"}),
    ]);
};
const container = document.getElementById("app");
const root = ReactDOM.createRoot(container);
root.render(React.createElement(App));

A présent nous avons un composant assez flexible qui accepte les propriétés de ses parents. props corresponds aux variables que les parents passent. Ce qui permet à chaque composant d'être différent. Nous n'aurons plus uniquement Ethereum comme monnaie mais plusieurs autres. C'est la puissance de React. Nous pouvons ainsi réutiliser les composants pour créer des composants plus grands.