Pour mettre en application ce que j’ai appris avec React.js Node.js Express et MySQL, je vais créer un réseau social privé , le front-end et le backend.

Dans ces vidéos on va voir toutes les étapes que j’ai franchies et tous les problèmes que j’ai rencontré et il y en a beaucoup : boucle infini avec useEffect, props drilling, lifting state up…toutes les erreurs que peut faire un débutant je les ai faites.

Actuellement j’ai fait l’interface de connexion et création de compte, la page du feed sur laquelle on peut poster des messages et sous ces message on peut y mettre des commentaires. On peut liker les messages (les posts), on peut mettre une vidéo YouTube ou une photo par le biais d’une url. On peut supprimer ses messages, ses commentaires et on peut les modifier.  Il y a un compte modérateur qui peut supprimer n’importe quel message et n’importe quel commentaire.

Pour le backend : pour la web API REST, j’utilise Express , l’authentification avec jsonwebtoken, le hachage du mot de passe avec bcrypt, l’utilisation de crypto-js pour chiffrer l’email, l’utilisation de multer pour gérer l’image de photo de profil de la fiche utilisateur, dotenv pour gérer les variables d’environnement, mysql pour me connecter à la base de données MySQL (Serveur MariaDB et phpMyAdmin pour configurer la base de données) et j’utilise d’autre package npm qui sont : password-validator, validator, helmet, morgan, nodemon

Pour le frontend : J’utilise React17  et les hooks ( le passage à React18 se fera à la vidéo JavaScript580) , react-dom, react-router-dom v6, dateformat, linkify-react, linkifyjs, @mui/icons-material. Pour le css j’utilise le CSS module.

Au cours de ces vidéos l’application va avoir plusieurs refactoring : passage des requêtes HTTP a un custom hook http (à partir de JavaScript533) , l’utilisation du hook useReducer, le passage a redux toolkit et react-redux (à partir de JavaScript568).

Dans ces différentes vidéos je vais utiliser les hooks : useState, useEffect, useContext, useCallback, useRef, useMemo, useReducer

Les customs hooks (react-router-dom , react-redux): useParams, useNavigate, useSelector, useDispatch

Les vidéos du Projet Réseau Social Privé avec React.js Node.js Express et MySQL : 

L’Authentification Front et Back avec JSON webToken

JavaScript343-React.js-Installation projet react vierge avec create-react-app pour créer une authentification

JavaScript343bis-React.js-Passer de REACT 18 à REACT 17 facilement pour faire fonctionner l’application correctement

JavaScript344-React.js-Création structure HTML de base du formulaire pour se connecter à la web API

JavaScript345-React.js-Ajout du CSS avec CSS module au formulaire pour se connecter

JavaScript346-React.js-Comment avoir 1rem = 10px avec un navigateur réglé à 16px

JavaScript347-React.js-props.children pour créer un composant bouton réutilisable

JavaScript348-React.js-Le hook useRef( ) pour récupérer les données du formulaire

JavaScript349-React.js-Le contrôle de la validité de l’email et que les inputs ne sont pas vides

JavaScript350-React.js-Création d’une fenêtre modale-ErrorModal

JavaScript351-React.js-La création d’une card-composant wrapper

JavaScript352-React.js-Gérer la modale ErrorModal avec un state une condition et lifting state up

JavaScript353-React.js-Création structure HTML de base du formulaire pour se connecter à la web API

JavaScript354-React.js-Wrapper des éléments JSX avec Fragment -le shortcut ou un composant Wrapper

JavaScript355-React.js-Utlisation de createPortal( ) de ReactDOM pour afficher la modale

JavaScript356-React.jss-Utlisation de createPortal de ReactDOM pour afficher le backdrop sur une div

JavaScript357-React.js-Représentation graphique des composants de l’application avec diagrams.net

JavaScript358-React.jss-La récupération de l’userId et du token d’authentification avec fetch et then

JavaScript359-React.js-La récupération de l’userId et du token d’auth avec async await try et catch

JavaScript360-React.js-Affichage de l’erreur d’une mauvaise authentification dans la fenêtre modale

JavaScript361-React.js-Affichage d’un message “en cours de chargement” pendant l’exécution de fetch

JavaScript362-React.js-Faire disparaitre le bouton se connecter pendant la requête fetch( )

JavaScript363-React.js-Création d’un composant loader pour indiquer à l’utilisateur que ça charge

JavaScript364-React.js-Création du formulaire -Créer un compte-sign up-dans AuthForm.js

JavaScript365-React.js-Mise en place de la route sign up dans le formulaire pour créer un compte

JavaScript366-React.js-Prise en compte par la modale ErrorModal que le compte mail est déjà utilisé

JavaScript367-React.js-Don’t Repeat Yourself-URI commune et 2 endpoints différents

JavaScript368-React.js-Transmettre donnée de l’authentification avec Context vers autres composants

JavaScript369-React.js-Création du composant de Test pour observer le fonctionnement de Context

JavaScript370-React.js-Création du Context et utilisation pour afficher le token dans Test.js

JavaScript371-React.js-Utilisation du Context pour afficher l’userId dans le composant Test.js

JavaScript372-React.js-Afficher ou faire disparaitre des composants lorsque on est authentifié

JavaScript373-React.js-Utilisation du Context et du bouton se déconnecter pour revenir au formulaire

JavaScript374-React.js-Ne pas perdre l’authentification après un rechargement de la page-localStorage

JavaScript375-React.js-Ne pas perdre l’userId après un rechargement de la page-localStorage

JavaScript376-React.js-Correction du bug du bouton OK de ErrorModal-renommage de props

JavaScript377-React.js-Failed to execute ‘fetch’ on ‘Window’: Request with GET/HEAD method cannot have body

JavaScript378-React.js-Node.js-Modification du middleware authentification pour que ça fonctionne avec fetch

JavaScript379-React.js-Node.js-Modification controller readOneFicheUser pour afficher une fiche avec userId

JavaScript380-React.js-Accés à la route protégée avec fetch, le token et l’userId et bonne ressource

JavaScript381-React.js-Node.js-L’authentification par TOKEN et userId avec React.js et Node.js-BILAN

Utilisation de React Router Dom 6 pour les routes et les liens cliquables

JavaScript382-React.js-Créations de pages Home.js FicheUser.js et composants MainHeader.js

JavaScript383-React.js-React Router Dom-Découverte de la documentation officielle de React Router

JavaScript384-React.js-React Router Dom-Installation de react-router-dom version 6

JavaScript385-React.js-React Router Dom-Connecter l’application React à l’URL du navigateur avec BrowserRouter

JavaScript386-React.js-React Router Dom-Ajouter un lien dans la barre d’URL lorsque l’on dessus avec Link

JavaScript387-React.js-React Router Dom-La création des routes avec Routes-Route-path-element

JavaScript388-React.js-React Router Dom-Utilisation de NavLink pour visualiser le lien actif dans le menu

JavaScript389-React.js-React Router Dom-Lorsque la route n’existe pas la route No Match dans react-router-dom

JavaScript390-React.js-React Router Dom-Le hook useNavigate pour changer de page automatiquement après une condition

JavaScript391-React.js-React Router Dom-Modification de l’interface utilisateur lorsque l’utilisateur est authentifié

JavaScript392-React.js-React Router Dom-Afficher les données fiche utilisateur et la photo-useEffect-requête GET

LA SUITE BIENTÔT