Scribd
Importer
6 vues2 pages

Tuto Angular : Composants et JSX

Le tutoriel 2 porte sur la création et l'utilisation de composants en React, en se concentrant sur le composant Greeting. Il guide l'utilisateur à travers les étapes de définition, d'intégration et de conversion d'un composant fonctionnel en un composant à base de classe. Le tutoriel inclut également l'utilisation de JSX pour afficher des données dynamiques telles que la date, l'heure et des variables personnalisées.

Transféré par

hsan.isetsf
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
6 vues2 pages

Tuto Angular : Composants et JSX

Le tutoriel 2 porte sur la création et l'utilisation de composants en React, en se concentrant sur le composant Greeting. Il guide l'utilisateur à travers les étapes de définition, d'intégration et de conversion d'un composant fonctionnel en un composant à base de classe. Le tutoriel inclut également l'utilisation de JSX pour afficher des données dynamiques telles que la date, l'heure et des variables personnalisées.

Transféré par

hsan.isetsf
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Faculté des sciences économiques et de gestion de Sfax

Filière : LFI 2
Matière : Framework Front-end

Tutorial 2 : JSX et Composants

Étape 1 : Créer et utiliser des composants


1. Définissez un nouveau composant :
• Dans le dossier src, créez un fichier [Link].
• Écrivez le code suivant pour le composant Greeting :

→ export default Greeting; : exporte le composant Greeting afin qu'il puisse être
utilisé dans d'autres fichiers. Lorsque vous importez ce fichier ailleurs, vous pouvez
utiliser le composant import Greeting from './Greeting';
2. Intégrez le composant Greeting dans App :
• Ouvrez src/[Link].
• Importez le composant en haut du fichier :

• Utilisez le composant Greeting à l'intérieur du composant App

3. Convertissez le composant fonctionnel Greeting en un composant à base de classe.

Étape 2 : Utiliser JSX


4. Affichez la date et l'heure actuelles :

1
5. Ajoutez les variables nom et prenom dans le fichier [Link]

6. Affichez le contenu des variables définis afin d’obtenir :

Vous aimerez peut-être aussi