Dans cette formation en ligne et en vidéo, nous allons apprendre à cloner le célèbre site de streaming Twitch avec React.
Ce genre de projet pratique est vraiment formateur et permet de passer au niveau supérieur lorsqu'on étudie un Framework JavaScript.
Cet atelier React va vous donner confiance. C'est également un bon exemple à mettre sur son portfolio.
Au programme de ce tuto cloner Twitch avec React
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éniale de Twitch,
- Utiliser Axios,
- Utiliser des affichages conditionnels (opérateur ternaire, short-circuit),
- Et pleins de choses encore !
Je reste disponible dans le salon d'entraide de ce cours pour répondre à vos éventuelles questions.
Alors rejoignez ce cours et apprenez à cloner Twitch avec React !
Table des matières de cette formation React (durée : 3h51m)
-
Introduction
- Introduction, découverte du projet gratuit 00:03:51
- Fichiers sources et éditeur 00:02:15
-
Création de notre projet
- Plan du cours gratuit 00:01:02
- Création du dossier gratuit 00:03:06
- Création du contenu du Header 00:09:19
- Partie CSS du header 00:08:18
- Création de la Sidebar 00:01:47
- Partie CSS de la Sidebar 00:03:12
- Mettre en place son projet avec Twitch 00:03:59
- Premier appel à l'API, explication 00:07:00
- Création des cartes de la page d'Accueil gratuit 00:07:59
- Partie CSS des cartes de la page d'accueil 00:13:24
- Explication du triple appel 00:03:24
- Partie JS de la sidebar 00:17:11
- Contenu sidebar 00:02:38
- Partie CSS du contenu de la sidebar 00:06:08
- Début de navigation et TopStreams 00:06:32
- Logique JS, appel TopStreams 00:08:49
- CSS TopStreams 00:06:19
- Liens du Header 00:03:15
- Mise en place du composant Live 00:04:36
- Utiliser le Slug 00:04:13
- Contenu du Live 00:07:58
- CSS Du live 00:10:28
- Mise en place du composant GameStreams 00:04:43
- Appel de l'API pour GameStreams 00:14:29
- Contenu de GameStreams 00:06:12
- CSS de GameStreams 00:05:48
- Menu responsive en React ! 00:12:24
- Finir les détails du menu responsive 00:05:59
- Mise en place du composant Resultat 00:11:27
- Gérer les erreurs de recherche 00:07:16
- Gérer les liens de la Sidebar 00:01:37
- Mise en place de la dernière fonctionnalité 00:08:30
- Résolution de l'erreur 401 de l'API Twitch 00:06:04
- Fichiers sourcestélécharger
- Certificat
Formateur : Enzo Ustariz
Avis des clients
Questions sur le tuto
-
Avec quelle version de logiciel ce tuto est-il compatible ?React
-
Quel est le niveau requis pour suivre ce tuto ?intermédiaire
