Scribd Logo
Importer

Bienvenue sur Scribd !

  • 1K vues

    Formation React 1 PDF

    Transféré par

    Man Ralaitsirava

    Droits d'auteur :

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

    Formation React 1 PDF

    Transféré par

    Man Ralaitsirava
    1K vues17 pages

    Titre original

    formation_react_1.pdf

    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é ?

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Télécharger au format pdf ou txt
    1K vues17 pages

    Formation React 1 PDF

    Transféré par

    Man Ralaitsirava

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Télécharger au format pdf ou txt
    sur 17

    Formation

    Séance 1
    Installation
    • Node.js -> https://nodejs.org/en/download/
    • Npm
    • Create-React-App -> npm install --global create-react-app
    React

    • Bibliothèque front-end open-source gérée par Facebook


    (peut être considéré comme un Framework)
    • Approche par composants
    • Interface utilisateur très performante
    • Utilisé par Airbnb, Discord, Facebook, Twitter …
    Création du projet
    • create-react-app <nom du dossier>
    • npm start
    Structure d’un projet

    Fichiers requis :
    • public/index.html
    • src/index.js
    Import

    • import React (fonctionnalités react)


    • import ReactDOM (DOM virtuel)
    • import App (composant)
    • Import {Component} (pour définir
    un composant)
    DOM virtuel
    Construit le
    DOM virtuel
    App avec les

    • Le DOM virtuel permet à React de différences

    gérer l’interface utilisateur


    efficacement en modifiant le DOM Événement
    déclenché
    que partiellement DOM
    virtuel

    DOM Compare les


    deux et modifie
    uniquement les
    différences
    Composants

    • Structure imbriquée
    • Composant parent et enfant
    • render()
    • JSX
    • Majuscule au nom
    JSX

    • Sensible à la casse
    • for et class sont réservés =>
    htmlFor et className
    • Majuscule aux noms des
    composant, minuscule aux
    noms des éléments natifs
    Afficher son composant

    App.js

    index.js

    index.html
    State
    • Etat interne d’un composant
    • constructor() défini les états
    avec this.state
    • setState() permet d’actualiser
    la valeur des états
    • onChange appel la méthode
    handleChange à chaque
    changement dans l’input
    Les événements

    • Clavier : onKeyDown, onKeyPress, onKeyUp


    • Focus : onFocus, onBlur
    • Formulaire : onSubmit, onChange
    • Souris : onHover, onClick
    • …
    Notre composant
    Props

    • Les props sont des informations


    passées d’un composant parent
    vers un composant enfant
    • Un enfant ne doit jamais modifier
    directement une props
    Un peu de style

    • Importer le fichier css


    • class != className
    • Style inline possible
    TP
    • Objectif: Créer une calculatrice
    • Utiliser eval() => plus simple mais peut mener à des
    erreurs
    • Gérer chaque opération indépendamment
    Résultat

    Vous aimerez peut-être aussi