Pure React

Dans cette partie, je montrerai comment rédiger du pure React, c'est à dire, sans utiliser les compilateurs comme babel, webpack. Nous n'utiliserons pas également JSX qui est une syntaxe spéciale qui permet d'écrire du code React plus facilement. Ce qui nous permettra de les introduire progressivement par la suite. Ici, nous allons rédiger simplement du code javascript.

Pour débuter ce projet, commençons par créer le répertoire de travail. Je vais appeler le mien "crypto-app", vu que nous allons créer une application permettant d'afficher une liste d'image de crypto monnaie durant cette session. Dans le répertoire, créer le fichier index.html et mettez-le dans le répertoire "src/".

./crypto-app/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>
    // le code va ici
    </script>
</body>
</html>

Ouvrez le fichier avec votre éditeur,
Ouvrez le fichier html avec le navigateur de votre choix, vous verrez la mention : "Pas de rendu de l'application".

Nous avons la:

Une page au format HTML5 standard.
Nous y avons rajouter une div avec un id = "app" dans lequel nous afficherons notre application plus tard.
Nous avons 2 scripts pour React et React-Dom
Créer un script vide dans lequel nous allons insérer notre code. En pratique, cette méthode n'est pas utilisée, mais nous la ferons pour que vous puissiez mieux comprendre par la suite.

Construisons à l'aide de React, la plus simple des applications.

<div id="app">Pas de rendu de lapplication</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>
    const App = () => {
        return React.createElement(
            "div",
            {},
            React.createElement("h1", {}, "Crypto App")
        );
    };
    const container = document.getElementById("app");
    const root = ReactDOM.createRoot(container);
    root.render(React.createElement(App));
</script>

<div id="app">Pas de rendu de lapplication</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>
    const App = () => {
        return React.createElement(
            "div",
            {},
            React.createElement("h1", {}, "Crypto App")
        );
    };
    const container = document.getElementById("app");
    const root = ReactDOM.createRoot(container);
    root.render(React.createElement(App));
</script>

La première chose que nous avons faite est de créer notre composant "App". React, c'est surtout créer des composants et de les réutiliser pour créer d'autres composants à partir de ces derniers.
Il existe 2 types de composants, les composants sous forme de fonction et ceux sous forme de classe.
les composants sous forme de fonction doivent retourner une expression qui est de la forme: React.createElement.
Ces fonctions de rendu de composants doivent être rapides. Cette fonction va être appelée beaucoup.
React.createElement crée une instance d'un composant. Si vous lui transmettez une chaîne, il créera une balise DOM avec celle-ci comme chaîne. Nous avons utilisé h1 et div, ces balises on été affichées par le DOM. Si nous mettons x-custom-date-picker, cela sortira (donc les composants Web sont également possibles.)
en seconde position, {}, l'objet vide, correspond aux attributs que nous passons au tags ou au composant. Il peut également prendre la valeur null. Toutes les valeurs qu'on mettra dans cette objet sera afficher dans le composant qui l'accompagne.
Ensuite, nous utilisons document.getElementById("app") qui nous permettra d'insérer notre code.
Nous prenons ensuite le nouvel élément (que nous avons appelé container) et le transmettons à ReactDOM.createRoot. C'est ainsi que nous signalons à React où nous voulons qu'il rende notre application. Notez plus tard que nous pouvons à nouveau root.render pour changer l'apparence de la racine de notre application React (j'ai rarement besoin de le faire.)
Notez que nous utilisons React.createElement avec App comme paramètre de root.render. Nous avons besoin d'une instance d'App pour effectuer le rendu. App est une classe de composants et nous devons rendre une instance d'une classe. C'est ce que fait React.createElement : il crée une instance d'une classe.

ReactDOM.createRoot est une nouvelle API depuis React v18. L'ancien ReactDOM.render est toujours disponible (et obsolète), mais il rendra votre application en mode "legacy" (heritage) qui n'utilisera pas toutes les nouvelles fonctionnalités intégrées à React v18.