Les bases de ReactJS #6/9 :: Manipuler des datas depuis un JSON
Les bases de ReactJS #6/9 :: Manipuler des datas depuis un JSON
Et c'est parti pour 10 projets avec React ! ⚛️
Au programme de cette formation Coder 10 projets avec React
Dans ce cours en vidéo, on va coder :
- Un slider de A à Z
- Un système de traduction avec React
- Un formulaire qui contient plusieurs étapes de validation
- Des animations avec React et la librairie React-Spring
- Une app "Pomodoro" avec un système de Chrono
- Un clone de Unsplash, la banque d'images en ligne, avec un scroll infini et un système de recherche.
- Un dashboard avec React et Chart-JS
- Une application avec un système d'authentification en utilisant Firebase
- Une app style E-Commerce avec un système de panier en utilisant Redux.
- Et pour terminer une App de prise de notes type Evernote !
Ça donne envie hein ?
Pour visualiser ce que ça donne tu peux regarder la vidéo d'introduction juste au-dessus.
On va utiliser des tas de technologies très utiles, comme Redux, l'API de contexte, React-Router, ChartJS, React-Spring etc. Redux est un "state manager", c'est un outil qui nous permet de gérer les données à travers toute une application, sans avoir forcement besoin de passer des données via des props.
React-router de son côté, va nous permettre de créer un système de navigation avec une application web crée par React.
Pré-requis pour suivre ces ateliers React
Avant de suivre ce cours, veuillez faire attention à avoir de bonnes connaissances de base de JavaScript.
Vous devez savoir maitriser :
- Les tableaux,
- Les objets,
- Le DOM,
- Les fonctions,
- Le JS moderne (fonction fléchée, destructuring, spread ...),
- etc ...
Je propose une formation Javascript complète pour maîtriser ces compétences.
Tous les fichiers de travail sont fournis !
Un QCM vous sera proposé en fin de formation et vous permettra de valider les connaissances théoriques acquises pendant la formation.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.
Si c'est ok pour vous, rendez-vous de l'autre côté pour commencer à coder ! ✌️
Qu’allez-vous apprendre dans ce cours ?
Plan de cours
Chapitre 1
Introduction
Introduction
Chapitre 2
1.Coder un Slider avec React
1.Coder un Slider avec React
Chapitre 3
2.App météo avec React
2.App météo avec React
Chapitre 4
3. Projet "Geodata"
3. Projet "Geodata"
Chapitre 5
4.Coder un éditeur de code sur navigateur
4.Coder un éditeur de code sur navigateur
Chapitre 6
5. Coder un Pomodoro avec React
5. Coder un Pomodoro avec React
Chapitre 7
6. Application de dégradés linéaires
6. Application de dégradés linéaires
Plan détaillé du cours
Chapitre 1 : Introduction
09m20
Leçon 1Introduction
Leçon 2Code source et conseils
Chapitre 2 : 1.Coder un Slider avec React
32m10
Leçon 1Mise en place et JSX
Leçon 2Codage du CSS
Leçon 3Coder la partie logique
Chapitre 3 : 2.App météo avec React
37m39
Leçon 1Mise en place
Leçon 2Ajout du CSS
Leçon 3Créer la partie logique
Leçon 4Gérer les erreurs possible
Chapitre 4 : 3. Projet "Geodata"
34m53
Leçon 1Introduction et appel de l'API
Leçon 2Afficher les cartes
Leçon 3Créer la modale et afficher les données
Chapitre 5 : 4.Coder un éditeur de code sur navigateur
1h02
Leçon 1Mise en place de base
Leçon 2Coder la sidebar et le visualisateur de code
Leçon 3Mise en place de Redux
Leçon 4Affichage des boutons et création des onglets
Leçon 5Ajout de la fonctionnalité de changement de code
Leçon 6Création du composant de prévisualisation
Leçon 7Gérer l'affichage de la prévisualisation
Chapitre 6 : 5. Coder un Pomodoro avec React
1h03
Leçon 1Mise en place
Leçon 2Coder les composants
Leçon 3Mise en place du store Redux
Leçon 4Mise en place du state initial et ajout des valeurs
Leçon 5Fonction utilitaire de formattage de données
Leçon 6Mettre à jour les valeurs de session et de pause
Leçon 7Utiliser une fonction Thunk interceptée et exécutée par un middleware.
Leçon 8Gérer le "tick" et le reset complet
Chapitre 7 : 6. Application de dégradés linéaires
1h09
Leçon 1Introduction du projet
Leçon 2Mise en place Redux
Leçon 3Gérer les inputs de couleur
Leçon 4Ajouter des couleurs
Leçon 5Afficher le dégradé
Leçon 6Gérer l'angle global du dégradé
Leçon 7Sélectionner une couleur et changer sa position
Leçon 8Créer la modale
Leçon 9Gérer le "copy to clipboard"
Chapitre 8 : 7. Coder un Player Audio
1h17
Leçon 1Introduction et mise en place redux
Leçon 2Mise en place de l'audio et du player
Leçon 3Créer un panneau de fonctionnalités audio
Leçon 4Finir le panneau
Leçon 5Ajouter la fonctionnalité de play/pause
Leçon 6Gérer l'avancement de la musique
Leçon 7Ajouter la fonctionnalité de clic sur la barre de progression
Leçon 8Coder la fonctionnalité de changement de musique
Chapitre 9 : 8. Créer un système de scroll infini
49m25
Leçon 1Intro et mise en place
Leçon 2Création du Hook personnalisé
Leçon 3Affichage des photos et du loader
Leçon 4Gérer l'"intersection observer"
Leçon 5Gérer la recherche
Leçon 6Gérer les erreurs possibles
Chapitre 10 : 9. E-commerce
49m35
Leçon 1Mise en place et affichage des données
Leçon 2Gérer le pannier
Leçon 3Créer la modale
Leçon 4Afficher le contenu du panier
Leçon 5Gérer l'élement "select"
Chapitre 11 : 10. Application prise de notes
1h10
Leçon 1Introduction et mise en place Redux
Leçon 2Affichage des notes
Leçon 3Création de la sidebar
Leçon 4Création des "sidenotes"
Leçon 5Mise en place du routeur
Leçon 6Afficher une note
Leçon 7Création du composant "edit"
Leçon 8Ajouter une note + validation
Leçon 9Éditer et supprimer une note
Avis des apprenants