Scribd
Importer
52 vues16 pages

Introduction à ReactJS et ses Composants

Ce document décrit ReactJS, une bibliothèque JavaScript open source créée par Facebook pour construire des interfaces utilisateur. Il explique les concepts clés de React tels que les composants réutilisables, le DOM virtuel et JSX.

Transféré par

Sabyn Yevedoh
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
52 vues16 pages

Introduction à ReactJS et ses Composants

Ce document décrit ReactJS, une bibliothèque JavaScript open source créée par Facebook pour construire des interfaces utilisateur. Il explique les concepts clés de React tels que les composants réutilisables, le DOM virtuel et JSX.

Transféré par

Sabyn Yevedoh
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

Une librairie Javascript pour créer des interfaces utilisateurs

Moustapha Agack 2015-2016


Sami Laaroussi Tribek Université Claude Bernard Lyon1
● Bibliothèque JS
● Créé par Facebook
Généralités ● Le V de MVC
● Un DOM Virtuel
ReactJS pour les nuls ● Syntaxe JSX

2
● Pas de Contrôleurs
● Pas de Modèles
React ● Pas de Vue-Modèle

Ce qu’il n’a pas ...tout est COMPOSANT

3
Ils sont :

● Réutilisables
● Modulables
● Imbriquables

Composants Ils contiennent :

● Propriétés
Des widgets en somme ● Des états
● Composants fils
● Rendu

4
Composants
Exemple

5
6
● Une extension pour JS
JSX ●
●
Syntaxe similaire aux balises XML
Compilé en JS
Présentation ● Version actuelle: 0.98

7
Comme XML:

● Un nom

JSX ●
●
Des attributs
Des balises filles

Balisage

8
JS vs. JSX

9
● Représentation interne du DOM
● Très rapide
DOM Virtuel ● Système d'évènements interne
● Calcul les différences avec l'état
DOM, DOM, DOM… ♫ précédent

10
DOM Virtuel

11
Application
Démonstration

12
React
Conclusion

Avantages Inconvénients

● Composants réutilisables ● Verbeux


● Test Unitaire intégré à React ● Mélange syntaxe XML et JS
● DOM virtuel ● Courbe d’apprentissage assez lente
● Nécessite d’autres bibliothèques pour des
applications complexes

13
Ils utilisent ReactJS

14
MERCI POUR
VOTRE ATTENTION !
15
Documentation officielle :
https://facebook.github.io/react/docs/

Divers tutoriels :
Références http://buildwithreact.com/
http://blog.andrewray.me/reactjs-for-stupid-
people/
https://www.codementor.io/reactjs/tutorial

Démonstration :
https://github.com/samilaaroussi/Murph

16

Vous aimerez peut-être aussi