FULL STACK COURSE
הרווחה,משרד העבודה
והשירותים החברתיים
1-Intro
www.webschool.co.il © David Alimi 2022
Elie Sultan
Lead Dev @ Nerdgames
https://www.linkedin.com/in/elie-sultan-7578
3120a/
https://github.com/spiritcodefire
www.webschool.co.il
www.webschool.co.il
Pourquoi avez vous besoin de react ?
React donne un cadre de travaille permettant de travailler sur d'énormes applications facilements
www.webschool.co.il
Les architectures
www.webschool.co.il
www.webschool.co.il
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
www.webschool.co.il
www.webschool.co.il
Exemple de virtual Dom vs Dom Réel
https://www https://www.konbini.com/ca
.audreycuisine.fr tegorie/lifestyle/food
www.webschool.co.il
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
www.webschool.co.il
REGLE NUMERO 1
les class en css deviennent className
www.webschool.co.il
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
www.webschool.co.il
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’)
www.webschool.co.il
REGLE NUMERO 3
Les ternary Operators sont vos amis
www.webschool.co.il
installer node js
https://nodejs.org/en/download
www.webschool.co.il
www.webschool.co.il
Comment vérifier que Node est bien
installé sur votre ordinateur ?
www.webschool.co.il
www.webschool.co.il
www.webschool.co.il
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 : https://prettier.io/
Utiliser le style par défaut avec {} dans votre fichier .prettierrc.json
www.webschool.co.il
www.webschool.co.il
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 ..
www.webschool.co.il
www.webschool.co.il
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
www.webschool.co.il
Commençons ensemble en reprenant votre travail réalisé dans le cours
html/css et le transformer en application React.js
www.webschool.co.il
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
Header.css qui interfère dans
Header.js
www.webschool.co.il
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é
www.webschool.co.il
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.
www.webschool.co.il
www.webschool.co.il
www.webschool.co.il
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
www.webschool.co.il
Utilisez la commande npm run build
et Hébergement de l’application
www.webschool.co.il
www.webschool.co.il
www.webschool.co.il
www.webschool.co.il
Votre Web app est en ligne !
www.webschool.co.il
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.
www.webschool.co.il
Typer son State
www.webschool.co.il
Application counter
www.webschool.co.il
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
www.webschool.co.il
Application Toogle
www.webschool.co.il
Application List
www.webschool.co.il
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
www.webschool.co.il
Un bon exemple en ligne
https://codepen.io/gaearon/pen/gWWZgR?editors=0010
www.webschool.co.il
Mise à jour de l’objet
www.webschool.co.il
setState est une fonction qui renvoi un objet de sa valeur antérieure
et nous allons le prouver
www.webschool.co.il
Mise à jour du state avec un composant de type class
www.webschool.co.il
React Router
Qu’est ce qu’une single Page
application et pourquoi avons nous
besoin d’un routeur ?
www.webschool.co.il
Npm install React-router-dom
www.webschool.co.il
Ajout de Browser router dans index.js
www.webschool.co.il
Ajout de Routes et Route dans app.js
www.webschool.co.il
Découvrir les Npm
Les (Node Package Manager) est un gestionnaire de packages pour Node.js.
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.
www.webschool.co.il
Donnons du peps à notre 404
Npm install react-particles
tsparticles
Rdv sur la page du npm :
https://www.npmjs.com/package/react-partic
les
Et sur la page de son exemple de configuration
https://particles.js.org/samples/index.html
www.webschool.co.il
Votre premier Link sur le CV
www.webschool.co.il
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.
www.webschool.co.il
