OpenCourser brand icon
Sign in
We may earn an affiliate commission when you visit our partners.

React Native (2024)

Le guide complet (+ Redux & Hooks)

Farid Rehila

React Native est devenu en quelques années un framework incontournable dans le développement d'applications mobiles. Basé sur React, qui s'enrichit chaque année de nouveaux concepts innovants et performants, React Native permet aux développeurs front-end de publier des applications natives Android et iOS avec Javascript.

Read more

React Native est devenu en quelques années un framework incontournable dans le développement d'applications mobiles. Basé sur React, qui s'enrichit chaque année de nouveaux concepts innovants et performants, React Native permet aux développeurs front-end de publier des applications natives Android et iOS avec Javascript.

À la fin de ce cours, vous aurez développé plusieurs applications et vous saurez les publier sur l'App Store et le Play Store. La difficulté des concepts sera graduelle : nous commencerons par des concepts de base pour terminer par le développement d'une application réalisant des requêtes Http vers une API.

Si vous débutez avec React, pas de panique . Nous verrons ensemble les concepts de base de React. Vous apprendrez tout ce qui est nécessaire de savoir sur React pour se lancer avec React Native.

Nous verrons en détails comment appliquer du style à nos applications. Une fois les bases acquises, nous développerons une première application simple pour bien comprendre concepts théoriques.

Nous utiliserons ensuite Redux pour gérer le state de notre application. Et nous verrons pourquoi cette librairie est autant utilisée dans l'ecosystem React.

Grâce au développement de l'application de liste de recettes, nous verrons en détails comment développer une application plus complexe.

Vous pourrez aussi me contacter pour poser toutes les questions que vous voulez. Chacun est différent et je comprends très bien que certains passages peuvent être complexes. Alors n'hésitez pas à m'écrire .

Enroll now

What's inside

Learning objectives

  • Développer des applications professionelles pour android et ios avec react native
  • Développer avec react et react native
  • Apprendre à se servir des hooks (react 16+)
  • Comprendre et utiliser les concepts de redux
  • Créer des composants partageables qui ont du style
  • Publier une application sur le play store et l'app store
  • Découvrir les modèles de conception mobile utilisés par des ingénieurs expérimentés
  • Maitriser le style, notamment les flexbox
  • Découvrir les nouvelles fonctionnalités de l'es6

Syllabus

Introduction
Bienvenue ! Contenu du cours et présentation des applications
Une question ? Je suis là pour y répondre
Les emails privés de React Académie
Read more
Bien commencer : Les bases de React et React Native
Qu'est-ce que React Native?
Commencer avec React
Le composant React fonctionnel et de class
La structure d'un composant
L'API de React Native : comparaison avec HTML
Exercice : création d'un composant
Solution : création du composant Square
Qu'est-ce que JSX ?
Comprendre les props pour un composant fonctionnel
Les props pour un composant de class
La props children
Comprendre le state pour un composant fonctionnel
Comprendre le state pour un composant de class
Le Style avec React Native
Introduction au style dans React Native
Alternative à StyleSheet : présentation de Styled Components
FlexBox : flexDirection
FlexBox : justifyContent
FlexBox : alignItems
FlexBox : flex
Exercice avec les FlexBox
Solution
Installations des outils pour développer avec React Native
Présentation des installations
Nodejs et NPM
Yarn (optionnel)
Xcode (seulement pour MacOS)
Android Studio
Visual Studio Code + Extensions
Coder plus vite avec les extensions de Visual Studio Code
Développement d'une application simple [L'App Liste de Tâches]
Expo ou React Native CLI
Création de l'application
Test de l'application dans les émulateurs
Exercice : décomposer l'UI
Bien structurer son application
Premier composant : le Header + Exercice
Solution pour afficher la date
Appliquer du style au Header
Structure et logique de TasksScreen
Création du state avec le hook useState
FlatList : présentation et mise en place
FlatList : appliquer du style
Création du composant TaskTile + Exercice
Solution : Flexbox pour le composant TaskTile
Exercice pour la création du formulaire d'ajout de tâches
TextInput de React Native
Style et bouton d'ajout
Ajout de la nouvelle tâche au state
Pressable : nouveau composant de React Native

Maintenant que vous connaissez le composant Pressable:

1. Essayez de rendre le titre d'un tâche et l'image poubelle clickable avec le composant Pressable

2. Pour chaque onPress (de Pressable), modifier le status de la tache ou la supprimer grâce à un callback


On verra la solution dans les deux prochaines vidéos.

Mettre à jour le status d'une tâche
Supprimer un tâche
Le rendu conditionnel
Exercice : ajouter un bouton flottant
Solution 1/2 : ajouter le bouton flottant
Solution 2/2 : appliquer du style au bouton flottant
Les compteurs de tâches
Conclusion
Utiliser Redux pour gérer le State d'une application complexe.

Si vous n'avez pas suivi le module précédent, vous pouvez télécharger l'application.

Une fois le fichier .zip téléchargé et extrait, vous pourrez l'ouvrir avec Visual Studio Code et lancer la commande suivante dans votre terminal :

npm install

ou

yarn


Modèle MVC vs Modèle Flux
Qu'est-ce que Redux ?
Installation des librairies
Explication des différentes étapes pour créer notre Store avec Redux
Étape 1 : Création et ajout du store à notre application
Étape 2 : création du reducer TasksList
Étape 3 : création de l'action addTask
"Dispatcher" une action depuis un composant
Étape 4 : création d'un Selector
Affichage des tâches du Store (et correction du status isCompleted) + Exercice
Solution : action ToggleTask
Solution : action DeleteTask
Redux : comment structurer proprement son Store ?
NOUVEAU: Application Météo avec Géolocalisation
Introduction: Présentation de l'application
Mise en place d'Expo et des dépendances nécessaires
Utilisation de Expo location avec le hook useEffect
Le hook useState et Affichage des coordonnées
Présentation de l'API
Mise en place de la requête
Amélioration du composant App
Décomposition de l'interface utilisateur
Création du composant CurrentWeather
Affichage de l'image météo récupérée depuis le serveur
Amelioration du style
Introduction des prévisions
Creation du composant Forecasts
Logique du composant Forecasts
Affichage des prévisions
Le composant ScrollView de React Native
Création du composant Weather
Affichage de l'icon pour chaque prévision
Amélioration en regroupant les prévisions par jour + Style

Good to know

Know what's good
, what to watch for
, and possible dealbreakers
Teaches React Native, which allows front-end developers to publish native Android and iOS applications using JavaScript, making it highly relevant for mobile app development
Explores React Native concepts, building upon a foundation of React knowledge, and is suitable for developers looking to transition to mobile app development
Covers publishing applications on the App Store and Play Store, which is a crucial step for developers aiming to release their mobile applications to the public
Utilizes Redux for state management, a widely adopted library in the React ecosystem, which is beneficial for building scalable and maintainable applications
Examines ES6 features, which are essential for modern JavaScript development and relevant for web developers transitioning to React Native
Requires installing tools like Xcode and Android Studio, which may pose a barrier for learners without MacOS or sufficient storage space

Save this course

Save React Native (2024) : Le guide complet (+ Redux & Hooks) to your list so you can find it easily later:
Save

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in React Native (2024) : Le guide complet (+ Redux & Hooks) with these activities:
Réviser les bases de JavaScript
Renforcer les connaissances de base en JavaScript, en particulier ES6, pour mieux comprendre les concepts avancés utilisés dans React Native.
Show steps
  • Revoir les concepts de variables, fonctions et objets en JavaScript.
  • S'exercer avec les boucles, les conditions et les tableaux.
  • Se familiariser avec les fonctions fléchées et les classes ES6.
S'exercer avec les Flexbox
Maîtriser les Flexbox en réalisant des exercices pratiques pour créer différentes mises en page.
Show steps
  • Créer des mises en page simples avec différentes propriétés Flexbox.
  • Reproduire des mises en page complexes à partir de modèles existants.
  • Expérimenter avec différentes combinaisons de propriétés Flexbox.
Lire 'Learning React Native' de Bonnie Eisenman
Approfondir la compréhension de React Native avec un guide complet qui couvre les bases et les concepts avancés.
View Putting Knowledge to Work on Amazon
Show steps
  • Lire les chapitres introductifs sur les composants et le style.
  • Expérimenter avec les exemples de code fournis dans le livre.
  • Se concentrer sur les sections relatives à la gestion d'état et à la navigation.
Four other activities
Expand to see all activities and additional details
Show all seven activities
Créer une application de notes simple
Mettre en pratique les concepts appris dans le cours en développant une application simple qui permet de créer, modifier et supprimer des notes.
Show steps
  • Concevoir l'interface utilisateur avec des composants React Native.
  • Implémenter la gestion d'état pour stocker et manipuler les notes.
  • Ajouter des fonctionnalités pour la persistance des données (par exemple, en utilisant AsyncStorage).
Consulter 'React Native Cookbook' de Mike McGrath
Utiliser un recueil de solutions pratiques pour résoudre les problèmes courants rencontrés lors du développement d'applications React Native.
View Putting Knowledge to Work on Amazon
Show steps
  • Parcourir les chapitres pertinents pour les sujets abordés dans le cours.
  • Essayer les exemples de code fournis dans le livre.
  • Adapter les solutions proposées à vos propres projets.
Rédiger un article de blog sur les Hooks React Native
Solidifier la compréhension des Hooks en expliquant leur fonctionnement et leur utilisation dans un article de blog.
Show steps
  • Choisir un ou plusieurs Hooks spécifiques à expliquer.
  • Fournir des exemples de code clairs et concis.
  • Expliquer les avantages et les inconvénients de l'utilisation des Hooks.
Déployer une application sur le Play Store ou l'App Store
Mettre en pratique les connaissances acquises en déployant une application sur une plateforme de distribution d'applications mobiles.
Show steps
  • Préparer l'application pour le déploiement (par exemple, en configurant les icônes et les écrans de démarrage).
  • Suivre les instructions de déploiement spécifiques à chaque plateforme.
  • Soumettre l'application pour examen et publication.

Career center

Learners who complete React Native (2024) : Le guide complet (+ Redux & Hooks) will develop knowledge and skills that may be useful to these careers:
Développeur React Native
Un développeur React Native se spécialise dans la création d'applications mobiles en utilisant le framework React Native. Ce cours est directement aligné avec ce rôle, car il enseigne en profondeur React Native. Il couvre des concepts importants comme les hooks, Redux, et la gestion du style, des compétences cruciales pour un développeur React Native. Ce cours est adapté à cette profession car il permet d’acquérir des compétences avancées et de développer une application complexe. La progression graduelle par des cas pratiques permet de mieux assimiler l'information. Ce cours est donc parfait pour devenir développeur React Native.
See salaries and explore the career path for Développeur React Native
Développeur d'applications mobiles
Un développeur d'applications mobiles crée des applications pour des plateformes comme Android et iOS. Ce cours sur React Native est directement pertinent, car il enseigne comment développer des applications natives pour ces plateformes en utilisant JavaScript. Les compétences acquises, notamment en React, Redux, et hooks, sont essentielles pour un développeur d'applications mobiles. La capacité à publier des applications sur l'App Store et le Play Store, enseignée dans ce cours, est également une compétence clé. Ce cours est idéal pour une personne souhaitant devenir développeur d'applications mobiles, car il fournit une expérience pratique et une compréhension des technologies indispensables.
See salaries and explore the career path for Développeur d'applications mobiles
Développeur Front-End Mobile
Le rôle d'un développeur front-end mobile est de se concentrer sur l'interface utilisateur et l'expérience utilisateur des applications mobiles. Ce cours est particulièrement adapté, car il se concentre sur React Native, qui permet de développer des interfaces utilisateur pour Android et iOS. Les compétences en React, Redux, et hooks enseignées ici sont fondamentales. Un développeur front-end mobile utilisera le style, notamment avec des flexbox, et créera des interfaces réactives, des sujets couverts dans ce cours. Ce cours convient à une personne souhaitant se spécialiser dans le développement front-end mobile et qui cherche à maîtriser les outils et techniques spécifiques à cette discipline.
See salaries and explore the career path for Développeur Front-End Mobile
Ingénieur logiciel mobile
Un ingénieur logiciel mobile est responsable de la conception, du développement et de la maintenance d'applications mobiles. Ce cours sur React Native est un excellent point de départ, car il enseigne comment créer des applications natives pour iOS et Android. La maîtrise de React, Redux et des hooks, ainsi que la compréhension des modèles de conception mobile enseignés dans ce cours, aident un ingénieur logiciel mobile dans son travail quotidien. Un ingénieur logiciel mobile bénéficiera de la partie sur la publication d'applications sur les stores. Les compétences développées grâce à ce cours construiront une base solide pour ce rôle.
See salaries and explore the career path for Ingénieur logiciel mobile
Formateur en Développement Mobile
Un formateur en développement mobile enseigne les technologies et les pratiques du développement d'applications. Ce cours est une ressource précieuse pour un formateur, car il offre une expérience pratique et structurée de l'enseignement de React Native. En suivant ce cours, une personne aura une compréhension approfondie des concepts et des outils nécessaires pour former efficacement d'autres personnes. Le contenu du cours est très complet, avec des notions théoriques et pratiques. Un formateur en développement mobile qui souhaite enseigner React Native devrait suivre ce cours pour une préparation optimale.
See salaries and explore the career path for Formateur en Développement Mobile
Consultant en Développement Mobile
Un consultant en développement mobile aide les entreprises à concevoir et à développer des applications mobiles. Ce cours est une ressource utile, car il enseigne les bases de React Native pour développer des applications natives. Le cours introduit des outils modernes comme Redux et les Hooks, qui sont importants pour un consultant qui doit rester à jour sur les technologies les plus efficaces. Les connaissances acquises dans ce cours permettront de fournir des conseils pertinents et de qualité aux entreprises. Vous pourrez apporter de la valeur ajoutée, car vous serez en mesure de parler des meilleures pratiques en matière de développement mobile avec React Native.
See salaries and explore the career path for Consultant en Développement Mobile
Architecte d'applications mobiles
Un architecte d'applications mobiles conçoit la structure et les composants d'applications. Ce cours est pertinent pour ce rôle, car il fournit une base solide en React Native, un outil important pour les applications. En apprenant les aspects du style, des flexbox, de la gestion d'état avec Redux, un architecte comprend mieux les contraintes du développement. La connaissance de la publication des applications ajoute un plus. Ce cours est très utile pour une personne souhaitant devenir architecte d'applications mobiles, car il donne une compréhension technique plus approfondie. Bien que ce ne soit qu'une partie des connaissances nécessaires, il est très utile.
See salaries and explore the career path for Architecte d'applications mobiles
Développeur JavaScript Front-End
Un développeur JavaScript front-end crée des interfaces utilisateur interactives pour le web et les applications. Ce cours, bien que centré sur le développement mobile avec React Native, permet de renforcer les fondamentaux en JavaScript et en React. Les concepts et les compétences acquises, notamment sur les composants, les hooks et la gestion d'état avec Redux, sont transférables dans le développement web. Ce cours peut être utile pour un développeur JavaScript front-end qui souhaite élargir ses compétences au développement mobile ou approfondir sa compréhension des concepts clés de React.
See salaries and explore the career path for Développeur JavaScript Front-End
Concepteur d'interface utilisateur mobile
Un concepteur d'interface utilisateur mobile se concentre sur le design de l'interface des applications. Ce cours est utile pour ce rôle, notamment en ce qui concerne le style avec React Native, les flexbox et la création de composants personnalisés. Bien que le cours n'enseigne pas directement le design d'interfaces, la compréhension des outils de développement est utile pour un concepteur. Il sera ainsi plus efficace dans sa collaboration avec les développeurs. Une personne souhaitant devenir concepteur d'interface utilisateur mobile gagnera à prendre ce cours pour comprendre les contraintes techniques.
See salaries and explore the career path for Concepteur d'interface utilisateur mobile
Chef de Projet Mobile
Un chef de projet mobile supervise la création d'applications mobiles. Bien que ce cours ne vous forme pas directement à la gestion de projet, il vous permettra d'acquérir une compréhension approfondie du développement d'applications avec React Native. Cette connaissance technique fera de vous un chef de projet mobile plus efficace, car vous comprendrez mieux les enjeux et les défis du développement. Ce cours vous aidera à mieux communiquer avec les équipes de développement et à prendre des décisions éclairées. Ce cours peut être utile pour quelqu'un qui souhaite devenir chef de projet mobile, car il comble un manque de compréhension technique.
See salaries and explore the career path for Chef de Projet Mobile
Testeur d'applications mobiles
Un testeur d'applications mobiles assure la qualité des applications en identifiant les bugs et en vérifiant leur fonctionnement. Ce cours, bien qu'axé sur le développement, permet de mieux comprendre l'architecture et le fonctionnement d'une application React Native. Cela facilite le test puisque la personne comprend mieux la structure des applications. Un testeur comprendra comment les composants sont construits et comment les données sont gérées à l'aide de Redux. Ce cours peut être utile pour quelqu'un qui souhaite devenir testeur d'applications mobiles afin d'acquérir des connaissances techniques et de mieux maîtriser son métier.
See salaries and explore the career path for Testeur d'applications mobiles
Spécialiste en Intégration de Systèmes Mobiles
Un spécialiste en intégration de systèmes mobiles est responsable de l'intégration d'applications mobiles avec d'autres systèmes et plateformes. Bien que ce cours porte principalement sur le développement d'applications avec React Native, il fournit des connaissances essentielles sur les architectures et les flux de données. La gestion de l'état avec Redux et la communication avec les API sont des compétences utiles. Ce cours peut être utile pour un spécialiste en intégration de systèmes mobiles qui doit manipuler les applications. En effet, les compétences acquises peuvent faciliter son travail et sa compréhension des systèmes mobiles.
See salaries and explore the career path for Spécialiste en Intégration de Systèmes Mobiles
Responsable de la qualité logicielle Mobile
Un responsable de la qualité logicielle mobile supervise les processus pour assurer la qualité des applications. Ce cours, bien que centré sur le développement, permet de comprendre les défis liés au développement d'applications mobiles avec React Native. La compréhension de l'architecture et des outils utilisés permet de mieux structurer les tests et les contrôles qualité. Une personne qui souhaite devenir responsable de la qualité logicielle mobile peut tirer avantage de ce cours pour une meilleure compréhension technique de l'écosystème des applications mobiles. Ce cours peut être utile pour une meilleure compréhension technique.
See salaries and explore the career path for Responsable de la qualité logicielle Mobile
Consultant en Transformation Digitale
Un consultant en transformation digitale aide les entreprises à intégrer les technologies numériques. Ce cours peut être utile, car il fournit une compréhension pratique du développement d'applications mobiles avec React Native. Ce cours aide à avoir une bonne connaissance des outils technologiques et des contraintes liés au développement des applications mobiles. La compréhension des enjeux techniques permet d'accompagner les entreprises dans leur transition vers le mobile. Ce cours est utile pour le consultant en transformation digitale qui doit comprendre l'aspect technique des projets. Cette connaissance peut apporter une valeur ajoutée aux clients.
See salaries and explore the career path for Consultant en Transformation Digitale
Développeur de jeux mobile
Un développeur de jeux mobile crée des jeux pour des plateformes comme Android et iOS. Bien que ce cours soit orienté vers le développement d'applications non-ludiques, il introduit des concepts utiles comme la manipulation de composants, la gestion de l'état et l'application de style. Les compétences acquises ici aideront un développeur de jeux, en particulier pour les interfaces utilisateurs. Ce cours peut être utile pour une personne souhaitant devenir développeur de jeux mobile, afin d'acquérir de nouvelles compétences techniques applicables aux jeux, surtout quand ceux-ci comprennent une interface.
See salaries and explore the career path for Développeur de jeux mobile

Reading list

We've selected one books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in React Native (2024) : Le guide complet (+ Redux & Hooks).
Cover image
Putting Knowledge to Work
Save
Ce livre offre une introduction complète à React Native, couvrant les bases et les concepts avancés. Il est particulièrement utile pour les développeurs qui débutent avec React Native et souhaitent approfondir leurs connaissances. Il peut servir de référence tout au long du cours et au-delà.
Putting Knowledge to Work
Paperback
Check
Putting Knowledge to Work
Kindle Edition
Check

Share

Help others find this course page by sharing it with your friends and followers:
Facebook
LinkedIn
Reddit
X
Link
Email

Similar courses

Similar courses are unavailable at this time. Please try again later.
Effort
12.5 total hours
Via
Udemy
Instructor
Farid Rehila
Language
Français
Good to know
Teaches React Native, which allows front-end developers to publish native Android and iOS applications using JavaScript, making it highly relevant for mobile app development
Explores React Native concepts, building upon a foundation of React knowledge, and is suitable for developers looking to transition to mobile app development
Covers publishing applications on the App Store and Play Store, which is a crucial step for developers aiming to release their mobile applications to the public
Utilizes Redux for state management, a widely adopted library in the React ecosystem, which is beneficial for building scalable and maintainable applications
Examines ES6 features, which are essential for modern JavaScript development and relevant for web developers transitioning to React Native
Requires installing tools like Xcode and Android Studio, which may pose a barrier for learners without MacOS or sufficient storage space
Share and help others discover this course.
Facebook LinkedIn X Reddit Link Email
Don't miss out
Enroll today to gain access to this course
Enroll in this course
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2025 OpenCourser