FULL STACK COURSE
הרווחה,משרד העבודה
והשירותים החברתיים
1-Intro
[Link] © David Alimi 2022
Elie Sultan
Lead Dev @ Nerdgames
[Link]
3120a/
[Link]
[Link]
[Link]
Pourquoi avez vous besoin de react ?
React donne un cadre de travaille permettant de travailler sur d'énormes applications facilements
[Link]
Les architectures
[Link]
[Link]
Composants UI
React propose 2 façons d’écrire nos composants
• Classes (class component) • Fonctions (functional component)
Jusqu’à l’arrivée des Hooks, les classes étaient la seul manière d’utiliser
certaines fonctionnalités telles que la gestion de state
Les Classes et les Fonctions retournent du JSX
Rendre toujours un seul parent
Par convention, le nom du composant commence par une Majuscule
[Link]
[Link]
Exemple de virtual Dom vs Dom Réel
[Link] [Link]
.[Link] tegorie/lifestyle/food
[Link]
JSX
• Très ressemblant au html
• class devient className
• on utilise { } des qu’on veut écrire du javascript
• on peut écrire du html css javascript dans la même page tout en créant des composants
réutilisable
[Link]
REGLE NUMERO 1
les class en css deviennent className
[Link]
REGLE NUMERO 2
Une variable ne peut faire que 3 actions :
1- être initialisé : lui donner une valeur d’origine
2- être modifier: appelons ça le Setter
3- être utilisé: on appellera ça le Getter
[Link]
REGLE NUMERO 2 (suite)
Une variable ne peut faire que 3 actions :
1- être initialisé : lui donner une valeur d’origine
2- être modifié : on appelle ça le Setter
2- être utilisé : on appelle ça le Getter
const [ school, setSchool] = useState(initialValue)
Exemple const [school, setSchool] = useState(‘default’)
[Link]
REGLE NUMERO 3
Les ternary Operators sont vos amis
[Link]
installer node js
[Link]
[Link]
[Link]
Comment vérifier que Node est bien
installé sur votre ordinateur ?
[Link]
[Link]
[Link]
Les outils (2)
Conserver une qualité d’écriture du code élevé et homogène.
Prettier réorganise le style de votre code ce qui le rend toujours cohérent.
Prettier : [Link]
Utiliser le style par défaut avec {} dans votre fichier .[Link]
[Link]
[Link]
Commandes importantes dans React
• lancer l’application : npm run start
• builder l’application : npm run build
Commandes importantes du terminal
• ls : lister les fichiers
• rentrer dans un fichier : cd monfichier
• sortir d’un fichier : cd ..
[Link]
[Link]
State
Un State(état) est interne à un composant
Un State peut être modifié
A chaque fois que des donnés change dans un composant, le state peut être utilisé
Exemple: cliquez sur un boutton, case à cocher, entré de texte, remplir un formulaire
• On utilisera la méthode “useState”,
et on lui mettre sa valeur initial entre
les parenthèses
• Pour modifier notre state, on
utilisera setState()
• Pour se servir de notre variable , on
appelera simplement “state”
• A chaque fois que nous utilisons
setState(), react re-rend le
composant
[Link]
Commençons ensemble en reprenant votre travail réalisé dans le cours
html/css et le transformer en application [Link]
[Link]
Créer un site
perso/CV
● Requêtes:
EXERCICES & TP
○ vous devez partitionner votre
code en components
○ vous devez avoir au minimum
un component Header , un
component Main, et un
component Footer.
○ Vous devez importer toutes
les images.
○ Pour chaques composants,
vous devez créer son double
en .css
○ Ecrivez une class dans
[Link] qui interfère dans
[Link]
[Link]
Model MVC ( Model View Controleur)
et React ?
React est le V du model MVC !
View on affiche nos C ontroller: M odel de
composants on contrôle que donnees: CRUD sa
l’user est bien Database
authentifié
[Link]
PROPS
Un PROPS est l'abréviation de propriété.
Un PROPS ne doit pas être modifié ( immuable)
Un composant reçoit un props de son parent
Le composant nommé “Parent” est ici un composant Parent, il envoi un props
“name” à son composant enfant.
[Link]
[Link]
[Link]
ps
ie r pro
pre m
o tre
s e r v
p a s
Fa i re
1) on fait passer le props Nom entre un parent
et son enfant
2) on récupère une info depuis l’enfant
jusqu’au parent
[Link]
Utilisez la commande npm run build
et Hébergement de l’application
[Link]
[Link]
[Link]
[Link]
Votre Web app est en ligne !
[Link]
Le State
Le "state" dans React fait référence
à un objet JavaScript qui contient
des données qui peuvent être
utilisées pour rendre
dynamiquement l'interface
utilisateur de l'application en
fonction de l'état actuel de
l'application.
Le state est utilisé pour stocker des
données qui peuvent être modifiées
au cours du temps et qui affectent
l'apparence ou le comportement de
l'interface utilisateur.
[Link]
Typer son State
[Link]
Application counter
[Link]
Que se passe-t-il si j’utilise une variable
traditionnelle au lieu d’un state ?
Essayons, car la meilleure preuve est
l’exemple !
Résultat : tout fonctionne, mais
aucune mise à jour du DOM
[Link]
Application Toogle
[Link]
Application List
[Link]
Map vs For 1-2-3
1) Immutabilité : En utilisant le .map, vous créez une
nouvelle liste a partir de la liste d’origine sans
modifier la liste d’origine
2) Performances : le .map est plus rapide que le for
3) Lisibilité : syntaxe plus concise et plus lisible
[Link]
Un bon exemple en ligne
[Link]
[Link]
Mise à jour de l’objet
[Link]
setState est une fonction qui renvoi un objet de sa valeur antérieure
et nous allons le prouver
[Link]
Mise à jour du state avec un composant de type class
[Link]
React Router
Qu’est ce qu’une single Page
application et pourquoi avons nous
besoin d’un routeur ?
[Link]
Npm install React-router-dom
[Link]
Ajout de Browser router dans [Link]
[Link]
Ajout de Routes et Route dans [Link]
[Link]
Découvrir les Npm
Les (Node Package Manager) est un gestionnaire de packages pour [Link].
Les packages NPM sont des bibliothèques logicielles prêtes à l'emploi que vous pouvez installer dans votre projet
pour ajouter des fonctionnalités et des fonctionnalités supplémentaires en seulement quelques secondes.
[Link]
Donnons du peps à notre 404
Npm install react-particles
tsparticles
Rdv sur la page du npm :
[Link]
les
Et sur la page de son exemple de configuration
[Link]
[Link]
Votre premier Link sur le CV
[Link]
Devoir pour le 02/04
● Requêtes:
Ajouter dans votre Navbar l’onglet :
- compteur
EXERCICES & TP
-list
-toggle
-object
Pour chaque onglet vous allez créer une page dans votre architecture.
Lorsqu’on cliquera sur la Navbar , votre page s’ouvre, vos applications (
compteur , list , toggle , object ) s'ouvrent , et vous devez les styliser.
Une fois que c’est fait, hébergez- moi votre application sur Netlify et
envoyez-moi l’url de votre application.
[Link]