Apprendre le JavaScript pour être développeur web – mes vidéos sur le sujet

Je suis en train d‘apprendre le JavaScript (j’ai commencé début juillet 2020) pour être développeur web, pour être développeur front-end dans un premier temps.

Pour être développeur web il faut apprendre et un avoir un certain niveau de maîtrise dans le HTML, CSS et le JavaScript et  il faut maîtriser un framework front end comme VUE.JS par exemple (il y a aussi ANGULAR et REACT pour les plus utilisés) à minima pour être employable en entreprise.

Le JavaScript est un langage de programmation que je trouve difficile et long à apprendre, car il y a énormément de chose à apprendre  et à retenir. Tu n’apprends pas le JavaScript en 3 semaines, et l’utiliser quand on débute n’est pas évident. 

C’est ce qui m’a motivé à créer ces vidéos sur le JavaScript, ces vidéos me servent à réviser.

ça fait plus de 10 ans que je fais des vidéos sur les sujets qui m’intéressent techniquement et ces vidéos me font progresser sur le plan professionnel, ça me permet de fixer les choses.

Je rajoute que le plus difficile lorsque l’on veut apprendre la programmation pour faire du développement web et être développeur fullstack JavaScript avec la stack MERN (MongoDB, Express, React.js, Node.js) , mis à part la quantité énorme d’information qu’il faut retenir, comprendre, en ce qui me concerne c’est que la source de l’information est en anglais, on le voit très bien avec mongoDB, expressredux.js , node.js, mysql etc…) tout est en anglais, le français n’existe pas, il n’y a que react où il y a un peu de français dans la doc, mais la doc en fr n’est pas la dernière version de react. Et donc l’anglais est indispensable. Quand on est mauvais en anglais , c’est extrêmement pénalisant pour apprendre seul. Suivre des cours en anglais écrit comme ceux de codecademy (payant) (très déçu de la qualité des cours et de l’interface de test qui est mauvaise, pourquoi on peut pas télécharger le code pour le mettre sous visual studio code pour faire les tests ?) et avec google translate peut aider à améliorer son niveau an anglais et apprendre du vocabulaire orienté développement web. Il y a aussi freecodecamp (gratuit) , même si le cours sur react n’a pas été mis à jour avec les Hooks lorsque je l’ai suivi.

L’anglais est un boulet qui ralentit ma vitesse d’apprentissage et de progression.

Apprendre le JavaScript

La playlist sur mes vidéos JavaScript que j’ai nommée : 

JavaScript-Exercices-Débutant-J’apprends le JavaScript

 

Mes vidéos sur le JavaScript :

JavaScript01-DOM-Exercice-Faire apparaître des paragraphe en cliquant sur un lien-Débutant 

JavaScript02-Exercice -Transformer une fonction nommée en une expression fonction fléchée-Débutant

JavaScript03-DOM-Exercice-Ajouter du texte dans un paragraphe en appuyant sur un bouton-Débutant

JavaScript04-Exercice-Mettre la fonction nommée dans le addEventListener-Débutant

JavaScript09-DOM-Exercice-utilisation de la méthode removeChild( )-débutant

JavaScript10-DOM-Exercice-Utilisation de la méthode replaceChild( ) -débutant

JavaScript11-DOM-Exercice-Utilisation de la méthode cloneNode( )-débutant

JavaScript12-DOM-Exercice-Utilisation de la méthode insertBefore( )-débutant

JavaScript13-DOM-Exercice-Utilisation de la méthode hasChildNode( )-débutant

JavaScript14-DOM-Exercice-utilisation de la propriété onclick et de la méthode addEventListener( )

JavaScript15-DOM-Utilisation de l’événement mouseover et mouseout sur un élément html-débutant

JavaScript16-DOM-Exercice-Utilisation de l’événement onblur dans l’input d’un formulaire-débutant

JavaScript17-DOM-Exercice-manipuler les styles css avec la propriété style du javascript-débutant

JavaScript18-DOM-Exercice-utilisation de la propriété className pour modifier le style CSS page web

JavaScript19-Découverte du local storage et de la méthode setItem( )-débutant

JavaScript20-Découverte du Web Storage et de la méthode getItem( )-débutant

JavaScript21-Découverte du Web Storage et de la méthode removeItem( )-débutant

JavaScript22-Découverte du Web Storage et de la méthode clear( )-débutant

JavaScript23-Présentation exercice-faire un formulaire et stocker les données dans le local storage

JavaScript24-le code HTML de l’exercice-faire un formulaire et stocker les données local storage

JavaScript25-le code JavaScript de l’exercice-faire formulaire et stocker les données local storage

JavaScript26-Exercice-découverte des fonctions setTimeout( ) et setInterval( )-débutant

JavaScript27-Découverte de l’objet Promise (promesse) et de la méthode then( ) et catch( )-débutant

JavaScript28-Exercice-Ajout d’une temporisation à la promesse-promise-Débutant

JavaScript29-fonction de callback (fonction de rappel) complément information vidéo JavaScript05

JavaScript30-Fonction de callback avec des paramètres que je rajoute-débutant

JavaScript31-Méthode fetch()-Première requête-Découverte-Débutant

JavaScript32-Méthode fetch()-Première récupération de donnée sur la web API JSONPlaceholder-Débutant

JavaScript33-Exercice-Afficher sur une page web des données récupérées sur une web API-Débutant

JavaScript34-Utilisation de async et await et de try{ } et catch{ }-fonction asynchrone-débutant

JavaScript35-Utilisation de response.text() et de la méthode JSON.parse() – débutant

JavaScript36-Utilisation de la méthode POST dans une requête HTTP avec fetch( )-Débutant

JavaScript37-Complément d’information sur fetch( ) et la vidéo JavaScript36

JavaScript38-Création d’un objet et différentes informations du MDN

JavaScript39-Découverte de quelques méthodes de Object-Débutant

JavaScript40-La création d’une classe et l’instance d’une classe-découverte-débutant

JavaScript41-Complément d’information MDN-class, constructor, this, new, instance-Débutant

JavaScript42-Création de plusieurs méthodes dans une classe et invoquer ces méthodes-Débutant

JavaScript43-Expression de classe-Déclaration de classe-Découverte-Débutant

JavaScript44-Découverte du getter-accesseur-dans une classe-Débutant

JavaScript45-Découverte du setter-mutateur-dans une classe-Débutant

JavaScript46-Découverte des méthodes statiques-static-d’une classe-Débutant

JavaScript47-Création de sous classe ou classe fille avec extends et super( )-Découverte-Débutant

JavaScript48-Découverte de l’utilisation des mixins avec les classes-Débutant

JavaScript49-Découverte et utilisation de la boucle for-Débutant

JavaScript50-La boucle for…in-Découverte et utilisation-Débutant

JavaScript51-La boucle for of-Découverte et utilisation-Débutant

JavaScript52-Méthode forEach( )-Découverte et Utilisation-Débutant

JavaScript53-La méthode map( )-Découverte et Utilisation-Débutant

JavaScript54Comment sélectionner une valeur d’un OBJET qui est dans un TABLEAU-Débutant

JavaScript55Mettre du code HTML dans une variable et l’utiliser avec inserAdjacentHTML( )-Débutant

JavaScript56Mettre insertAdjacentHTML( ) dans une fonction-Débutant

JavaScript57Utilisation fonction de callback pour calculer la circonférence et l’aire du cercle

JavaScript58Utilisation des fonctions de callback pour faire des calculs d’addition sous traction..

JavaScript59Aller chercher la value d’une key dans un objet qui est déjà dans un objet-Débutant

JavaScript60Découverte de l’opérateur spread ou de décomposition utilisé sur les tableaux

JavaScript61Utilisation de l’opérateur SPREAD pour faire une copie d’un objet simple

JavaScript62Utilisation de l’opérateur SPREAD pour faire une fusions de deux objets simples

JavaScript63Découverte de l’opérateur REST

JavaScript64Découverte de l’affectation par décomposition-Débutant

JavaScript65Découverte de la méthode splice( ) Modifier les valeurs d’un tableau-Débutant

JavaScript66Découverte de la méthode slice( ) appliquée sur un tableau-Débutant

JavaScript67Découverte de la méthode slice( ) appliquée sur une chaîne de caractère-Débutant

JavaScript68Télécharger le code d’un serveur node.js-backend-et le faire fonctionner en local

JavaScript69Installation du préprocesseur Sass dans le répertoire du backend (mauvaise idée)

JavaScript70Installer le préprocesseur Sass dans un dossier de travail avec Visual Studio Code

JavaScript71Insérer des images d’une API web sur une page web html avec insertAdjacentHTML

–>JavaScript natif le début du site e-commerce, début des vidéos :

JavaScript72La pose d’une grille pour ordonnée les données-présentation de produit e-commerce

JavaScript73Le site e-commerce prend doucement forme

JavaScript74Modification de quelques erreurs scss et key value pour url photo produit

JavaScript75Génération dynamique automatique de la page web à partir des données d’une variable

JavaScript76le transfert de l’id du produit par l’url-Transmettre des données avec l’URL

JavaScript77Récupération id depuis l’url-extraction id depuis la chaîne de requête-query string

JavaScript78La sélection de l’objet qui est dans le tableau par son id- 2 méthodes

JavaScript79L’affichage du produit sélectionné depuis la page d’accueil dans la page produit

JavaScript80La récupération des valeurs du produit et du formulaire pour le panier

JavaScript81Génération automatique du code html des options du produit suivant le nombre d’options

JavaScript82Mettre l’objet de la variable du panier dans le local storage pour le sauvegarder

JavaScript83-Une petite factorisation du code du coté du localStorage

JavaScript84Création de la page panier.html et du fichier panier.js

JavaScript85Le code HTML statique et le SCSS de la page panier

JavaScript86Modification pour que la page panier.html devienne dynamique

JavaScript87Correction erreur pour afficher le nom complet de l’option du produit dans le panier

JavaScript88Le bouton supprimer le produit avec la méthode filter et axe d’amélioration possible

JavaScript89Ajout du bouton pour vider entièrement le panier dans la page panier

JavaScript90Le calcul du prix total du panier et son affichage sur la page web

JavaScript91Le début du formulaire-La partie HTML

JavaScript92Récupérer les valeurs du formulaire et les mettre dans le local Storage

JavaScript93Je mets les values du formulaire dans un objet que j’envoie dans le local storage

JavaScript94Créer l’objet pour le formulaire avec une classe-Est ce que c’est utile dans ce cas là ?

JavaScript95Remplir les champs du formulaire automatiquement avec les valeurs du local storage

JavaScript96Remplir les champs du formulaire automatiquement avec une fonction et le localStorage

JavaScript97Controle validation formulaire du champ nom et prénom avant envoi dans local storage

JavaScript98RegEx code postal du formulaire pour la validation du champ avant envoi

JavaScript99RegEx pour l’email du formulaire pour la validation du champ avant envoi

JavaScript100RegEx pour l’adresse du formulaire pour la validation du champ avant envoi

JavaScript101Mettre un texte d’avertissement à coté du champ du formulaire qui pose problème

JavaScript102Ajout du texte d’avertissement à coté des autres champs du formulaire

JavaScript103Controle du champ ville avant validation du formulaire

JavaScript104Ajout de la possibilité de choisir la quantité de produit dans la sélection du produit

JavaScript105Correction erreur du local storage qui apparait dans la console-can’t access property

JavaScript106Modification de l’expression régulière prénom pour prendre en compte le tiret

JavaScript107Envoie des données du panier et du formulaire vers un serveur avec fetch( ) et POST

JavaScript108Cette WEB API de TEST me permet de mettre mes données et me créer un id en retour

JavaScript109Gestion des erreurs avec try{ } catch(){ } et response.ok , response.status, promise

JavaScript110Problème à corriger-La promesse est exécutée alors que le formulaire n’est pas valide

JavaScript111La création de la fonction envoieVersServeur, le code semble plus lisible

JavaScript112Récupération de l’id de la response du serveur et changement de page après validation

JavaScript113Création de la structure de la page web confirmation-commande.html

JavaScript114Mise en place du javascript dans la page web confirmation-commande.html

JavaScript115Supprimer l’espace vide qu’il y a entre l’image et la bordure de la div

JavaScript116Retour automatique à la page d’accueil si actualisation confirmation-commande.html

JavaScript117La suppression de l’erreur “uncaught TypeError can’t access property length x is null”

JavaScript118Ne pas afficher le formulaire de validation de commande lorsque le panier est vide

JavaScript119Rajouter le favicon pour ne plus voir l’erreur du favicon dans la console

JavaScript120JavaScript120-L’OPERATEUR TERNAIRE pour montrer les champs du formulaire à bien remplir

JavaScript121Erreur 400-Bad Request-Mauvais formatage de la requête envoyer au backend (serveur)

JavaScript122Le site e-commerce AVANT et APRES le lifting et bilan sur le code JavaScript utilisé

JavaScript123Faire les requêtes POST GET PUT et DEL avec POSTMAN-UPLOAD image et auth TOKEN

–>Node.js début des vidéos :

JavaScript124Node.js-Découverte d’un frontend et d’un backend avec sa web API

JavaScript125Node.js-Web API-Mise en place de l’environnement de travail

JavaScript126-Node.js-Web API-La STRUCTURE des DOSSIERS de la web API

JavaScript127-Node.js-Web API-server.js le code minimal pour faire fonctionner le web server

JavaScript128-Node.js-Web API-app.js l’importation du framework Express pour la création de l’API

JavaScript129-Node.js-Web API-app js la méthode app use utilisation et premier middleware

JavaScript130-Nodejs-Web APIInstallation du package nodemon pour relancer automatiquement le server

JavaScript131-Node.js-Web API-Configuration du package.json pour lancer nodemon avec npm run start

JavaScript132-Node.js-Web APIInstallation du package pour utiliser les VARIABLES D’ENVIRONNEMENT

JavaScript133-Node.js-Web API-Installation du package “morgan”-middleware qui log des requêtes HTTP

JavaScript134-Node.js-Web API-La méthode app.use() et res.status()

JavaScript135-Node.js-Web API-La base de donnée MongoDB-hébergée dans le cloud-Premier contact

JavaScript136-Nodejs-Web API-Création de la base de donnée MongoDB Atlas (création du Cluster) noSQL

JavaScript137-Node.js-Web API-Connexion de la base de donnée au backend avec la package “mongoose”

JavaScript138-Node.js-Web API-Mise en place des variables d’environnement dans db.JS

JavaScript139-Node.js-Web API-Mise en place d’une variable d’environnement pour l’adresse du cluster

JavaScript140-Node.js-Web APIMise en place du schéma de donnée User.js pour interagir avec MongoDB

JavaScript141-Node.js-Web API-Mise en place du CORS (Cross-Origin Request Sharing) dans app.js

JavaScript142-Node.js-Web API-Voir ce qu’il y a dans req, res, et next dans app.use( )

JavaScript143-Node.js-Web API-Installation du package “body-parser” de NPM

JavaScript144-Node.js-Web API-La première route-Je commence par la route signup

JavaScript145-Node.js-Web API-Le controller de la route signup-Mise en place

JavaScript146-Node.js-Web API-Envoyer l’email et le password de signup dans MongoDB Atlas

JavaScript147-Node.js-Web API-Hasher le password avec bcrypt avant envoie dans la base de donnée

JavaScript148-Node.js-Web API-Le chiffrement de l’email avec crypto-js envoie dans MongoDB Atlas

JavaScript149-Node.js-Web API-Ajout une variable d’environnement pour la clé de chiffrement du mail

JavaScript150-Node.js-Web API-Mise en place du contrôle du password avec “password-validator”

JavaScript151-Node.js-Web API-Mise en place de “mongoose-unique-validator ” dans models/user

JavaScript152-Node.js-Web API-Mise en place du logger de “mongoose”

JavaScript153-Node.js-Web API-Mise en place de la route login-Préparation

JavaScript154-Node.js-Web API-Contrôler si le mail est bien présent dans la base de donnée

JavaScript155-Node.js-Web API-Contrôler la validité du password envoyé par le front avec bcrypt

JavaScript156-Node.js-Web API-La création du TOKEN d’authentification et envoi vers le FRONTEND

JavaScript157-Node.js-Web API-Création d’un nouveau schéma avec Mongoose pour les prochaines routes

JavaScript158-Node.js-Web API-La création de la route POST pour créer une fiche user dans la BDD

JavaScript159-Node.js-Web API-L’enregistrement de l’objet de la route POST dans MongoDB Atlas

JavaScript160-Node.js-Web API-Route GET Afficher tous les objets de la collection fiche_users

JavaScript161-Node.js-Web API-Route GET”/:id” Afficher uniquement un objet sélectionné par son _id

JavaScript162-Node.js-Web API-Route PUT”/: id” Modifier (UPDATE) un objet sélectionné par son _id

JavaScript163-Node.js-Web API-Route DELETE “/:id” Supprimer un objet sélectionné par son _id-CRUD

JavaScript164-Node.js-Web API-Mise en place du middleware d’authentification pour protéger les route

JavaScript165-Node.js-Web API-Récupération du TOKEN qu’il y a dans la REQUEST envoyé par le FRONT

JavaScript166-Node.js-Web API-Décoder le TOKEN et récupérer le userId à l’intérieur-authentification

JavaScript167-Node.js-Web API-Contrôler la validité du userId du TOKEN avec le userId de la REQUEST

JavaScript168-Node.js-Web API-Modification du “controller” de la route POST pour corriger le bug

JavaScript169-Node.js-Web API-Autre logique pour contrôler la validité du TOKEN authentification

JavaScript170-Node.js-Web API-Améliorer le message d’erreur dans le middleware d’authentification

JavaScript171-Node.js-Web API-Implémentation du middleware MULTER pour gérer les fichiers “image”

JavaScript172-Node.js-Web API-Modification du models Mongoose pour y mettre url de l’image

JavaScript173-Node.js-Web API-Faille authentification form-data (Multer) POSTMAN body req est vide

JavaScript174-Node.js-Web API-La solution à l’authentification avec form-data Postman route protégée

JavaScript175-Node.js-Web API-Ma première découverte d’une faille de sécurité d’authentification

JavaScript176-Node.js-Web API-Correction du bug sur le renommage du nom de l’image-Multer

JavaScript177-Node.js-Web API-Modification du controller de la route POST pour form-data Multer

JavaScript178-Node.js-Web API-Pour pouvoir afficher les images-nouvelle route et express.static()

JavaScript179-Node.js-Web API-Multer Image route avec body raw fonctionne mais pas avec form data

JavaScript180-Node.js-Web API-Route PUT Postman body form-data authentification OK et req.file OK

JavaScript181-Node.js-Web API-Route PUT modification du CONTROLLER remplacer-fichier IMAGE-Multer

JavaScript182-Node.js-Web API-Route DELETE effacer l’objet sur la BDD et l’image sur le serveur

JavaScript183-Nodejs-Web API-Contrôler le CRUD de la web API avec POSTMAN-Authentification par TOKEN

JavaScript184-Node js-Web API-Découverte d’une FAILLE de sécurité sur le CONTROLLER route DELETE

JavaScript185-Node.js-Web API-Correction FAILLE sécurité sur le CONTROLLER de la route DELETE

JavaScript186-Node.js-Web API-Découverte d’une FAILLE de sécurité sur le CONTROLLER de la route PUT

JavaScript187-Node.js-Web API-Correction de la FAILLE de sécurité sur le CONTROLLER de la route PUT

JavaScript188-Node.js-Web API-La 4ème FAILLE de sécurité et c’est sur le middleware Multer

JavaScript189-Node.js-Web API-Mise en place d’un système de likes dislikes dans FicheUser

JavaScript190-Node.js-Web API-Mise en place de la route like et de la fonction likeFicheUser

JavaScript191-Node.js-Web API-Récupération de l’userId et de la valeur du like et l’id de l’objet

JavaScript192-Node.js-Web API-Mettre un LIKE et l’enlever-Le code du controller et requête POSTMAN

JavaScript193-Node.js-Web API-Mettre un dislike et l’enlever-Code du Controller et requête POSTMAN

JavaScript194-Node.js-Web API-Modifier le controller du like et dislike et y mettre un switch() case

JavaScript195-Node.js-Web API-Ajout de la route like dans readme et renvoi d’erreur dans un callback

JavaScript196-Node.js-Web API-L’ajout d’un TIMESTAMPS dans le Schema Mongoose de FicheUser

JavaScript197-Node.js-Web API-La personnalisation du message d’erreur-dans le Schema de Mongoose

JavaScript198-Node.js-Web API-Utilisation du package body-parser OU de express.json( ) ?

JavaScript199-Node.js-Web API-Utilisation de cette forme d’écriture const{ } = require(” “)

JavaScript200-Node.js-Web API-Affichage du port du serveur utilisé dans le terminal

JavaScript201-Node.js-Web API-Affichage de l’erreur si la connexion à MongoDB Atlas échoue

JavaScript202-Node.js-Web APIJe teste le destructuring sur le req body

JavaScript203-Node.js-Web API-Je contrôle la validité de l’email avec le package npm validator

JavaScript204-Node.js-Web API-Remplacement du .then .catch par async et await avec try et catch

JavaScript205-Node.js-Web API-Je passe le controller readOneFicheUser à l’ECMAScript 2017

JavaScript206-Node.js-Web API-Je passe le controller deleteOneFicheUser à l’ECMAScript 2017

JavaScript207-Node.js-Web API-J’extrais la query pour la bdd du controller readAllFicheUser-DRY

JavaScript208-Node.js-Web API-J’extrais la query pour la bdd du controller readOneFicheUser-DRY

JavaScript209-Node.js-Web API-J’extrais la query pour la bdd du controller deleteOneFicheUser-DRY

JavaScript210-Node.js-Web API-Installation de MongoDB Compass-GUI-Interface Graphique Utilisateur

JavaScript211-Node.js-Web API-Installer la base de données MongoDB en LOCAL sur son PC windows

JavaScript212-Node.js-Web API-Connecter MongoDB Compass sur la base de données MongoDB local

JavaScript213-Node.js-Web API-Création d’un utilisateur et définition de son rôle pour MongoDB local

JavaScript214-Node.js-Web API-Connecter la base de données local MongoDB avec la web API et Mongoose

JavaScript215-Node.js-Web API-Récapitulatif mettre en marche et arrêter un serveur MongoDB win10

JavaScript216-Node.js-Web API-Installation de XAMP-Serveur Apache, Serveur MySQL et phpMyAdmin

JavaScript217-Node.js-Web API-MySQL-Requête pour créer une data base et la supprimer et fake data

 –>MySQL début des vidéos :

JavaScript218-Node.js-Web API-MySQL-Requête pour créer une table et insérer des données

JavaScript219-Node.js-Web API-MySQL-Requête pour rendre l’email unique dans la table

JavaScript220-Node.js-Web API-MySQL-Requête pour chercher ligne et valeurs par le biais de l’email

JavaScript221-Node.js-Web API-MySQL-Connexion de la web API à la base de données MySQL

JavaScript222-Nodejs-Web API-MySQL-Modification du controller signup pour enregistrer dans la bdd

JavaScript223-Node.js-Web API-MySQL-Modification controller login chercher l’email chiffré dans bdd

JavaScript224-Node.js-Web API-MySQL-Controller login contrôle password et création du TOKEN JWT

JavaScript225-Node.js-Web API-MySQL-Ajout d’une classe User dans Models et modification controllers

JavaScript226-Node.js-Web API-MySQL-Ajout d’une méthode emailChiffrement( ) dans la classe User

JavaScript227-Node.js-Web API-MySQL-Ajout d’une méthode hashPassword dans la classe User

JavaScript228-Node.js-Web API-MySQL-Finalisation de la route signup pour envoyer données dans MySQL

JavaScript229-Node.js-Web API-MySQL-Finalisation route login utilisation méthode emailChiffrement()

JavaScript230-Node.js-Web API-MySQL-Crash du serveur MySQL et corruption de la base de données

JavaScript231-Node.js-Web API-MySQL-Test de réinstallation du dump SQL avec phpMyAdmin

JavaScript232-Node.js-Web API-MySQL-Découverte de Primary Key, Foreign Key et la table fiche user

JavaScript233-Node.js-Web API-MySQL-Modification code pour passer le middleware d’authentification

JavaScript234-Node.js-Web API-MySQL-La requête SQL du controller readAllFicheUser-route GET

JavaScript235-Node.js-Web API-MySQL-La protection injection SQL du controller readAllFicheUser

JavaScript236-Node.js-Web API-MySQL-Modification du controller readOneFicheUser-route GET/: id

JavaScript237-Node.js-Web API-MySQL-Tentative de mettre la query SQL dans une fonction-empty query ?

JavaScript238-Node.js-Web API-MySQL-body form data route POST modification du middleware d’auth

JavaScript239-Node.js-Web API-MySQL-Préparation controller createFicheUser avant d’envoyer la data

JavaScript240-Node.js-Web API-MySQL-La requête SQL du controller createFicheUser et envoie dans bdd

JavaScript241-Node.js-Web API-MySQL-Modification de la table du controller readOneFicheUser

JavaScript242-Node.js-Web API-MySQLModification du controller updateOneFicheUser pour la route PUT

JavaScript243-Node.js-Web API-MySQL-Modification du controller deleteOneFicheUser pour route DELETE

–>REACT.js Début des vidéos :

JavaScript244-React.js-INTRODUCTION et RESSOURCES pour apprendre REACTJS

JavaScript245-React.js-INSTALLATION de CREATE-REACT-APP et configuration EMMET et plugin React

JavaScript246-React.js-Création des dossiers pour ranger les futurs composants, images, pages, asset

JavaScript247-React.js-Installation du SASS pour pouvoir utiliser les fichiers SCSS

JavaScript248-React.js-Mise en place de FONT AWESOME pour utiliser les icône gratuites

JavaScript249-React.js-Mise en place de GOOGLE FONTS pour utiliser des polices spécifiques

JavaScript250-React.js-Découverte du JSX

JavaScript251-React.js-Le rendu des éléments

JavaScript252-React.js-Composant à base de STATELESS FUNCTIONAL COMPONENT

JavaScript253-React.js-Composant basique à base de CLASSE ES6

JavaScript254 React.js-Création d’un composant fonctionnel basique ReseauxSociaux.js

JavaScript255-React.js-Plantage total de VSCode sous WIN 10 (20H2) réinstallation de VSCode

JavaScript256-React.js-Correction des erreurs rel=”noreferrer” et “Invalide DOM property ‘class'”

JavaScript257-React.js-Passer des props à un composant fonctionnel sans état-stateless functional

JavaScript258-React.js-Passer un tableau de valeurs dans props d’un stateless functional component

JavaScript259-React.js-Définir une props par défaut dans un stateless functional component

JavaScript260-React.js-Validation de types avec PropTypes dans un composant fonctionnel

JavaScript261-React.js-Convertir functional component en class component et utilisation de PropTypes

JavaScript262-React.js-Qu’est ce qu’il y a dans le this d’un composant de classe (class component)

JavaScript263-React.js-Introduction au composant à état dans une classe-class component with state

JavaScript264-React.js-Le rendu du state dans la page web composant à état avec classe

JavaScript265-React.js-Mettre à jour le state avec this.setState( ) dans un class component

JavaScript266-React.js-Je rajoute une 2ème méthodes pour mettre à jour le state -class component

JavaScript267-React.js-Découverte du setState avec dedans une fonction de callback et previousState

JavaScript268-React.js-Création d’un toggle pour afficher cacher des components en appuyant bouton

JavaScript269-React.js-Exercice mise en pratique state et setState-faire un compteur avec 3 boutons

JavaScript270-React.js-Class component Horloge avec componentDidMount( ) et componentWillUnmont( )

JavaScript271-React.js-Les mises à jour du state peuvent être asynchrones-Utilisation d’une fonction

JavaScript272-React.js-Passer le state d’un class component dans une props d’un functional component

JavaScript273-React.js-Créer un champ contrôlé de type input dans un class component

JavaScript274-React.js-Composant contrôlé-envoie du formulaire-bouton de type submit-class component

JavaScript275-React.js-Passer un state d’un composant parent comme props à un composant enfant

JavaScript276-React.js-Passer fonction d’un composant parent dans une props pour un composant enfant

JavaScript277-React.js-Cycle de vie componentDidMount( ) et componentWillUnmount( )

JavaScript278-React.js-Utilisation de addEventListener( ) dans componentDidMount( ) et removeEventL.

JavaScript279-React.js-Le style CSS inline-Le CSS directement écrit dans le JSX

JavaScript280-React.js-Affichage conditionnel dans le render( ) avec if else

JavaScript281-React.js-Affichage conditionnel dans le render( ) avec l’opérateur logique &&

JavaScript282-React.js-Affichage conditionnel dans le render( ) avec l’opérateur ternaire ? et :

JavaScript283-React.js--Affichage conditionnel avec plusieurs opérateurs ternaires imbriqués

JavaScript284-React.js-Affichage conditionnel en passant des PROPS dans un composant enfant

JavaScript285-React.js-Modifier le style CSS de manière conditionnelle en fonction du state

JavaScript286-React.js-Utilisez la méthode map( ) pour effectuer le rendu dynamique des éléments

JavaScript287-React.js-Il faut mettre une KEY unique devant tous les éléments d’une liste

JavaScript288-React.js-Filtrer dynamiquement un tableau avec le méthode filter( )

JavaScript289-React.js-Redux.js-Introduction à REDUX-Découverte

JavaScript290-React.js-Redux-Installation des packages redux et react redux dans Visual Studio Code

JavaScript291-React.js-Redux-La création du store avec la méthode createStore( )

JavaScript292-React.js-Redux-Obtenir le State du store

JavaScript293-React.js-Redux.js-Définir l’objet Action

JavaScript294-React.js-Redux.js-Définir un Action Creator

JavaScript295-React.js-Redux.js-Dispatch une Action dans le Store

JavaScript296-React.js-Redux.js--Traiter une action dans le Store avec le reducer( )

JavaScript297-React.js-Redux.js-Traiter plusieurs Action Creator avec SWITCH CASE dans le REDUCER

JavaScript298-React.js-Redux.js-Mettre les Actions Types dans des constantes

JavaScript299-React.js-Redux.js-subscribe( ) la méthode pour écouter qu’il y a eu un dispatch

JavaScript300-React.js-Redux.js-Combiner plusieurs reducers avec combineReducers( )

JavaScript301-React.js-Redux.js-Envoyer des Action Data au Store par le biais de l’Action Creator Funct

JavaScript302-React.js-Redux.js-Le middleware REDUX THUNK pour gérer les actions ASYNCHRONES (web api)

JavaScript303-React.js-Redux-Le middleware REDUX LOGGER-Installation et Utilisation

JavaScript304-React.js-Redux-L’extension Dev Tools sur Chrome et NPM utilisée avec les middlewares

JavaScript305-React.js-Redux-Redux-Faire un compteur avec Redux-Méthodologie Mise en pratique

JavaScript306-React.js-Redux.js-Le reducer ne doit jamais modifier les valeurs du state d’origine

JavaScript307-React.js-Redux.js-Immuabilité du state- exemple avec un tableau et l’opérateur spread

JavaScript308-React.js-Redux.js-Supprimer un élément d’un array avec le spread operator et splice( )

JavaScript309-React.js-Redux.js-Copier un objet avec Object.assign( ) – Immutable state

JavaScript310-React.js-Redux.js-Création d’un composant React-Extraction de la logique du state Redux

JavaScript311-React.js-Redux.js-Connecter Redux à React avec le Provider

JavaScript312-React.js-Redux.js-mapStateToProps( ) – Mapper le state aux props

JavaScript313-React.js-Redux.js-mapDispatchToProps( ) – Mapper le dispatch aux props

JavaScript314-React.js-Redux.js-Connecter le composant avec le store redux

JavaScript315-React.js-Redux.js-Extraire le state local et le mettre dans Redux

JavaScript316-React.js-Redux-Refactorisation du code-Provider-store-reducer-action-creator

JavaScript317-React.js-Redux-Depuis un autre composant accéder aux données du state dans le store

JavaScript318-React.js-Redux-Redux-La destructuring syntax à la place de props dans functional component

JavaScript319-React.js-Redux.js-Quelques informations sur : export, export default, import, import * as

JavaScript320-React.js-Redux.js-Ne plus avoir besoin de bind le this avec la méthode-class component

JavaScript321-React.js-Hooks-Introduction au HOOKS de React.js

JavaScript322-React.js-Hooks-Découverte et utilisation du Hook useState( )

JavaScript323-React.js-Hooks-Découverte et utilisation du Hook useEffect( )

JavaScript324-React.js-Hooks-Les règles des Hooks

JavaScript325-React.js-Hooks-Le custom Hook ou Hook personnalisé

JavaScript326-React.js-Hooks-Mettre à jour NPM dans Visual Studio Code

JavaScript327-React.js-Hooks-Utilisation d’une callback function pour modifier le state de useState

JavaScript328-React.js-Hooks-Première requête get vers une web API avec fetch et axios et useEffect

JavaScript329-React.js-Hooks-Afficher données récupérées de la web API sur la page web avec .map()

JavaScript330-React.js-Hooks-Limiter l’affichage du nombre d’items map( ) avec slice( ) ou filter()

JavaScript331-React.js-Hooks-MODIFIER le STATE du composant PARENT depuis le composant PARENT

JavaScript332-React.js-Hooks-MODIFIER le STATE du composant PARENT depuis le composant ENFANT

JavaScript333-React.js-Hooks-REMONTER le STATE de l’ENFANT vers le PARENT et l’utiliser dans PARENT

JavaScript334-React.js-Hooks-Afficher ou cacher les données de la web API avec un toogle et if else

JavaScript335-React.js-Hooks-Afficher cacher données de la web API avec l’opérateur ternaire et &&

JavaScript336-React.js-Hooks-Changer de class CSS avec l’opérateur TERNAIRE suivant une condition

JavaScript337-React.js-Hooks-Dans un then avec un console log il faut return la response

JavaScript338-React.js-Hooks-Créer un identifiant unique pour la key d’une liste react avec UUID

JavaScript339-React.js-Hooks-Créer sa fake API avec ses propres données en utilisant json-server

JavaScript340-React.js-Hooks-Afficher les données de la fake API dans le composant enfant

JavaScript341-React.js-Hooks-Afficher les données de la fake API dans le composant enfant avec map

JavaScript342-React.js-Hooks-L’application plante au démarrage alors qu’il y a 5 mois elle fonctionnait

 

 

 

 

Développeur Web

(Google Trends)

Développeur Web (Google Trends)

Le pearltree du blog :

 
Apprendre le JavaScript pour être développeur web, par jp0065

À propos de Jean-Pierre MAZEL

...
Cette entrée a été publiée dans Automatisme-programmation, Développeur Web, avec comme mot(s)-clef(s) , , , , , , , . Vous pouvez la mettre en favoris avec ce permalien.