Boostez votre niveau en React
10 projets avec React
S'entraîner, c'est la clé pour maîtriser une technologie.
Je vous propose 10 projets-exercices React pour vous mettre à l'épreuve et améliorer vos compétences.
Vous avez accès à tout le code source.
Vous pouvez tenter de résoudre chaque projet de votre côté en premier, puis suivre la correction avec moi.
Voici la liste des projets :
- Coder un slider de A à Z
- Une app météo avec React
- Un projet "GeoData" - Affichage de données géographiques.
- Coder un éditeur de code sur navigateur
- Projet Pomodoro
- Coder un créateur de dégradés linéaires
- Créer un lecteur audio
- Mettre en place un scroll infini
- Coder un système de panier e-commerce
- Une application de prise de notes
Quels sont les prérequis ?
Il faut maîtriser JavaScript, avoir déjà utilisé des fonctions callback, du JavaScript moderne, bien comprendre le destructuring, let & const, la portée, etc ...Il faut également avoir des connaissances basiques en HTML CSS. Enfin, je vous conseille d'avoir d'abord suivi le cours "React de A à Z".
Besoin d'aide ?
Rejoignez la communauté sur Discord, ou suivez les tutoriels de l'École du Web sur Youtube.
Contenu du Cours
- Mise en place de base (5:46)
- Coder la sidebar et le visualisateur de code (6:26)
- Mise en place de Redux (16:56)
- Affichage des boutons et création des onglets (9:16)
- Ajout de la fonctionnalité de changement de code (4:47)
- Création du composant de prévisualisation (5:58)
- Gérer l'affichage de la prévisualisation (12:59)
- Mise en place (7:12)
- Coder les composants (7:46)
- Mise en place du store Redux (2:57)
- Mise en place du state initial et ajout des valeurs (4:34)
- Fonction utilitaire de formattage de données (6:14)
- Mettre à jour les valeurs de session et de pause (9:08)
- Utiliser une fonction Thunk interceptée et exécutée par un middleware. (15:03)
- Gérer le "tick" et le reset complet (10:31)
- Introduction du projet (9:35)
- Mise en place Redux (5:06)
- Gérer les inputs de couleur (7:21)
- Ajouter des couleurs (6:28)
- Afficher le dégradé (8:34)
- Gérer l'angle global du dégradé (3:44)
- Sélectionner une couleur et changer sa position (12:01)
- Créer la modale (8:51)
- Gérer le "copy to clipboard" (7:40)
- Introduction et mise en place redux (22:33)
- Mise en place de l'audio et du player (4:35)
- Créer un panneau de fonctionnalités audio (9:44)
- Finir le panneau (8:24)
- Ajouter la fonctionnalité de play/pause (4:31)
- Gérer l'avancement de la musique (7:34)
- Ajouter la fonctionnalité de clic sur la barre de progression (9:55)
- Coder la fonctionnalité de changement de musique (9:54)
Cliquez sur les questions
Foire aux questions.
Oui, il vous suffit de cliquer sur votre profil > gérer les abonnements > annuler l'abonnement.
Il vous suffit de rejoindre le serveur Discord dans lequel vous pouvez discuter développement web, demander de l'aide ou encore participer à des concours ou des exercices.
Le Parcours Front-End est une feuille de route vous permettant de suivre les cours qui feront de vous un développeur Front-End dans l'ordre.
Il est très important de pratiquer quand on apprend de nouvelles compétences, c'est pourquoi j'ai une page spécialement remplie de dizaines de cours et de projets pratiques!
Rejoignez des milliers d'étudiants