React.js Training Certification - eLearning

eLearning sur React.js

Aperçu du programme :

Ce cours de React.js est conçu pour les débutants qui souhaitent acquérir une solide base dans le développement d'applications web modernes en utilisant React.js, l'une des bibliothèques JavaScript les plus populaires. Ce cours fournit aux apprenants les compétences et les connaissances fondamentales nécessaires pour créer des interfaces utilisateur dynamiques, interactives et réactives de manière efficace.

Fonctionnalités du programme :

• Le cours et le matériel sont en anglais
• Niveau débutant - intermédiaire pour les aspirants ingénieurs logiciels
• Accès d'un an à la plateforme d'apprentissage en ligne à votre rythme 24/7
• 14 heures de contenu vidéo
• 50 heures de temps d'étude recommandé
• Laboratoire virtuel MEAN Stack inclus
• 2 cours de projet final
• Pas d'examen pour le cours, mais l'étudiant recevra un certificat de fin de formation.

Résultats d'apprentissage clés :

• Savoir comment construire des applications monopages incroyables avec React et Redux
• Apprenez et appliquez les concepts fondamentaux derrière la structuration des applications Redux.
• Réaliser et apprécier la puissance de la construction de composants composables.
• Comprendre et utiliser NPM, Babel et la syntaxe JavaScript ES6.

Public cible :

Ce cours de certification React.js est conçu pour les développeurs web qui conçoivent et construisent des solutions UI/UX pour les applications mobiles et web et qui souhaitent concevoir avec React de manière aussi efficace que possible en utilisant une bibliothèque JavaScript.

• Développeurs web
• Concepteurs web
• Développeur full-stack
• Développeur mobile

Prérequis :

Pour ce cours, vous devez avoir de l'expérience dans la création d'applications web front-end avec HTML, CSS et JavaScript.

Contenu du cours

Introduction au cours

• Qu'est-ce que React ?
• Configuration de l'environnement

Démarrer (GitHub Finder) et configurer React

• Introduction au projet
• Créer une application React et visualiser la structure des fichiers
• Créer une application React (CRA) Nettoyage et préparation
• Introduction à l'extension de syntaxe JavaScript (JSX) et aux fragments
• Expressions et conditionnels en JSX

Composants États et Props

• Listes et passage d'un état avec des props
• Composants Fonctionnels Sans État
• Gestion des requêtes HTTP et mise à jour des états
• Composant Spinner et refactorisation
• Variables d'environnement

Passage d'événements et de props React Router et plus

• Événements et composants de recherche
• Passer les props vers le haut et rechercher des utilisateurs
• Effacer les utilisateurs de votre état
• Configuration de l'état et du composant d'alerte
• Configuration d'un routeur React
• Ajouter un seul composant utilisateur et des données
• Création d'un composant utilisateur Interface utilisateur et mise en page
• Repos et le composant Repoitem
• Refactorisation des Hooks et de l'API contextuelle

Aperçu des hooks et de l'API context

• Utiliser une classe Search pour fonctionner avec le hook useState
• Utiliser une classe User pour fonctionner avec le hook useEffect
• Composant fonctionnel de classe App
• Implémentation de l'API context et utilisation du Reducer
• Créer des réducteurs
• Déplacer l'état de l'utilisateur vers l'API de contexte
• Déplacer l'état des dépôts vers l'API de contexte
• Création du flux de travail du contexte d'alerte
• Création des composants home et NotFound
• Préparation et déploiement sur Netlify

Mongo DB express React et Node (MERN)

• Configuration de MongoDB Atlas
• Création des dépendances et d'un serveur express de base
• Configuration des routes Backend
• Connexion de MongoDB à l'application

Contacts utilisateur backend et authentification par jeton web JSON

• Modèle d'utilisateur et validation
• Hachage des mots de passe et enregistrement des routes
• Créer et répondre avec un jeton web JSON
• Création d'une route d'authentification
• Middleware d'authentification et protection des routes
• Créer un modèle de contact et obtenir la route des contacts
• Ajout d'une route de contact
• mise à jour des contacts et suppression des itinéraires

Configurer votre client et vos contacts IHM

• Configuration de React et de Concurrently
• Configuration du nettoyage, de la barre de navigation et d'un routeur
• Création des contacts, du Context et d'un état global
• Création des composants contacts et contactitem
• Supprimer un contact de l'interface utilisateur
• Définir et effacer les contacts actuels
• Ajouter des actions pour éditer et mettre à jour les contacts
• Créer un formulaire de filtre de contacts et un état
• Créer une animation de base pour ajouter et supprimer

Authentification React ou Express

• Création du contexte d'authentification et de l'état initial
• Création des formulaires d'inscription et de connexion
• Création du contexte d'alerte, des états et des composants
• Création d'un formulaire d'inscription utilisateur
• Chargement d'un utilisateur et définition d'un jeton
• Création de la connexion utilisateur
• Création des composants de déconnexion et de la barre de navigation
• Création du composant PrivateRoute

Intégration et déploiement de l'API Contacts

• Ajouter des contacts à la base de données
• Obtenir et effacer les contacts
• Supprimer des contacts
• Mise à jour des contacts
• Préparation et déploiement sur Heroku

Démarrer les composants et l'interface utilisateur d'IT Logger (Redux)

• Configuration de React et du JSON
• Configuration de Materialize CSS
• Création des composants SearchBar et Logs
• Création des composants Logitem et Preloader
• Création des composants AddBtn et AddLogModal
• Ajout des composants edit et Tech Modal

Gestion de l'état Redux

• Configuration du magasin Redux et du fournisseur
• Configuration du réducteur de journaux, des actions et des types
• Connecter Redux à un composant
• Ajout, Suppression, Mise à jour, Recherche de journaux

État des techniciens et ses composants

• Réducteur de techniciens, actions et composants
• Utilisation du composant select
• Ajouter des techniciens
• Suppression des techniciens

Projet de Fin de Cours :

• Créer une application de recherche d'événements en React

Construisez une application React où les utilisateurs peuvent consulter et promouvoir les événements à venir, configurez un serveur JSON pour les tests jusqu'à ce que les API backend soient prêtes, et enfin gérez l'état en utilisant Redux.

• Application de recherche de Pokémon

Dans le monde des Pokémon, où l'utilisateur doit pouvoir rechercher différents Pokémon, vous devez créer une application pour les rechercher avec les fonctionnalités suivantes :

L'application Pokémon devrait avoir la liste des détails des Pokémon qui seront fournis sous forme de données JSON, c'est-à-dire qu'elle devrait inclure le nom, l'image, le CP, l'attaque, le type de défense, etc.
Il devrait y avoir une barre de recherche afin que l'utilisateur puisse rechercher les Pokémon en fonction du nom du Pokémon. Comme nous avons beaucoup de Pokémon, appliquez la pagination, afin que l'utilisateur ne puisse voir que 10 Pokémon à la fois.