Scribd Logo
Importer

Bienvenue sur Scribd !

  • Atelier1 - ReactJS

    Transféré par

    Takwa Dridi
    1 vues3 pages

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    1 vues3 pages

    Atelier1 - ReactJS

    Transféré par

    Takwa Dridi

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 3

    Module : React Js

    Atelier 1

    Un premier affichage avec React


    React est composé de 2 bibliothèques JS à insérer dans la page HTML : React et ReactDOM.

    • React correspond à React lui-même. Il permet de créer des composants d’affichage


    réutilisable ;
    • ReactDOM est une extension permettant de visualiser, dans une page HTML, les
    composants créés avec React. D’autres extensions sont disponibles, par exemple pour
    afficher ces composants dans une application iPhone ou Android.

    Comme indiqué sur la page https://reactjs.org/docs/cdn-links.html, il existe deux


    versions de chaque bibliothèque : une version pour l’utilisation en mode
    développement, et une version pour l’utilisation en mode production. Dans la
    suite, on va utiliser la version développement. Voici le code de la page index.html.

    html>

    <head>

    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>


    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

    </head>

    <body>
    <div id="app"></div>
    </body>

    <script>

    //Ici le code React

    </script>

    </html>

    La partie <body> contient un élément <div> possédant l’id app. Cet élément <div> servira à contenir les
    éléments HTML affichés dans la page par le code React.
    Le code React est créé en Javascript, d’où la balise <script> en fin de page qui permettra de
    l’insérer. Le code React est inséré directement depuis la page HTML, mais il aurait pu être
    écrit dans un fichier Javascript séparé, lui même inclus dans la page HTML au moyen d’une
    autre balise <script>.

    1. Créer le fichier index.html contenant les scripts permettant d’inclure Reactjs.


    2. Installer live server (ou un plugin equivalent) pour afficher index.html
    3. Le code qui suit permet de créer un paragraphe HTML (balise <p>) et de
    l’insérer dans l’élément <div> créé à cet effet dans la page (celui dont l’id
    est app) :
    4. var p = React.createElement("p",null,"Hello React"); //création de
    l'élément
    5. console.log(p);
    6. ReactDOM.render(p,document.getElementById("app")); //insertion dans
    la page

    4. Que permet de faire la méthode : React.createElement.

    5. Il est possible de rajouter un argument dans l’appel de cette fonction pour spécifier les
    attributs de l’élément ajouté : essayer de modifier le paragraphe ajouté à travers un
    attribut css ou une class pour avoir le rendu suivant :

    6. Une fois l’objet créé on peut l’afficher à l’aide de la méthode ReactDOM.render en


    précisant à quel endroit on souhaite l’afficher d’où le document.getElementById("app").
    7. Inspecter la page. Que remarquez vous ?
    8. Création d’enfants dans un élément : ayant une balise « ul », rajouter 5 éléments li
    8.1 Ajout de plusieurs enfants dans React.createElement.

    Quel est le message en conséquence

    8.2 En utilisant une liste d’éléments et une boucle (indice la fonction map)
    9 Déplacez le code dans un fichier app.js et faites le nécessaire pour continuer à afficher le même
    rendu.

    Deuxième partie :

    Compteur avec React :

    Objectif : Comprendre la différence entre le Dom et Dom virtuel.

    1. Méthode classique : Vous allez créer une div et une fonction render() permettant à travers
    querySelector d’incrémenter automatiquement un compteur cpt (indice utiliser setInterval()
    ).
    a. Utilisez la fonction setInterval() pour automatiser l’incréementation.
    b. Analyser à travers l’inspecteur ce qui se passe.
    2. En utilisant React (virtual DOM) : Maintenant vous allez créer un composant grâce à React
    réalisant le compteur.
    3. Quelle remarque pouvez vous tirer ?

    Vous aimerez peut-être aussi