Cloner Twitch avec React
Améliorez vous avec React !
Bonjour à tous.
Dans cette formation nous allons cloner le célèbre site de streaming Twitch avec React.
Ce genre de projets est vraiment formateur et permet de passer au niveau supérieur lorsqu'on étudie un Framework JavaScript.
Ce projet va vous donner confiance, et c'est également un bon exemple à mettre sur son portfolio.
Dans cette formation nous allons utiliser des paradigmes et des outils autour de l'univers de React, notamment :
- Les React Hooks, c'est la dernière façon de coder en React (useState, useEffect, etc...)
- React-router, pour simuler une navigation, ainsi que les Hooks inclus dans React-router.
- Faire du responsive avec React, en créant notamment une barre de navigation responsive.
- Utiliser une API avec React.
- Découvrir l'API génial de Twitch.
- Utiliser Axios
- Utiliser des affichages conditionnels (opérateur ternaire, short-circuit)
- Et pleins de choses encore !
Alors rejoins le wagon et apprends à cloner Twitch avec React !
Votre instructeur
Développeur web, créateur et entrepreneur.
Cette École est née comme une réponse au manque de contenu Français concernant le Développement Web.
L'écosystème Front-End/Back-End/Full-Stack est devenu une vraie pieuvre tentaculaire et on se retrouve très rapidement submergé de tonnes de Frameworks, librairies et autres langages à devoir maîtriser si l'on veut rester compétitif et à jour.
Ce site a pour vocation de réunir des ressources et de t'apprendre tout ces concepts rapidement et efficacement, afin de te permettre de plonger au plus vite dans le monde professionnel et ce dans les meilleures conditions.
Curriculum du cours
-
VoirPlan du cours (1:01)
-
VoirCréation du dossier (3:05)
-
VoirCréation du contenu du Header (9:18)
-
VoirPartie CSS du header (8:17)
-
VoirCréation de la Sidebar (1:47)
-
VoirPartie CSS de la Sidebar (3:12)
-
VoirMettre en place son projet avec Twitch (3:58)
-
VoirNouvelle API, résolution du bug 401 (6:04)
-
VoirPremier appel à l'API, explication (6:59)
-
VoirCréation des cartes de la page d'Accueil (7:59)
-
VoirPartie CSS des cartes de la page d'accueil (13:24)
-
VoirExplication du triple appel (3:23)
-
VoirPartie JS de la sidebar (17:11)
-
VoirContenu de la sidebar (2:37)
-
VoirPartie CSS du contenu de la sidebar (6:08)
-
VoirDébut de navigation et TopStreams (6:31)
-
VoirLogique JS, appel TopStreams (8:49)
-
VoirCSS TopStreams (6:19)
-
VoirLiens du Header (3:15)
-
VoirMise en place du composant Live (4:35)
-
VoirUtiliser le Slug (4:12)
-
VoirContenu du Live (7:57)
-
VoirCSS Du live (10:28)
-
VoirMise en place du composant GameStreams (4:42)
-
VoirAppel de l'API pour GameStreams (14:29)
-
VoirContenu de GameStreams (6:11)
-
VoirCSS de GameStreams (5:47)
-
VoirMenu responsive en React ! (12:23)
-
VoirFinir les détails du menu responsive (5:58)
-
VoirMise en place du composant Resultat (11:27)
-
VoirGérer les erreurs de recherche (7:16)
-
VoirGérer les liens de la Sidebar (1:36)
-
VoirMise en place de la dernière fonctionnalité (8:30)