Computers">
Nothing Special   »   [go: up one dir, main page]
Scribd Logo
Importer

Bienvenue sur Scribd !

  • 110 vues

    Atelier 2

    Transféré par

    Hana Ben Ali
    Le document décrit une formation sur le développement web full stack avec MERN. Il présente la création de composants React comme un exercice pour afficher des informations sur une société informatique.

    Droits d'auteur :

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

    Atelier 2

    Transféré par

    Hana Ben Ali
    110 vues1 page
    Le document décrit une formation sur le développement web full stack avec MERN. Il présente la création de composants React comme un exercice pour afficher des informations sur une société informatique.

    Titre original

    Atelier-2

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

    Le document décrit une formation sur le développement web full stack avec MERN. Il présente la création de composants React comme un exercice pour afficher des informations sur une société informatique.

    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
    110 vues1 page

    Atelier 2

    Transféré par

    Hana Ben Ali
    Le document décrit une formation sur le développement web full stack avec MERN. Il présente la création de composants React comme un exercice pour afficher des informations sur une société informatique.

    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 1

    Formation Développement web Full Stack : MERN

    Période : Les 15, 16 et 17 Aout 2022 (Formation en ligne)


    Formateur : Anis ASSAS

    Atelier 2 : Création de simples composants React

    On se propose de développer pas à pas une application web présentant les départements
    d’une société informatique.
    • Créer un nouveau projet React, intitulé : ma-societe
    • Sous un nouveau dossier "src/Components", créer un composant "accueil"
    permettant d’afficher un simple message de bienvenue.

    Indications :
    o Déclarer une variable pour stocker la valeur du message à afficher.
    o Faire référence à cette variable pour l’affichage
    o Créer le composant de deux façons différentes (composant purement
    fonctionnel et composant de classe)

    • Créer un composant "presentation" avec un état (state) incluant les propriétés


    suivantes :
    • titre : chaine de caractères qui présente le titre du paragraphe (Ex : Qui
    sommes nous ?).
    • contact : objet contenant les informations de contact
    • nom : nom de la société
    • email : email de la société
    • logo : image
    • departs : tableau incluant la liste des départements (id et nom).

    • Faire le nécessaire afin d’afficher cette allure.

    Indications :
    o Pour une bonne organisation des différentes parties de la page à afficher,
    vous pouvez faire recours à des balises <div> ainsi que <table>.
    o Utiliser la fonction map pour parcourir et afficher les éléments du tableau
    incluant la liste des départements.

    Pour aller encore plus loin :


    • Améliorer le design de l’interface en utilisant bootstrap.
    • Installer bootstrap comme suit :
    > npm install --save bootstrap
    • L’import se fait : import 'bootstrap/dist/css/bootstrap.min.css';
    Dév. Full Stack JS:MERN (A. ASSAS) Page 1|1

    Vous aimerez peut-être aussi