3. INTRODUCTION
Mr. JADLI AISSAM 3
React est une bibliothèque JavaScript libre développée par Facebook depuis
2013. Son but principal est de faciliter la création d'application web SPA
(Single Page Application), via la création de composants dépendant d'un
état et générant une page HTML à chaque changement d'état. (Wikipédia)
Grâce à React, il est facile de créer des interfaces utilisateurs
interactives. Définissez des vues simples pour chaque état de votre
application, et lorsque vos données changeront, React mettra à
jour, de façon optimale, juste les composants qui en auront besoin.
5. INTRODUCTION
Mr. JADLI AISSAM 5
Les Fonctionnalités Offertes par ReactJS
React utilise le concept de
DOM virtuel qui aide à la
performance
DOM Virtuel
Composants d'interface
utilisateur réutilisables et
interactifs
Réutilisation
Passage simple au
développement mobile
grâce à React Native
Mobile Multiplateforme
Le codage est plus simple
grâce à la syntaxe JSX
Syntaxe JSX
Flux unidirectionnel qui
améliore les performances
globales
Flux de Données
React possède son propre
Débogueur.
Débogage
7. INTRODUCTION
Mr. JADLI AISSAM 7
Alternatives
Que dois-je choisir ?
Flexibilité + Javascript => React
Code Propre + Organisation => VueJS
POO + TypeScript => Angular
React et VueJS sont plus adaptés pour
les projets de petit et moyenne taille.
8. Mr. JADLI AISSAM 8
Philosophie de React Environnement de travail
Philosophie de React
React est basé sur l'idée que tout est un composant. Il est basé sur la
conclusion qu'une interface utilisateur est une combinaison de plusieurs
composants, chaque composant pouvant être la combinaison d'autres
petits composants, etc.
La Syntaxe JSX
Philosophie de React Environnement de travail
9. Mr. JADLI AISSAM 9
Virtual DOM
Le DOM (Document Object Model) est l’API
qui permet de manipuler le contenu
hiérarchisé d’une page web (c-à-d du
HTML) sous forme d’arbre. Les éléments
HTML constituent les nœuds de cet arbre.
La Syntaxe JSX
Philosophie de React Environnement de travail
10. Mr. JADLI AISSAM 10
Virtual DOM
React utilise le concept du DOM virtuel. Le DOM virtuel (VDOM) est un concept de
programmation dans lequel une représentation idéale, ou « virtuelle », d’une interface
utilisateur (UI) est conservée en mémoire et synchronisée avec le DOM « réel » de la page.
.
La Syntaxe JSX
Philosophie de React Environnement de travail
11. Mr. JADLI AISSAM 11
Encapsulation
Les composants React se comportent vis-à-
vis du reste de l'application comme une boîte
noire, avec une API clairement définie. Ils
contiennent en eux tout le nécessaire à leur
bon fonctionnement : la structure, les styles
et le comportement qui sont connectés par
une syntaxe concise (baptisée JSX), ce qui
facilite considérablement le développement.
La Syntaxe JSX
Philosophie de React Environnement de travail
12. Mr. JADLI AISSAM 12
Flux de Données Unidirectionnel
Afin d’éviter que tous les composants ne finissent par
être étroitement connectés entre eux (appelé couplage
fort, et constituant un gros problème de maintenance),
React nous force à suivre un principe simple : « les
données descendent, l’état remonte »
La Syntaxe JSX
Philosophie de React Environnement de travail
13. Mr. JADLI AISSAM 13
Environnement de Travail
Afin de développer des applications ReactJS, nous aurons
besoin de :
NodeJS
IDE (VSCode par exemple)
Outil en ligne de commande : create-react-app
La Syntaxe JSX
Philosophie de React Environnement de travail
14. Babel
Babel est un outil qui est principalement utilisée
pour convertir le code ECMAScript 2015+ en une
version rétro-compatible de JavaScript dans les
navigateurs ou environnements actuels et
anciens.
Babel est utilisé avec React pour convertir la
syntaxe JSX en Vanilla Javascript.
14
La Syntaxe JSX
Philosophie de React Environnement de travail
16. Webpack
16
Webpack est un outil qui permet de transformer les différentes composantes d’une
application en code natif, statique et compréhensible directement par le navigateur.
La Syntaxe JSX
Philosophie de React Environnement de travail
17. Mr. JADLI AISSAM 17
create-react-app
create-react-app est un outil pour faciliter le développement React. L’idée est de générer
automatiquement un squelette applicatif et de masquer la complexité potentielle de
configuration des briques techniques associées :
Gestion de JS moderne (ES2015+) avec babel;
Bundling de l’application (avec Webpack);
Serveur de développement;
Génération de fichiers de production optimisés, etc.
La Syntaxe JSX
Philosophie de React Environnement de travail
18. Mr. JADLI AISSAM 18
create-react-app
La structure d’un projet crée avec create-react-app est la suivante :
public/index.htm : C’est le fichier HTML principal qui inclut le code et
l’application React et fournit un contexte pour le rendu de React. Plus
précisément, il comprend un div dans lequel votre application React
s'affichera à l'intérieur : <div id=”root”>
src/ : Il stocke tout le code modifiable. C’est ici que seront placés
les différentes composantes de l’application
App.js : C’est un exemple de composant React appelé «App» crée
par create-react-app lors de la création d'une nouvelle application
La Syntaxe JSX
Philosophie de React Environnement de travail
19. TRAVAUX PRATIQUES
Mr. JADLI AISSAM 19
http://bit.ly/reactjs_s1_tp
Télécharger le TP
http://bit.ly/reactjs_s1_cours
Télécharger le Cours
20. Mr. JADLI AISSAM 20
La Syntaxe JSX
JSX (JavaScript XML) est un langage de balisage utilisé pour créer des
éléments React. Le balisage peut être utilisé pour représenter un
composant unique autonome ou un composant complexe.
La syntaxe pour écrire JSX est :
Un composant typique de React ressemblerait à ceci :
La Syntaxe JSX
Philosophie de React Environnement de travail
21. Mr. JADLI AISSAM 21
JSX and HTML
React donne aux développeurs frontaux un outil qu'ils connaissaient (probablement pour
faciliter la courbe d'apprentissage), il utilise donc un langage de balisage similaire au
HTML. Notez que les développeurs ont créé tous les éléments HTML (div, main, article,
en-tête, pied de page, etc.) dans la bibliothèque React, et la meilleure partie est qu'ils se
comportent tous de la même manière qu'en HTML.
Si nous devions afficher une image dans React, nous pourrions en fait utiliser le même
balisage que nous utilisons en HTML :
La Syntaxe JSX
Philosophie de React Environnement de travail
22. Mr. JADLI AISSAM 22
Sensibilité à la casse
Comment React différencie-t-il nos éléments personnalisés des éléments HTML?
Il utilise la sensibilité à la casse. Il est recommandé d'utiliser la casse Pascal pour
nos composants React tandis que le casse minuscule pour les éléments HTML . Si
nous enfreignons ces règles, le compilateur React ou la console du développeur
émet l’avertissement suivant :
La Syntaxe JSX
Philosophie de React Environnement de travail
23. Mr. JADLI AISSAM 23
Limites
Puisque nous utilisons JSX, qui est une extension JavaScript, nous limitons donc certaines
des normes du HTML. Les mots clés JavaScript ne peuvent donc pas être utilisés dans
JSX, par exemple :
class est remplacé par className
for dans la tag <label> est remplacé par htmlFor
De plus, les commentaires ne sont plus écrits comme <!-- comment --> , mais sont plutôt
écrits comme {/* comment */} {// comment}
La Syntaxe JSX
Philosophie de React Environnement de travail
24. Mr. JADLI AISSAM 24
Usage de JSX
JSX nous permet de déclarer :
Des variables JavaScript
Des fonctions
Des expressions de rendu
Vous pouvez utiliser des guillemets pour spécifier
des littéraux chaînes de caractères dans les attributs
ou utiliser carrément des variables ou fonctions :
La Syntaxe JSX
Philosophie de React Environnement de travail
26. Mr. JADLI AISSAM 26
React Quiz
React est principalement utilisé pour construire une ___
Base de données
Application de Bureau (Desktop)
Interface utilisateur Web dynamique
Plateforme de conception
1
27. Mr. JADLI AISSAM 27
React Quiz
La philosophie de React est basé sur ___
Division de l’interfaces en blocs plus petits
Séparation du code en fichiers HTML, CSS et JS
Utilisation de JQuery
Utilisation de composants réutilisables
2
28. Mr. JADLI AISSAM 28
React Quiz
Parmi les avantages de React ____
Gestion automatique des animations
DOM virtuel
Débogage Facile
Développement mobile avec React Native
3
29. Mr. JADLI AISSAM 29
React Quiz
L’encapsulation d’un composant signifie que ____
Il est considéré comme une boite noire par les autres
On ne peut pas interagir avec le composant
On ne peut pas utiliser le composant
Le composant contient tout ce dont il a besoin
4
30. Mr. JADLI AISSAM 30
React Quiz
Le flux des données dans React est ____
Multidirectionnel : n’importe quel composant
peut envoyer les données à n’importe quel
autre composant
Unidirectionnel : Le chemin qu’empreinte les
données est limité
5
31. Mr. JADLI AISSAM 31
React Quiz
Pour développer une application React, nous avons besoin de :
NodeJS
Java + JDK version supérieur à 8
Create-react-app
IDE (VSCode par exemple)
6
32. Mr. JADLI AISSAM 32
React Quiz
L’abréviation JSX veut dire ____
JavaScriptXpress
JavaSideXML
JavaScriptXML
JSONXML
7
33. Mr. JADLI AISSAM 33
React Quiz
L’utilisation de la syntaxe JSX avec React est ____
Obligatoire
Optionnelle
Recommandée
8
34. Mr. JADLI AISSAM 34
React Quiz
JSX permet d’évaluer les expressions :
Directement
Entre parenthèses ()
Entre accolades {}
Entre crochets []
9
35. Mr. JADLI AISSAM 35
React Quiz
Pour écrire un commentaire en JSX, utiliser ____
//commentaire
/*commentaire*/
{//commentaire}
{/*commentaire*/}
10
36. TRAVAUX PRATIQUES
Mr. JADLI AISSAM 36
http://bit.ly/reactjs_s1_tp
Télécharger le TP
http://bit.ly/reactjs_s1_cours
Télécharger le Cours
