Apprendre React Native : roadmap complete

Prerequis avant de commencer

Avant de plonger dans l'apprentissage de React Native, il est important d'avoir une certaine base en programmation et en développement web. Voici ce que vous devez savoir et installer avant de commencer :

• Connaissances en JavaScript : React Native est basé sur JavaScript ES6+ (ECMAScript 2015). Il est donc crucial de maîtriser les concepts de base comme les fonctions, les objets, les tableaux, les promesses et les asynchronisme.
• Connaissances en CSS : Le style des composants React Native peut être défini avec du CSS. Comprendre comment styliser des éléments est un atout majeur.
• Environnement de développement (IDE) : Il est recommandé d'utiliser une IDE comme Visual Studio Code, qui dispose d'une bonne intégration avec les outils de React Native.
• Node.js et npm/yarn : Ces outils sont nécessaires pour installer et gérer les dépendances de votre projet. Node.js est le runtime JavaScript côté serveur et npm ou yarn sont des gestionnaires de paquets.
• Xcode (pour iOS) ou Android Studio (pour Android) : Si vous souhaitez développer sur des appareils mobiles, vous aurez besoin d'un environnement de développement spécifique pour chaque plateforme.

Phase 1 : Les fondamentaux (0-2 mois)

La première phase consiste à acquérir les bases de React Native. Voici ce qu'il faut apprendre en premier :

Concepts de base

• Création d'une application : Comment créer un nouveau projet React Native et lancer une application.

  npx react-native init MonProjet
  

• Composants : Les composants sont les blocks de construction de votre application. Ils sont des fonctions ou des classes qui rendent du JSX.

  import React from 'react';
  import { Text, View } from 'react-native';
  
  const HelloWorld = () => {
    return (
      <View>
        <Text>Hello World !</Text>
      </View>
    );
  };
  
  export default HelloWorld;
  

• Props : Les props sont des données passées d'un composant parent à un composant enfant.

  const Greeting = ({ name }) => {
    return (
      <Text>Hello, {name} !</Text>
    );
  };
  

• State : Le state est une variable qui permet de gérer les données mutables et de déclencher des re-rendus.

  import React, { useState } from 'react';
  import { Text, View, Button } from 'react-native';
  
  const Counter = () => {
    const [count, setCount] = useState(0);
  
    return (
      <View>
        <Text>Count: {count}</Text>
        <Button title="Increment" onPress={() => setCount(count + 1)} />
      </View>
    );
  };
  
  export default Counter;
  

Ressources recommandées

• Docs officielles : https://reactnative.dev/docs/getting-started
• Cours en ligne : Coursera, Udemy, ou FreeCodeCamp offrent des cours gratuits et payants sur React Native.
• Chaine YouTube : Traversy Media (https://www.youtube.com/channel/UC8butISFwT0WdsK9jP3pXeQ)

Mini-projet à réaliser

Créez une application simple qui affiche une liste de todos. Utilisez des composants, props, et state pour ajouter et supprimer des todos.

Phase 2 : Niveau intermédiaire (2-4 mois)

Lorsque vous êtes confortable avec les concepts de base, il est temps d'approfondir votre connaissance en React Native. Voici ce qui devrait être abordé :

Concepts avancés

• Navigation : Utilisez des bibliothèques comme React Navigation pour naviguer entre différentes screens.

  npm install @react-navigation/native
  npx expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
  

• Styled Components : Utilisez des bibliothèques comme styled-components pour styliser vos composants de manière plus modulaire et maintenable.

  npm install styled-components
  

• React Context API : Pour gérer les états globaux dans votre application.

Projet plus ambitieux

Créez une application complète, par exemple un gestionnaire de tâches ou un petit jeu. Cette expérience vous permettra d'appliquer tous les concepts que vous avez appris et de voir comment ils s'intègrent ensemble.

Phase 3 : Niveau avancé (4-6 mois)

Dans cette phase, vous devriez être prêt à approfondir les aspects plus techniques et architecturaux de React Native :

Patterns

• Hooks personnalisés : Créer des hooks pour réutiliser la logique entre composants.

  import { useState } from 'react';
  
  const useCounter = (initialCount) => {
    const [count, setCount] = useState(initialCount);
  
    const increment = () => setCount(count + 1);
    const decrement = () => setCount(count - 1);
  
    return { count, increment, decrement };
  };
  
  export default useCounter;
  

Architecture

• Navigation : Configurer une architecture de navigation claire et organisée.
• Styled Components : Créer un thème global pour votre application avec styled-components.

Testing

• React Native Testing Library : Pour tester vos composants React Native.

  npm install @testing-library/react-native @testing-library/jest-native
  

Performance

• Profiling : Utiliser les outils de profiling de React Native pour identifier et améliorer les performances.
• Memoization : Utiliser des hooks comme useMemo et useCallback pour optimiser le rendu.

Projet professionnel à montrer en portfolio

Créez une application professionnelle qui pourrait être ajoutée à votre portfolio. Cela peut être un portefeuille de crypto-monnaies, un outil d'analyse de données, ou tout autre projet qui montre vos compétences et votre créativité.

Phase 4 : Expertise (6-12 mois)

Quand vous êtes confortable avec React Native, il est temps d'acquérir des compétences supplémentaires pour devenir un expert :

Contributions open source

• Contribuez à des projets open source en améliorant des fonctionnalités existantes ou en ajoutant de nouvelles fonctionnalités.
• Fork les repositories et faites des pull requests.

Spécialisation

• Choisissez une domaine spécifique dans React Native, par exemple le développement d'applications mobiles pour les équipes d'entreprise, l'intégration avec des backends, ou la création d'applications VR/AR.
• Suivez des blogs et des podcasts dédiés à ce domaine pour rester à jour.

Comment se demarquer

• Créez une présence sociale sur LinkedIn et autres réseaux sociaux professionnels.
• Partagez vos projets en ligne, que ce soit sur GitHub ou d'autres plateformes.
• Offrez des formations ou des cours de React Native pour les autres dans votre communauté.

Erreurs à éviter

Voici 5 erreurs classiques des débutants en React Native :

1. Trop d'optimisation trop tôt : Ne vous inquiétez pas de la performance avant que vous n'aurez pas une application fonctionnelle.
2. Pas assez de tests : Assurez-vous de tester votre application à chaque étape du développement pour éviter les bugs plus tard.
3. Manque de documentation et de commentaires : Documentez votre code et utilisez des commentaires pour expliquer la logique complexe.
4. Ne pas suivre une structure d'architecture claire : Organisez votre code en utilisant un modèle structuré comme le pattern MVC ou MVI.
5. Ignorer les erreurs de console : Les erreurs de console sont souvent des indices importants pour comprendre ce qui ne va pas dans votre application.

Ressources recommandées

Voici la liste des top 5 livres, cours en ligne et chaînes YouTube à suivre :

Livres

1. "React Native for the Web: Building Universal UIs with React and React Native" par Scott Jehl.
2. "Building Cross-Platform Mobile Applications with React Native" par Mike Bifulco.
3. "The Road to React Native" par David Kimsey.
4. "React Native Development: The Complete Guide" par Anthony Gore.

Cours en ligne

1. Udemy : "Complete React Native Course - Build 25 Apps"
2. Coursera : "React Native: Building Native Mobile Applications"
3. FreeCodeCamp : "React Native for Beginners"

Chaînes YouTube

1. Traversy Media (https://www.youtube.com/channel/UC8butISFwT0WdsK9jP3pXeQ)
2. Dan Abramov (https://www.youtube.com/c/DanAbramov)
3. Reactiflows (https://www.youtube.com/user/reactiflows)

En suivant cette roadmap, vous serez bien préparé pour devenir un expert en React Native et réussir dans votre carrière de développeur mobile.