React Native Pour Tous - L'Ultime Formation 2022 | 77 Heures

La formation en Français qui vous permet véritablement de maîtriser React Native (Formation PREMIUM Sans Promotions)

What you'll learn

Coder des applications "Mobile Native" avec du code JavaScript et la librairie React JS.

Développer des applications Mobiles "cross-platform" (iOS & Android) sans connaître ni Swift, ni ObjectiveC et ni Java, ni Kotlin! Uniquement JavaScript!

Maîtriser la librairie React Native et être en mesure d'intervenir sur les vrais projets en entreprise.

Apprendre React Native avec les Hooks de React JS.

Styliser les applications React Native et les rendre professionnelles.

Apprendre à gérer le state d'une application React Native via Redux.

Apprendre à installer et à utiliser les outils nécessaires pour coder les applications React Native et les tester sur un simulateur ou un appareil Android/iOS.

Découvrir les outils et les moyens permettant de débogguer une application React Native comme un véritable PRO!

Apprendre à travailler avec Expo-Cli pour vous faciliter le codage de vos applications. En effet, pourquoi réinventer la roue si quelqu'un l'a déjà créée ?

Apprendre à utiliser la mémoire intégrée dans les appareils iOS et Android pour y stocker des données.

Apprendre à effectuer des requêtes HTTP et le code asynchrone dans une application React Native.

Apprendre à intégrer Firebase dans une application React Native (Authentification utilisateur et base de données)

Créer des application avec React Native CLI (sans passer par Expo)

Combiner la facilité Expo avec React Native CLI grâce au Bare Workflow

Comment créer une application Expo et faire le Eject pour passer en mode BareWorkflow

Apprendre à gérer la navigation dans React Native (Menu en mode stack, menu latéral, et onglets) et bien plus encore..

Apprendre à gérer l'interface adaptative de vos applications afin de les adapter aux différentes tailles d'écrans.

Générer le build d'une app Expo via EAS Build et la tester sur le simulateurs iOS et l'émulateur Android.

Accès gratuit à une formation React avec les Hooks pour mieux maîtriser cette librairie sur laquelle est basé React Native.

Apprendre à coder des applications mobiles avec React Hooks

Maîtriser la création de composants partageables et stylisés en Flexbox

Apprendre à gérer le state d'une application React native via Redux

Apprendre à travailler avec firebase dans une application React Native

Réalisation de plusieurs exercices simples et accessibles à tous les niveaux.

Maîtriser React Native, React JS, Redux, FlexBox das une seule formation et bien plus encore !

Maîtriser React Router versions 5 et 6 !

Requirements

Connaissances de bases en Javascript (ES6)

Connaissances de bases en React JS (En cas de besoin, vous trouverez plusieurs vidéos sur les concepts de REACT + HOOKS à la fin de cette formation)

Connaissances de bases en CSS FlexBox (En cas de besoin, vous trouverez plusieurs vidéos sur les concepts du CSS FlexBox à la fin de cette formation)

Connaissances de bases en Redux (En cas de besoin, vous trouverez plusieurs vidéos sur les concepts de Redux à la fin de cette formation)

Un ordinateur (Windows/Linux/Mac) pas trop vieux ;-)

Description

Bienvenue les ami(e)s dans cette nouvelle formation REACT NATIVE POUR TOUS -  L'Ultime Formation 2021 (FR).D’abord, pour commencer, je tiens à vous féliciter car vous venez de découvrir la formation React Native la plus complète, la plus simple, et la plus didactique qui existe en français!Pour ceux qui ne me connaissent pas, je m’appelle Tahar, je suis développeur Senior, formateur, mais aussi Youtubeur. Aujourd’hui, j’ai l’honneur de vous présenter ma nouvelle formation « React Native Pour Tous – L’ultime Formation ». Si vous avez aimé mes précédentes formations sur React, Redux, TypeScript, Flexbox, vous allez aimer encore plus cette nouvelle formation. Personnellement, c’est celle dont je suis le plus fier et le plus satisfait car elle est, sans aucun doute, la meilleure formation React Native qui existe et qui existera en français!Pourquoi serait-elle la meilleure formation React Native en français ?Elle est, à mon sens, la meilleure formation React native pour plusieurs raisons :Premièrement, et contrairement à ce qui se fait régulièrement dans le milieu « DEV Francophone », j’ai décidé ici d’expliquer les différents concepts derrière React Native de la façon la plus simple et la plus organisée possible. Mon objectif étant de vous apprendre à coder des applications mobiles, je me dois donc d’être le plus clair et le plus simple possible pour que tout le monde puisse suivre sans aucun problème. Oui, je dis bien « Tout le monde ». Débutant comme expérimenté ! Je ne rejette personne dans mes formations ! Quand j’aborde un concept que je considère comme étant d’une grande importance, je n’hésite pas à me répéter ou à vous le réexpliquer de différentes façons afin de m’assurer que vous avez « tous », « sans exception », compris ce dont on parle. Pour ce faire, je m’hésite pas à expliquer les choses avec des exercices simples qui vont droit au but. Pas de bla-bla, pas d’hésitations, pas de « euh euh », pas de matraquage à coup de console.log sans réel intérêt ou de code spaghetti qui n’a pas de lien direct avec le sujet abordé.En outre, quand j’aborde un concept qui n’a pas de lien direct avec React Native, mais qui est néanmoins nécessaire à notre exercice, dans ce cas-là, je n’hésiterai pas à m’attarder dessus afin de vous l’expliquer clairement. Exemple : même si vous êtes censés avoir des notions en React JS, pour faire du React Native, je ne me permettrais jamais d’utiliser un hook comme useEffect, useLaoyoutEffect, useState ou autres sans vous les réexpliquer. C’est le rôle du formateur d’expliquer clairement ce que je fais et de ne pas supposer que c’est des notions acquises par ses élèves. Donc, afin de m’assurer que vous avez tous compris, je n’hésiterais pas à expliquer chaque bout de code dans des exercices pratiques, simples, claires et qui vont droit au but.Pour tester vos connaissances, vous aurez droit à des quiz.Tout au long de la formation, l’utilisation régulière des différentes documentations sera la norme ! On utilisera la doc React, React Native, React Navigation, Expo, Expo-Victor Icons, Redux, React-Redux, etc.Afin d’aider ceux et celles d’entre vous qui ont une mémoire visuelle, ce qui est mon cas, j’ai créé un véritable support de cours, en PDF, rempli de visuels, de diagrammes, de schémas etc. Ce support est évidemment accessible en téléchargement PDF ainsi que celui de Flex-box et de Redux.En plus des centaines d’exercices qu’on fera tout au long de cette formation, on codera ensemble, étape par étape, 5 projets ! En effet, c’est bien de faire des exercices, mais les intégrer dans une vraie application est un véritable plus et c’est ce que nous allons faire dans cette formation.Pourquoi apprendre React Native?En 2012, Mark Zuckerberg (Fondateur de Facebook) a déclaré ceci: « La plus grande erreur que nous ayons commise en tant que société a été de parier trop sur HTML5 par opposition au natif ». Il a donc promis que Facebook offrirait bientôt une meilleure expérience mobile. A présent, c’est chose faite! Après quelques mois de développement acharnés, l’équipe Facebook a enfin publié la première version de la configuration JavaScript de la librairie React JS en 2015.Depuis exactement le 26 mars 2015 (date de la première version lancée), React Native ne cesse de gagner le coeur des utilisateurs. En effet, en seulement quelques années, React Native est devenu un des frameworks incontournables dans le domaine du développement d’applications mobiles.Basé sur la librairie React JS, React Native ne cesse de s’enrichir chaque année de nouvelles innovations et de performance permettant aux développeurs de coder facilement des applications mobile, natives, que ce soit sur Android ou sur iOS et ce, tenez-vous bien, avec un seul langage le « JavaScript »!Oui, plus besoin d’apprendre un nouveau langage pour coder des applications mobiles ! Grâce à React Native, vous allez pouvoir coder des applications native pour Android et iOS avec un seul langage le JavaScript. En effet, avant l’arrivée de React Native (et même de nos jours, pour ceux qui n’utilisent pas React Native) on était obligés d’apprendre d’autres langages pour pouvoir coder son application Mobile. Exemple : pour créer une application sur iPhone (iOS) il fallait maîtriser le langage Swift ou ObjectiveC. La même chose pour les applications Android. Pour coder une application Android, il fallait maîtriser le langage Java ou Kotlin. Sans oublier toute la complexité qui va avec ces langages qui nécessitent énormément de temps d’apprentissage !Avec React Native, cette époque est définitivement révolue ! Désormais, avec un seul langage (le JavaScript), vous allez pouvoir coder une seule application et cette unique application sera compatible, à la fois « Android » et sur « IOS » ! On assiste là à une véritablement révolution dans le domaine du développement mobile, car désormais, grâce à React Native, vous allez pouvoir « faire d’une pierre, deux coups ! »Plus besoin de perdre votre temps à apprendre d’autres langages.Plus besoin de créer deux applications (une pour chaque système).Une grande facilité de travail avec à tas d’outils déjà disponibles et qui vous marchent déjà le travail.Vous pensez que React Native est compliqué ?Détrompez-vous les amis ! Il n’en est rien !!! Non seulement il n’y a rien de compliquer à coder une vraie application Mobile via React Native, mais, en plus de cette facilité, il existe un tas d’outils comme les divers outils offerts par Expo, ou même la navigation via React Navigation, entre autres, qui nous facilitent grandement le travail. Ne vous inquiétez donc surtout pas ! On verra tout cela dans les détails tout au long de cette formation.Si vous êtes motivé à apprendre React Native et devenir un véritable développeur d’applications Mobile Natives iOS et Android, vous êtes au bon moment et surtout au bon endroit !Sortez donc définitivement de votre esprit l’idée de complexité quand vous parlez de React Native. D’ailleurs, cette facilité à coder avec React Native, combinée avec la robustesse des applications « cross-platforme » est sans aucun doute ce qui a poussé même les grandes entreprises à s’orienter, de plus en plus, vers React Native. N’oublions pas le slogan de React Native: « Learn once, write everywhere ». En effet, avec React Native, on apprend une seule librairie, une seule fois, et on code pour les deux plate-forme Android et IOS en même temps.Voici quelques-unes des grandes entreprises qui ont sauté le pas pour adopter React Native:Le réseau social « Facebook », Facebook Ads Manager, Facebook Analytics, Instagram, Shopify, FlipKart, Discord, AirBnB, Skype, Bloomberg, Pinterest, Tesla, Uber Eats, Wix, Call of Duty Companion App, Artsy, adidas GLITCH, SoundCloud Pulse, le magazine vogue .. etc etcRappelez-vous de ceci: "Dans cette formation, vous allez apprendre, étape par étape, d’une manière logique et progressive les différents concepts de React Native".Nous allons d’abord commencer par les bases en découvrant les composants React Native les plus couramment utilisés comme View, Text, Button, Image etc avant d’attaquer les concepts les plus poussés comme la navigation via React navigation V4 et V5, la gestion de state dans une application React Native via la librairie Redux, comment effectuer des requêtes HTTP, le code asynchrone, les bases de données, l’authentification utilisateur (on utilisera Firebase), on verra le AsyncStorage, le SQLIte, la géo-locations, l’affichage des cartes, récupérer les photos dans la galerie du téléphone, ..etc. Nous allons étudier tout cela à la fois dans des exercices simples, mais aussi en réalisant quelques projets ensemble.À la fin de cette formation, vous seriez donc complètement autonomes sur vos projets React Native, et même capables (sur le plan technique évidemment) de décrocher un poste de développeur React Native ! En effet, connaître React Native est, de nos jours, un vrai plus qui va certainement vous ouvrir de nouvelles portes sur le marché du travail ! En outre, si vous suivez assidûment cette formation et que vous codez avec moi tous les exercices et les applications que je vous présente, je suis plus que convaincu que vous serez en mesure de réussir n’importe quel entretien technique traitant des bases de la librairie React Native.N’oubliez pas qu’actuellement, React Native est en plein BOOM. Il est de plus en plus demandé sur le marché du travail. Le maîtriser fera de vous un développeur de choix que les recruteurs s’arrachent !Donc, ne ratez pas la chance de décrocher cette formation qui fera de vous un véritable développeur "cross-platforme" via React Native!  Ne perdez pas votre temps avec les tutos Youtube où avec ceux qui, au lieu de vous former, passent leurs temps à vous faire croire qu'ils "savent coder" mais qui, en réalité, ne vous apprennent rien sauf à vous faire croire que ce qu'il font est compliqué tout en cherchant le clic! N'oubliez pas que le but principal est de vous former "VOUS" pour que vous puissiez réussir!  Vous n'êtes pas à la recherche d'un champion à applaudir! Cherchez un formateur qui va vous acclamer vous vos progrès et votre réussite!   Ne perdez pas votre temps, avec ceux qui vous compliquent ce qui n'est pas compliqué! Ne perdez pas votre temps à écouter le bla-bla mais orientez-vous vers de vraie formations structurées, accessibles à tous (Débutants comme expérimentés). Oui, une véritable formation qui s'adresse à tous les niveaux! Ne perdez pas votre temps avec les formations d'une heure ou deux qui bâclent le travail et vous feront perdre votre temps! Une vraie formation doit aborder énormément de concepts tout en les expliquant sereinement, paisiblement, étape par étape pour que tout le monde puisse suivre et comprendre. Rappelez-vous ceci: Ce n'est PAS de votre faute ! Si vous avez du mal à comprendre un concept, c'est qu'on vous l'a MAL expliqué!En effet, si d'autres l'ont compris, vous êtes capable de le comprendre et c'est justement le défit que je relève avec cette formation. Une formation sans bla-bla et qui s'adresse à tous les niveaux (Sans exception). Ne perdez pas votre temps, maîtrisez React Native maintenant et devenez de DEV que les recruteurs respectent et s'arrachent à des salaires élevés.  La décision vous revient et votre avenir vous appartient ! C'est vous qui décidez de votre réussite ou de votre échec.Si vous voulez réussir et devenir un véritable développeur d'applications Mobiles iOS et Android, vous ne pouvez pas trouver mieux que cette formation! Oui, vous êtes au bon moment et surtout au bon endroit !Vous souhaitez avoir un aperçu de la qualité de cette formation?En plus des deux vidéos accessibles au niveau du premier chapitre "Introduction et prérequis", vous pouvez consulter plusieurs autres vidéos gratuitement au niveau du chapitre "React Navigation 5" ;-) Ressources supplémentaires pour vous aider encore plus:Pour rappel, vous devez avoir des notions de base en React, en CSS Flexbox er Redux pour pouvoir coder des applications sous React Native. Cependant, ne vous inquiétez pas! Je vous ai préparé tout ce qu'il faut. Vous aurez accès à deux sections réservées à React JS dans lesquelles je vous présenterai les bases de la librairie React JS ainsi que les Hooks nouveaux. Vous pouvez y accéder dans les derniers chapitres de cette formation. Toujours dans les derniers chapitres de cette formation, vous aurez accès à une section réservées à l'apprentissage du CSS FlexBox. Redux étant un outil indispensable sur React et React Native, je vous donne également accès une une section réservée à l'apprentissage de Redux.Voici quelques nouvelles sections arrivées récemment :-)Les Interfaces Utilisateur AdaptativesUn Quiz sur les Interfaces Utilisateur AdaptativesLes Notifications dans React Native avec ExpoReact Native CLI (Mac)Exercices sur React Native CLI (React Navigation 6 + React-Native-Image-Picker)React Native via le Bare Workflow (Expo + React Native CLI)Créer une application Expo et faire le Eject pour passer en mode BareWorkflowGénérer le build d'une app Expo via EAS Build et la tester sur le simulateurs iOS et l'émulateur Android.Maîtriser le CSS FlexBoxExercices Pratiques CSS FlexBoxLes bases de la librairie REACT JSLes Hooks de ReactMaîtriser Redux et Redux Toolkit avec React JSUpdate React-Router 6 (15 nouvelles vidéos)!Oui les ami(e)s, avec cette formation vous avez tout ce qu'il faut pour bien maîtriser React Native et bien plus encore !Bonne formation à tous :-)Donkey Geek.PS: Je ferai de mon mieux pour répondre à vos questions ayant un lien direct au contenu de cette formation. En revanche, je ne suis pas habilité à intervenir sur vos projets personnels ou ceux sur lesquels vous travaillez en entreprise.

Overview

Section 1: Introduction et prérequis

Lecture 1 Introduction et accès aux ressources de la formation

Lecture 2 C'est quoi React Native ?

Lecture 3 Les Prérequis

Lecture 4 Adaptez la formation à votre rythme

Section 2: React Native - Android et iOS

Lecture 5 Les différences entre plateformes

Lecture 6 Composants React.js Vs composants React-Native

Lecture 7 Exécution du JavaScript

Section 3: Outils et Environnement de développement

Lecture 8 Visual Studio Code & Expo-CLI

Lecture 9 Environnement de développement

Lecture 10 Initialisation de projet et découverte de ExpoDevTool.

Lecture 11 ExpoClient, Android et iOS

Lecture 12 Télécharger et installer Expo Go sur Android et Flasher le QR Code

Lecture 13 iOS Simulator et Android Studio Emulator

Lecture 14 Note Utilisateurs Mac

Lecture 15 Installation de Android Studio

Lecture 16 Note Installation Android Studio (MAC)

Lecture 17 Tester le simulateur Android Studio

Lecture 18 Installation et teste iOS Simulator

Lecture 19 Tester deux simulateurs en même temps

Section 4: Les Bases de React Native

Lecture 20 Présentation des composants de notre application

Lecture 21 Composants View et Text

Lecture 22 Découvrir le Inline Style

Lecture 23 Découvrir les Objet StyleSheets

Lecture 24 Styliser le composant Text

Lecture 25 Le JSX dans React Native

Lecture 26 Les Props dans React Native

Lecture 27 Le Props Children dans React Native

Lecture 28 Autres Props dans React Native

Lecture 29 Passer un objet dans un Props

Lecture 30 Découvrir le State et son utilité dans React Native

Lecture 31 Composant Button

Lecture 32 Modifier le State via un événement onPress

Lecture 33 Passer un objet dans le hook useState

Lecture 34 Composant TextInput

Lecture 35 Afficher le contenu d'un objet

Lecture 36 Composant ScrollView

Lecture 37 Composant FlatList

Lecture 38 Application Shopping List - Partie 1

Lecture 39 Application Shopping List - Partie 2

Lecture 40 Application Shopping List - Partie 3

Lecture 41 Application Shopping List - Partie 4

Lecture 42 Application Shopping List - Partie 5

Lecture 43 Application Shopping List - Partie 6

Lecture 44 Passer de la data entre les composants

Lecture 45 Passer une fonction dans un prop

Lecture 46 Passer une fonction du composant enfant vers le composant parent

Lecture 47 Invoquer une fonction dans un composant enfant pour y passer la valeur du state

Lecture 48 Découverte de TouchableHighlight

Lecture 49 Découverte de TouchableOpacity

Lecture 50 Découverte de TouchableHighlight

Lecture 51 Découverte de Pressable

Lecture 52 Supprimer un produit

Lecture 53 Afficher une simple alerte

Lecture 54 API Alert de React Native

Lecture 55 Utilisation du Hook useEffect dans React Native

Lecture 56 Désactiver un bouton dans React Native

Lecture 57 Découverte du composant Modal - Partie 1

Lecture 58 Découverte du composant Modal - Partie 2

Lecture 59 Découverte du composant Modal - Partie 3

Lecture 60 Découverte du composant Modal - Partie 4

Lecture 61 Découverte du composant Modal - Partie 5

Lecture 62 Extensions Visual Studio Code pour la colorisation CSS

Lecture 63 Exercice 1

Lecture 64 Exercice 2

Lecture 65 Exercice 3

Lecture 66 Exercice 4

Lecture 67 Exercice 5

Lecture 68 Exercice 6

Lecture 69 Exercice 7

Lecture 70 Exercice 8

Lecture 71 Exercice 9

Lecture 72 Exercice 10

Lecture 73 Exercice 11

Lecture 74 Exercice-12 - Découverte du composant SectionList

Lecture 75 Exercice 13 - Props & TextInput

Lecture 76 Le module Keyboard

Lecture 77 Exercice sur le Keyboard avec addListener - removeListener et useEffect

Lecture 78 Afficher TextInput dans un Modal suite à onPress sur un bouton

Lecture 79 Retirer le Modal après validation du produit

Lecture 80 Retirer le modal sans validation

Lecture 81 Aligner deux boutons horizontalement - Flex-box

Lecture 82 Découverte du composant React Native Image

Lecture 83 Découverte du composant React native ImageBackground

Lecture 84 Custom Button et props

Lecture 85 Custom Button avec le props children et TouchableOpacity

Lecture 86 Composants Text et View - Notions importantes relatives aux styling

Lecture 87 Custom Header avec logo

Lecture 88 Les constantes - Colors

Lecture 89 Créer un custom Input

Lecture 90 Les forward props dans un custom Input

Lecture 91 Filtrer les valeurs validées dans TextInput

Lecture 92 Custom fonts avec Google-fonts

Lecture 93 Expo Google Fonts

Lecture 94 Custom Component TitleText

Lecture 95 Les Icons via Vector Icons

Lecture 96 Gestion Globale des styles

Section 5: Quiz 1

Section 6: Notre relative aux versions de packages Expo/NPM

Lecture 97 Note importante à garder en tête

Section 7: Le Debugging en React Native

Lecture 98 Introduction au déboggage (Debugging) dans React Native

Lecture 99 Le debugging via Console.log()

Lecture 100 Le debugging via Chrome Debugger

Lecture 101 Le debugging via React-Devtools – Partie 1

Lecture 102 Le debugging via React-Devtools – Partie 2

Lecture 103 Installation de React-Native-Debugger

Lecture 104 Compatibilité de React-Native et React-Native-Debugger

Lecture 105 Connecter et tester React-Native-Debugger

Section 8: La Navigation avec React Navigation 4

Lecture 106 Introduction à React-Navigation

Lecture 107 App Pixels, création des screens et custom fonts

Lecture 108 Le Stack Navigator

Lecture 109 Navigation entre écrans via navigate()

Lecture 110 Revenir à l’écran précédant via goBack()

Lecture 111 Précisions concernant navigate et push

Lecture 112 Retirer un écran via replace()

Lecture 113 Les méthodes popToTop() et pop()

Lecture 114 Comprendre le Stack Navigator via les méthodes de cycle de vie

Lecture 115 Note images Pixabay

Lecture 116 Passer la data entre les écrans – Partie 1

Lecture 117 Passer la data entre les écrans – Partie 2

Lecture 118 Passer la data entre les écrans – Partie 3

Lecture 119 Définir la propriété navigationOptions à un route

Lecture 120 Définir la propriété navigationOptions par défaut

Lecture 121 Définir la propriété navigationOptions à un composant

Lecture 122 Hiérarchie des styles et API Platform

Lecture 123 Styliser le Header avec une data dynamique

Lecture 124 Passer la data et accéder aux méthodes de l’objet navigation

Lecture 125 Afficher un bouton sur le cote droit du header

Lecture 126 Afficher une icône cliquable avec React-Navigation-Header-Buttons

Lecture 127 Afficher l’icône de menu sur le côté gauche du header

Lecture 128 Drawer Navigation – Partie 1

Lecture 129 Drawer Navigation – Partie 2

Lecture 130 Rappel sur l’utilité de la documentation

Lecture 131 Styliser le Drawer

Lecture 132 Tab Navigation

Lecture 133 Afficher des icônes et changer le texte dans Tab Navigation

Lecture 134 Changer l’apparence du Tab-Navigation sur iOS et Android

Lecture 135 Changer le route Selected en un StackNavigator

Lecture 136 Travailler sur l’écran Portfolio – Partie 1

Lecture 137 Travailler sur l’écran Portfolio – Partie 2

Lecture 138 Travailler sur l’écran Portfolio – Partie 3

Lecture 139 Travailler l’écran Photo – Partie 1

Lecture 140 Travailler l’écran Photo – Partie 2

Lecture 141 Information avant d’aborder React-Navigation 5

Section 9: Quiz 2

Section 10: La gestion de State avec REDUX en React-Native

Lecture 142 Initialization et connexion de Redux à notre application.

Lecture 143 Afficher les catégories utilisateurs

Lecture 144 Définir une action et modifier l’icône du Header dans Portfolio

Lecture 145 Dispatcher l’action setSelection

Lecture 146 Gérer l’action dispatchée dans le Reducer

Lecture 147 Récupérer les images enregistrées

Lecture 148 Gérer l’affichage de l’icône

Lecture 149 Afficher un Modal dans Home

Lecture 150 Travailler les Settings via les Switch – Partie 1

Lecture 151 Travailler les Settings via les Switch – Partie 2

Lecture 152 Travailler les Settings via les Switch – Partie 3

Lecture 153 Validation des Settings

Lecture 154 Fermer le Modal après validation

Lecture 155 Créer et dispacher l’action des Settings

Section 11: La Navigation avec React Navigation 5

Lecture 156 Installation de React Navigation 5 et ses dépendances

Lecture 157 StackNavigator avec React Navigation 5

Lecture 158 Exercices StackNavigation v5

Lecture 159 Exercice StackNavigator v5 (suite)

Lecture 160 Exercice gestureEnabled et gestureDirection

Lecture 161 Exercices Animations avec StackNavigator v5

Lecture 162 Passer la data vers un autre route

Lecture 163 Afficher une data dans le header

Lecture 164 Incrémenter un count via un bouton dans header

Lecture 165 Drawer Navigation avec StackNavigator

Lecture 166 Exercice 1 DrawerNavigator

Lecture 167 Exercice 2 DrawerNavigator

Lecture 168 Custom Twitter Drawer Navigator – Partie 1

Lecture 169 Custom Twitter Drawer Navigator – Partie 2

Lecture 170 Custom Twitter Drawer Navigator – Partie 3

Lecture 171 Custom Twitter Drawer Navigator – Partie 4

Lecture 172 Custom Twitter Drawer Navigator – Partie 5

Lecture 173 TabNavigator v5

Lecture 174 Exercice sur TabNavigator v5

Section 12: Petit projet E-Commerce avec React Navigation V5

Lecture 175 Note Images Pixabay

Lecture 176 Initialisation de notre app E-Coomerce

Lecture 177 Afficher les cours disponibles

Lecture 178 Afficher les icônes

Lecture 179 Installer React Navigation 5 créer un StackNavigator

Lecture 180 Afficher le titre dans le header

Lecture 181 Afficher icône panier dans header

Lecture 182 Travailler l’affichage de CourseInfo

Lecture 183 Ajouter un cours dans le panier

Lecture 184 Vider le panier

Lecture 185 Afficher les cours dans le panier

Lecture 186 Effacer un cours du panier

Lecture 187 Afficher dans le catalogue le cours retiré du panier

Lecture 188 Effectuer le paiement et vider panier

Lecture 189 Utiliser un DrawerNavigator

Lecture 190 Afficher l’icône menu pour activer le Drawer

Lecture 191 Afficher l’historique des achats

Lecture 192 Ecrans éditer et créer une formation

Lecture 193 Affichage les cours d’un utilisateur

Lecture 194 Affichage des deux icônes éditer et effacer

Lecture 195 Effacer un cours et mettre à jour le catalogue et le panier

Lecture 196 Formulaire pour éditer ou créer un cours

Lecture 197 Gérer la modification et la création d’un cours

Lecture 198 Gérer la validation

Lecture 199 Dispatcher une action pour modifier le cours

Lecture 200 Dispatcher une action pour créer un cours

Section 13: Suite du Projet E-Commerce avec la validation de formulaires

Lecture 201 Validation du formulaire via useReducer – Partie 1

Lecture 202 Validation du formulaire via useReducer – Partie 2

Lecture 203 Validation du formulaire via useReducer – Partie 3

Lecture 204 Validation du formulaire via useReducer – Partie 4

Lecture 205 Validation du formulaire via useReducer – Partie 5

Lecture 206 Validation du formulaire via useReducer – Partie 6

Section 14: API AsyncStorage

Lecture 207 Présentation de l’API AsyncStorage

Lecture 208 Retravailler notre React Navigation

Lecture 209 Travailler la page Login

Lecture 210 Enregistrer une valeur de type string dans AsyncStorage

Lecture 211 Rediriger le user connecté vers Home et afficher son nom dans Drawer

Lecture 212 Supprimer la data du AsyncStorage

Lecture 213 Enregistrer un objet dans AsyncStorage et récupérer la data

Lecture 214 Supprimer toutes les clés enregistrées dans AsyncStorage

Section 15: L’authentification via Firebase

Lecture 215 Présentation de l’authentification & requêtes http

Lecture 216 Retravailler la page Login

Lecture 217 Découvrir le package Expo-Linear-Gradient

Lecture 218 Installation de Redux, React-redux, Thunk Middleware

Lecture 219 Action d’inscription Async et Thunk Middleware

Lecture 220 Affichage des erreurs via l’API Alert

Lecture 221 Composant ActivityIndicator

Lecture 222 Action de Connexion

Lecture 223 Gestion des Messages d’erreurs

Lecture 224 Dispatcher l’action d’authentification actionAuthUser

Lecture 225 Enregistrement dans AsyncStorage

Lecture 226 Récupérer la data de AsyncStorage

Lecture 227 Afficher un Spinner le temps d’authentifier l’utilisateur

Section 16: La base de données via Firebase

Lecture 228 La base de donnée Firebase

Lecture 229 Enregistrer les informations d’un utilisateur

Lecture 230 Enregistrer les informations utilisateur dans AsyncStorage

Lecture 231 Récupérer les informations utilisateur de AsyncStorage

Lecture 232 BDD Récupérer les infos utilisateur de la BDD Firebase

Lecture 233 Enregistrer les infos utilisateur dans Redux – Partie 1

Lecture 234 Enregistrer les infos utilisateur dans Redux – Partie 2

Lecture 235 Déconnexion de l’utilisateur

Section 17: Accès à la galerie de l’appareil iOS & Android

Lecture 236 Image-Picker – Partie 1

Lecture 237 Image-Picker – Partie 2

Section 18: SQLite, Géolocalisation et Cartes

Lecture 238 Présentation de l’objectif du chapitre

Lecture 239 Redirection vers l’écran de Géolocalisation

Lecture 240 Géolocalisation de l’utilisateur – Partie 1

Lecture 241 Géolocalisation de l’utilisateur – Partie 2

Lecture 242 Initialisation SQLite

Lecture 243 Enregistrement data de Géolocalisation dans SQLite

Lecture 244 Afficher les infos utilisateur dans Portfolio

Lecture 245 Fetch de data de SQLite

Lecture 246 Afficher la carte via MapView

Lecture 247 Tester l’affichage de la carte sur Android

Lecture 248 Afficher le Marker sur la carte

Lecture 249 Corriger le problème du Keyboard

Section 19: Interfaces Utilisateur Adaptatives

Lecture 250 Tester l’app Pixels sur un petit écran – Partie 1

Lecture 251 Tester l’app Pixels sur un petit écran – Partie 2

Lecture 252 Exercices API Dimensions

Lecture 253 Exercices API Dimensions avec conditions

Lecture 254 Exercices API Dimensions – Section Portfolio

Lecture 255 Exercice Mode Portrait, Paysage et les deux

Lecture 256 Exercice Dimensions avec addEventListener

Lecture 257 Listener Cleanup & useWindowDimensions

Lecture 258 Retourner différents contenus

Lecture 259 SafeAreaView

Section 20: Quiz 3

Section 21: Les Notifications dans React Native avec Expo

Lecture 260 Introduction aux notifications Locales et Push

Lecture 261 Exercice 1: Notifications Locales

Lecture 262 Exercice 2: Notifications Locales

Lecture 263 Exercice 2: Notifications Locales - Suite

Lecture 264 Fonctionnement des notifications Push

Lecture 265 Tester les notifications locales sur un téléphone (android)

Lecture 266 Vérifier si on utilise un vrai appareil ou un simulateur

Lecture 267 Autorisation de notification et récupération du Token Expo

Section 22: React Native CLI (Mac)

Lecture 268 Application React Native CLI

Lecture 269 Le Flux géré (Expo) versus le flux non-géré (RN CLI)

Lecture 270 Configuration React Native CLI - Partie 1

Lecture 271 Configuration React Native CLI - Partie 2

Lecture 272 Configuration React Native CLI - Partie 3

Lecture 273 Installation de CocoaPods

Lecture 274 Initialisation d'un projet React Native CLI

Lecture 275 Présentation de l'application React Native CLI

Lecture 276 Lancer notre application sur un simulateur iOS

Lecture 277 Lancer notre application sur Android Emulator

Lecture 278 Petit exercice pour tester notre application

Section 23: Exercices via React Native CLI

Lecture 279 Exigences minimales React Navigation 6

Lecture 280 Installation de React Navigation Version 6

Lecture 281 Installation du stack-navigator et création de nos écrans

Lecture 282 Naviguer entre les écrans

Lecture 283 Passer la data entre les écrans

Lecture 284 Exercices sur le header

Lecture 285 Créer deux tabs Navigations

Lecture 286 Exercices sur la TabBar

Lecture 287 React-Native-Image-Picker avec React Native CLI

Lecture 288 Récupérer une image dans la galerie et l'afficher

Lecture 289 Prendre une photo avec la caméra et l'afficher

Section 24: React Native via le Bare Workflow

Lecture 290 Le Bare-Workflow comparé à Expo-CLI et React-Native CLI

Lecture 291 Note Expo Go avec Bare Workflow

Lecture 292 Initialisation d'un projet React Native avec le Bare Workflow

Lecture 293 Exercice sur notre application BareWorkflow - Partie 1

Lecture 294 Exercice sur notre application BareWorkflow - Partie 2

Lecture 295 Expo Eject et test sur Android Émulateur - Partie 1

Lecture 296 Expo Eject et test sur Android Émulateur - Partie 2

Lecture 297 Expo Eject et test sur iOS Simulateur

Section 25: Générer le build d'une app Expo et tests sur les simulateurs

Lecture 298 Presentation du build d'une application Expo via EAS

Lecture 299 Configuration avant le build

Lecture 300 icon, adaptative-icon et splash

Lecture 301 EAS build Android

Lecture 302 Tester le build APK sur l'émulateur Android

Lecture 303 Correction affichage Splash et StatusBar

Lecture 304 Générer le build pour iOS

Lecture 305 Tester le build sur le simulateur iOS

Section 26: Maîtriser le CSS FlexBox

Lecture 306 Ressources relatives au CSS Flexbox

Lecture 307 Introduction à la section CSS FlexBox et ressources

Lecture 308 Display Flex

Lecture 309 Flex-Direction

Lecture 310 Flex-Wrap

Lecture 311 Flex-Flow

Lecture 312 Justify-Content

Lecture 313 Align-Items

Lecture 314 Align-Content

Lecture 315 Order

Lecture 316 Flex-Grow

Lecture 317 Flex-Shrink

Lecture 318 Flex-Basis

Lecture 319 Flex

Lecture 320 Align-Self

Section 27: Exercices Pratiques CSS FlexBox

Lecture 321 Exercice Pratique FlexBox - Partie 1

Lecture 322 Exercice Pratique FlexBox - Partie 2

Lecture 323 Exercice Pratique FlexBox - Partie 3

Lecture 324 Exercice Pratique FlexBox - Partie 4

Lecture 325 Exercice Pratique FlexBox - Partie 5

Lecture 326 Exercice Pratique FlexBox - Partie 6

Lecture 327 Exercice Pratique FlexBox - Partie 7

Lecture 328 Exercice Pratique FlexBox - Partie 8

Section 28: Les bases de la librairie REACT JS

Lecture 329 Introduction à React JS

Lecture 330 Les Composants React JS

Lecture 331 React via CDN, JSX, ES6 et Babel

Lecture 332 Créer une application React - Partie 1

Lecture 333 Créer une application React - Partie 2

Lecture 334 Note concernant React.StrictMode

Lecture 335 Composants, Props et State dans REACT JS - Partie 1

Lecture 336 Composants, Props et State dans REACT JS - Partie 2

Lecture 337 8- DOM Events et changement de State - Partie 1

Lecture 338 DOM Events et changement de State - Partie 2

Lecture 339 Passer une fonction dans un Props

Lecture 340 React Fragments

Lecture 341 Destructuring et React (ES6) - Partie 1

Lecture 342 Destructuring et React (ES6) - Partie 2

Lecture 343 Les Conditions dans React

Lecture 344 Affichage des images dans React

Lecture 345 Les Formulaires dans React

Lecture 346 Le CSS dans React

Lecture 347 Méthodes de cycle de vie

Lecture 348 Phase de montage d’un composant React

Lecture 349 Phase de Mise à jour d’un composant React

Lecture 350 Phase de Démontage d’un composant React

Lecture 351 La méthode getDerivedStateFromProps

Lecture 352 shouldComponentUpdate()

Lecture 353 PureComponent

Lecture 354 React Memo

Lecture 355 React Portails

Lecture 356 React Refs

Lecture 357 React Refs - forwardRef

Lecture 358 Composant d'ordre supérieur

Lecture 359 Périmètres d'erreurs ou Error Boundaries

Lecture 360 Props de Rendu ou Render Props

Lecture 361 Note React Router

Lecture 362 Route, Link, NavLink, Switch, Strict, Exact, Error page

Lecture 363 Redirection automatique dans React

Lecture 364 Paramètres Route dans React

Lecture 365 Context dans React - Partie 1

Lecture 366 Context dans React - Partie 2

Section 29: Les Hooks de React

Lecture 367 C'est quoi ces Hooks de React ?

Lecture 368 Hook d’état - useState - Partie 1

Lecture 369 Hook d’état - useState - Partie 2

Lecture 370 Hook d’effet - useEffect après render

Lecture 371 05 - Hook d’effet - useEffect avec condition

Lecture 372 Hook d’effet - useEffect comme ComponentDidMount

Lecture 373 Hook d’effet - useEffect avec Nettoyage

Lecture 374 Hook de Contexte - useContext

Lecture 375 Introduction au hook useReducer

Lecture 376 useReducer - Partie 2

Lecture 377 useReducer - Partie 3

Lecture 378 useCallback - Partie 1

Lecture 379 useCallback - Partie 2

Lecture 380 useMemo

Lecture 381 useRef

Lecture 382 useImperativeHandle

Lecture 383 useLayoutEffect

Section 30: Update React-Router-Dom version 6

Lecture 384 Infos téléchargement application

Lecture 385 Application et Node Modules

Lecture 386 Révisions React Router v5 avant mise à jour vers v6

Lecture 387 Routes et Route

Lecture 388 Link et NavLink

Lecture 389 Navigate

Lecture 390 Redirection programmée

Lecture 391 Navigate avec replace

Lecture 392 Gérer les routes inexistants via ErrorPage

Lecture 393 Exercice 1

Lecture 394 Correction Exercice 1

Lecture 395 Exercice 2

Lecture 396 Correction Exercice 2

Lecture 397 Routes imbriques (Nested Routes)

Lecture 398 Route Index

Lecture 399 Récupérer la data dans l'URL

Lecture 400 Récupérer une data d'une API via paramètres Route

Lecture 401 Paramètres de requêtes

Lecture 402 Télécharger le projet React-Router 6

Section 31: Maîtriser Redux avec React JS

Lecture 403 Ressources relatives à Redux

Lecture 404 Introduction à la bibliothèque Redux

Lecture 405 Les Actions dans Redux

Lecture 406 Le Reducer dans Redux

Lecture 407 Redux Store via createStore

Lecture 408 Gestion de plusieurs actions

Lecture 409 Combiner plusieurs Reducers

Lecture 410 La bibliothèque React-Redux

Lecture 411 React-Redux Store Provider

Lecture 412 Connect HOC et mapStateToProps

Lecture 413 Connect HOC et mapDispatchToProps

Lecture 414 useSelector Hook

Lecture 415 useDispatch Hook

Lecture 416 La documentation Redux et React-Redux

Lecture 417 combineReducers dans une app React

Lecture 418 Redux Action Payload

Lecture 419 Middleware – applyMiddleware

Lecture 420 Thunk Middleware

Lecture 421 L’extension Redux DevTools

Section 32: Maîtriser Redux Toolkit avec React

Lecture 422 Redux versus Redux Toolkit

Lecture 423 C'est quoi IMMER ?

Lecture 424 Ressources en téléchargement

Lecture 425 Initialisation du projet React avec Redux Toolkit

Lecture 426 Structure de notre application React avec Redux Toolkit

Lecture 427 Create Slice - Reducers et actions

Lecture 428 Configuration du store et Dispatch d'action

Lecture 429 Exercice tvSlice

Lecture 430 Correction de l'exercice

Lecture 431 ExtraReducers

Lecture 432 ExtraReducers (Alternative)

Lecture 433 Dispatcher l'action d'achat de Tablettes

Lecture 434 Définir la valeur du Payload

Lecture 435 Redux DevTools avec Redux Toolkit

Lecture 436 Admin View

Lecture 437 Augmenter le stock des phones et tablettes

Lecture 438 Augmenter le stock des télés

Lecture 439 Async actions - Fetch API

Lecture 440 Dispatch Async Action

Section 33: Remerciements et suite ;-)

Lecture 441 Remerciements et suite

Débutants ou avancés souhaitant se lancer dans la programmation d'applications mobiles.,Développeurs React JS souhaitant élargir leurs compétences vers le développement mobile.,Développeur JavaScript qui veut coder de vraies applications Mobiles compatibles iOS et Android en javaScript sans passer par les langages Swift, ObjectiveC, Java ou Kotlin!,Toute personne sachant coder un peu en JavaScript (+ notions en React) souhaitant coder des applications mobiles.