ESTEM_ReactJS_S1.pptx

Développement Web Moderne
avec REACTJS
Présenté par : JADLI AISSAM
jadliaissam@gmail.com
/in/jadli-aissam-86a69843
SÉANCE 1

SOMMAIRE
Introduction
Philosophie de
React
Environnement
de Travail
La Syntaxe JSX
Mr. JADLI AISSAM 2

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.

INTRODUCTION
Mr. JADLI AISSAM 4
Pourquoi utiliser ReactJS

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

INTRODUCTION
Mr. JADLI AISSAM 6
Qui utilise ReactJS ?

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.

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

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

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

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

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

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

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

Babel
Exemple
15
La Syntaxe JSX

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

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

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

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

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

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

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

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  , mais sont plutôt
écrits comme {/* comment */} {// comment}
La Syntaxe JSX

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

Tester vos Connaissances
Mr. JADLI AISSAM 25

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

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

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

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

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

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

Mr. JADLI AISSAM 32
React Quiz
L’abréviation JSX veut dire ____
JavaScriptXpress
JavaSideXML
JavaScriptXML
JSONXML
7

Mr. JADLI AISSAM 33
React Quiz
L’utilisation de la syntaxe JSX avec React est ____
Obligatoire
Optionnelle
Recommandée
8

Mr. JADLI AISSAM 34
React Quiz
JSX permet d’évaluer les expressions :
Directement
Entre parenthèses ()
 Entre accolades {}
Entre crochets []
9

Mr. JADLI AISSAM 35
React Quiz
Pour écrire un commentaire en JSX, utiliser ____
//commentaire
/*commentaire*/
{//commentaire}
{/*commentaire*/}
10

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

ESTEM_ReactJS_S1.pptx

Contenu connexe

Tendances

Similaire à ESTEM_ReactJS_S1.pptx

Plus de aissamjadli

Dernier

ESTEM_ReactJS_S1.pptx