Devenir un PRO du React

199 €

Devenir un PRO du React

Fermé

Tous les outils clé en main pour trouver son premier job en tant que développeur React JS (freelance ou salarié)

👨‍💻 Formateur : Vincent

Acheter maintenant

Un parcours unique pour faire décoller ta carrière 🚀

Nous avons concentré toutes les connaissances qu'il faut absolument maîtriser pour devenir un développeur React d'exception. En suivant cette formation, tu auras toutes les clés en main pour trouver un job en tant que développeur React, que ce soit dans une entreprise en tant que free-lance.

Avec un salaire moyen de presque 42 000 EUROS / an, ta nouvelle casquette de développeur React va considérablement te rapprocher de ton rêve de liberté. Et tu peux me croire : te lever le matin pour aller au travail ne sera plus jamais une corvée !

COMMANDER LA FORMATION

Ce que tu vas apprendre

React Network : ton premier réseau social en React !

Les concepts clés et détaillés du framework React
Les fonctionnalités principales de la majeure partie des apps
Un projet pour t'accompagner tout au long de ton apprentissage

Dans cette formation

Un format qui a fait ses preuves :

🎬 Plus de 11 heures de vidéo
📄 Document PDF de 200 pages + codes sources
👨‍💻 Partie théorique pour comprendre en profondeur
✅ Accès 24h /24 et 7j /7

Prérequis :

💻 Les bases du JavaScript (incluses dans la formation Apprenti Développeur Web)
🚀 De la motivation, et rien d'autre

BONUS : Accès au Slack des Développeurs Libres

FAQ

Comment accéder à ma formation ?

Une fois la formation commandée, tu recevras un mail de confirmation et tu seras directement redirigé.e vers ton espace personnel. Sur cet espace, tu auras accès à toutes tes formations.
Elles sont disponibles 24h sur 24, 7 jours sur 7. Il te suffit d'une connexion internet. Les vidéos ne peuvent pas être téléchargées. Seul les fichiers PDF peuvent être enregistrées sur ton ordinateur.

Faut-il savoir coder avant de commencer cette formation ?

Il est préférable d'avoir quelques connaissances en développement web. Des notions de HTML, CSS voire JavaScript seront très utiles pour suivre cette formation. Mais il est tout à fait possible d'apprendre ces trois langages en parallèle de cette formation.

Pourrais-je devenir développeur avec cette formation ?

Oui ! Cette formation est conçue pour apporter toutes les bases nécessaires à quelqu'un sui souhaite se lancer en tant que développeur React en freelance ou dans une entreprise. Bien sur, cela ne se fera pas en un claquement de doigts, cela nécessitera beaucoup de travail et de rigueur, mais ça, c'est à vous de les trouver, tout le reste : c'est dans la formation ! 😉

Contenu

Introduction

10 min
346 Mo

Aperçu

Rejoins le groupe Slack

Devenir un Pro du React.pdf

7,26 Mo

React.js : c'est quoi ? et pourquoi ?

Objectifs : Comprendre ce qu'est réellement la librairie React.JS, et pourquoi l'utiliser.

Qu'est-ce que React.js et pourquoi l'utiliser ?

10 min
18,5 Mo

Aperçu

📄 Version PDF

40,7 ko

Aperçu

Avant de commencer...

Objectifs : La syntaxe JavaScript moderne est un pré-requis impératif avant d'aller plus loin dans la formation.

Pré-requis : Le "JavaScript moderne"

4 min
5,99 Mo

Aperçu

Les bons outils

5 min
7,12 Mo

Aperçu

Mise en place de l'environnement de développement

5 min
14,3 Mo

Aperçu

📄 Version PDF

321 ko

Aperçu

Création du squelette de notre application React

Objectif : C'est parti, nous allons tout de suite créer notre projet React.js !

Comprendre

6 min
17,8 Mo

Aperçu

Appliquer

4 min
10,9 Mo

Aperçu

📄 Version PDF

46,3 ko

Aperçu

La structure de fichiers d'un projet React

Objectifs : Comprendre à quoi servent les fichiers et les dossiers créés.

Comprendre

9 min
44,2 Mo

Aperçu

📄 Version PDF

91,4 ko

Aperçu

Nettoyage du projet pour partir de zéro

Objectifs : Partir d'un projet vierge pour comprendre la structure d'un projet React.

Appliquer

8 min
53,2 Mo

📄 Version PDF

563 ko

Analyse du code react

Objectifs : comprendre dans les moindres détails le contenu d'un projet React

Comprendre

7 min
28,2 Mo

Evaluer

Correction

📄 Version PDF

95,3 ko

JSX (Javascript Syntax eXtension)

Objectifs : Maîtriser l'utilisation de la syntaxe JSX.

Comprendre

8 min
25,8 Mo

Appliquer

13 min
52,8 Mo

Evaluer

Correction

📄 Version PDF

87,3 ko

Créer notre premier composant

Objectifs : comprendre le développement par composants.

Comprendre

6 min
17,1 Mo

Appliquer

9 min
25 Mo

Evaluer

📄 Version PDF

961 ko

Les props

Objectifs : Rendre nos composants génériques avec les props

Comprendre

4 min
10,6 Mo

Appliquer

3 min
12,5 Mo

Evaluer

Correction

📄 Version PDF

280 ko

Aide-nous à améliorer cette formation 💡

Ton avis est précieux

Les props sous toutes les coutures

Objectifs : Savoir utiliser les props en toute situation.

Appliquer

31 min
102 Mo

Evaluer

📄 Version PDF

60 ko

Les props - attributs vs enfants

Objectifs : Dans ce chapitre, nous allons voir comment passer des enfants à notre composant, toujours avec le mécanisme des props.

Comprendre

3 min
5,42 Mo

Appliquer

12 min
44,9 Mo

Evaluer

📄 Version PDF

298 ko

React Dev Tools

Objectifs : Premier aperçu des React Dev Tools qui permettent de visualiser l'arbre de nos composants React et d'interagir avec les props.

Appliquer

6 min
38,7 Mo

📄 Version PDF

104 ko

Générer une liste de composants

Objectifs : Nous affichons pour le moment 3 posts en faisant référence aux données "en dur", avec des indices numérotés.

Nous allons maintenant voir comment boucler sur nos données de manière générique, et en utilisant les pratiques recommandées en React.

Comprendre

8 min
16,3 Mo

Appliquer

12 min
49,5 Mo

Evaluer

📄 Version PDF

106 ko

Les événements

Objectifs : Dans ce chapitre, nous allons voir comment interagir avec notre application React.JS via des événements.

Comprendre

2 min
2,18 Mo

Appliquer

15 min
73,2 Mo

📄 Version PDF

55,7 ko

Le state et le hook useState

Objectifs : La notion de state (état) est le concept central de React.

Nous ne l'avons pas vu jusqu'ici car notre page est statique, sans la moindre interaction.

Cela va à présent changer, nous allons implémenter des interactions, et toute interaction dans React repose sur la notion de state.

React utilise une logique de programmation déclarative.

Ce type de programmation utilise souvent une notion d'état (c'est le cas de React).

Voyons en quoi consiste la programmation déclarative, et en quoi cela introduit naturellement le concept de state (état) qui va nous aider à créer des applications d'une manière très simple et élégante..

Comprendre

11 min
28,5 Mo

Appliquer

17 min
75,7 Mo

Evaluer

📄 Version PDF

137 ko

Supprimer un post (depuis le composant de plus haut niveau)

Objectifs : Actualiser l'affichage lorsqu'on supprime un post.

Appliquer

7 min
37,3 Mo

📄 Version PDF

51,1 ko

Modifier le state depuis un composant enfant

Objectifs : Apprendre comment un composant A peut modifier le state d'un composant B (B étant le parent de A).

Comprendre

11 min
27,6 Mo

Appliquer

3 min
14,4 Mo

Evaluer

📄 Version PDF

66,1 ko

Le "props drilling" et le flux d'information

Objectifs : Comprendre le flux des données échangées entre les différents composants d'une application React.

Comprendre

4 min
11,8 Mo

Appliquer

19 min
89,9 Mo

📄 Version PDF

55,3 ko

Implémenter un "empty state"

Objectifs : Comprendre l'opérateur ternaire.

Comprendre

4 min
9,55 Mo

Appliquer

12 min
50,6 Mo

📄 Version PDF

1,01 Mo

Ajouter un post : Créer le composant

Objectifs : Savoir créer un composant vide qui va nous permettre de créer un nouveau post.

Evaluer

2 min
7,94 Mo

Correction

2 min
7,69 Mo

📄 Version PDF

401 ko

Ajouter un post : Champs contrôlés VS non contrôlés

Objectifs : Gérer le formulaire avec les inputs contrôlés et les inputs non contrôlés.

Comprendre

5 min
8,95 Mo

Appliquer

17 min
86,1 Mo

Evaluer

📄 Version PDF

141 ko

Ajouter un post : State Lifting

Objectifs : Nous allons voir comment faire lorsque le composant qui contient une donnée et un composant qui doit y accéder (via props) ne sont pas dans la même branche de l'arbre.

Comprendre

3 min
8,34 Mo

Appliquer

9 min
38,2 Mo

📄 Version PDF

249 ko

Ajouter un post : Finalisation

Objectifs : Nous allons réaliser deux petites améliorations à la création d'un post.

Appliquer

5 min
20,3 Mo

Evaluer

1 min
5,28 Mo

Correction

1 min
4,41 Mo

📄 Version PDF

42,5 ko

Le pattern &&

Objectifs : Réaliser trois petites améliorations à la création d'un post.

Comprendre

4 min
10 Mo

Appliquer

3 min
15,4 Mo

📄 Version PDF

48,9 ko

Posts avec images, photos de profils et heure du post

Objectifs : Le prochain chapitre sera consacré à la mise en place des styles CSS de notre application.

Avant de nous pencher sur les styles, ajoutons à notre applications les éléments qui manquent comparé au résultat final souhaité :

Pouvoir ajouter une image à un post
Afficher une photo de profil sur chaque utilisateur
Afficher l'heure à laquelle a été publié le post

Appliquer

24 min
142 Mo

📄 Version PDF

37,8 ko

Styler nos composants (CSS)

Objectifs : Nous allons enfin rendre notre application un peu plus jolie en y ajoutant des styles CSS.

Comprendre

4 min
9,44 Mo

Appliquer

29 min
146 Mo

Pour aller plus loin

60 min
347 Mo

📄 Version PDF

59,1 ko

Projet avec CSS

433 ko

Le hook useEffect

Objectifs : Dans ce chapitre, nous allons apprendre à utiliser le hook useEffect qui va permettre à nos composants de déclencher des effets de bords, nécessaires à l'exécution de morceaux de code ne répondant pas aux lois de la programmation déclarative.

Comprendre

9 min
20,9 Mo

Appliquer

25 min
142 Mo

Evaluer

📄 Version PDF

67 ko

Les composants basés sur des classes

Comprendre

6 min
11,9 Mo

Appliquer

20 min
127 Mo

📄 Version PDF

49,1 ko

Les hooks

Objectifs : Comprendre ce que sont les hooks et en quoi ils sont utiles.

Comprendre

6 min
11,7 Mo

📄 Version PDF

31,4 ko

Custom hooks

Objectifs : Créons 3 custom hooks pour étudier l'étendue des possibilités offertes par ce mécanisme.

Comprendre

5 min
12,8 Mo

Appliquer

33 min
173 Mo

📄 Version PDF

43,9 ko

Ajouter d'autres pages avec react router

Objectifs : Créer une application page ayant plusieurs pages avec react router.

Comprendre

5 min
12,4 Mo

Appliquer

29 min
151 Mo

📄 Version PDF

70,6 ko

Passage de paramètres dans une URL

Objectifs : Ce chapitre va nous permettre d'apprendre à passer des paramètres dans une URL.

Appliquer

4 min
14,9 Mo

📄 Version PDF

38 ko

Mise en place d'une layout commune entre les différentes pages

Objectifs : La mise en place d'une mise en page (layout) commune à nos différentes pages va nous permettre d'avoir une apparence uniforme sur toutes les pages de notre application.

Appliquer

19 min
96,2 Mo

Evaluer

📄 Version PDF

1,4 Mo

Global State Management (redux, Context API)

Objectifs : Comprendre comment éviter le state lifting et passer les props sur tous les niveaux intermédiaires.

Comprendre

9 min
16,2 Mo

Appliquer

35 min
195 Mo

📄 Version PDF

54 ko

Les hooks useMemo et useCallback

Objectifs :Expérimenter 2 hooks dont le comportement est similaire : useMemo et useCallback.

Appliquer

24 min
124 Mo

Pour aller plus loin

4 min
23,9 Mo

📄 Version PDF

66,4 ko

Récupérer des données backend depuis une API

Objectifs : Dans une application d'entreprise, notre frontend React va devoir récupérer des données depuis une API.

Voyons comment faire cela en appelant réellement une URL distante pour récupérer des données.

Appliquer

9 min
66 Mo

📄 Version PDF

41,1 ko

Déployer notre appli react en production

Objectifs : Nous allons enfin déployer notre application en live, elle sera disponible sur le web via une URL que nous pouvons partager avec n'importe qui !

Appliquer

6 min
36,6 Mo

Evaluer

📄 Version PDF

48,1 ko

Conclusion

7 min
393 Mo