Debuter avec React Native

Pourquoi React Native ?

React Native est un framework open-source développé par Facebook pour créer des applications mobiles natively (c'est-à-dire compilées en code natif) pour iOS et Android. Il utilise JavaScript avec la bibliothèque React, ce qui rend le développement plus rapide et plus simple que de travailler directement avec du code natif.

Un cas d'usage concret : Imaginez que vous travaillez sur une application qui doit être utilisée sur les deux plateformes mobiles (iOS et Android). Vous ne voulez pas passer des heures à écrire le même code pour chaque système d'exploitation. Avec React Native, vous pouvez écrire la plupart de votre code une seule fois en JavaScript et compiler ensuite le code pour iOS et Android.

Prerequis

Pour suivre ce tutoriel, voici les connaissances et outils nécessaires :

• Connaissances en JavaScript : React Native est basé sur JavaScript, donc un bon niveau de compréhension du langage est nécessaire.
• IDE ou éditeur de code : Vous pouvez utiliser n'importe quel IDE ou éditeur de code qui supporte JavaScript. Les recommandations sont Visual Studio Code (VSCode), WebStorm, ou Atom.

Outils à installer

1. Node.js et npm : React Native nécessite Node.js et npm (Node Package Manager) pour gérer les dépendances et exécuter des commandes.

   # Installer Node.js et npm via le site officiel: https://nodejs.org/en/download/
   

2. Yarn : C'est une autre gestionnaire de paquets qui peut être utilisé en lieu et place de npm.

   npm install -g yarn
   

3. React Native CLI : Ce tool est nécessaire pour créer, gérer et déployer les projets React Native.

   npm install -g react-native-cli
   

4. Android Studio et SDK (pour Android) : Pour développer pour Android, vous aurez besoin de l'Android Studio avec le SDK.

   • Téléchargez et installez Android Studio à partir du site officiel: https://developer.android.com/studio

5. Xcode (pour iOS) : Si vous voulez également développer pour iOS, téléchargez Xcode depuis le Mac App Store.

6. Emulateur ou appareil physique : Vous aurez besoin d'un émulateur Android (comme AVD Manager dans Android Studio) ou un appareil iOS pour tester votre application.

Concepts fondamentaux

Composants React Native

Les composants sont les blocs de construction de React Native. Ils sont des fonctions JavaScript qui retournent du JSX (JavaScript XML), une syntaxe similaire à HTML.

## Importation des bibliothèques nécessaires
import React from 'react';
import { View, Text } from 'react-native';

## Définition du composant App
const App = () => {
  return (
    <View style=flex: 1, justifyContent: 'center', alignItems: 'center'>
      <Text>Bienvenue sur React Native !</Text>
    </View>
  );
};

export default App;

Styles

Les styles sont appliqués aux composants à l'aide de la bibliothèque StyleSheet qui est spécifique à React Native.

## Importation des librairies nécessaires
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

## Définition du style
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 20,
    color: 'blue',
  },
});

## Définition du composant App
const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Bienvenue sur React Native !</Text>
    </View>
  );
};

export default App;

Événements

React Native utilise des événements qui ressemblent aux gestionnaires d'événements de HTML.

## Importation des librairies nécessaires
import React from 'react';
import { View, Text, Button } from 'react-native';

## Définition du composant App
const App = () => {
  const handleClick = () => {
    alert('Bouton cliqué');
  };

  return (
    <View style=flex: 1, justifyContent: 'center', alignItems: 'center'>
      <Button title="Cliquez moi" onPress={handleClick} />
    </View>
  );
};

export default App;

Mise en pratique : Projet fil rouge

Créer un gestionnaire de tâches

Étape 1 : Initialiser le projet

## Créer un nouveau projet React Native
npx react-native init TodoApp
cd TodoApp

Étape 2 : Installer les dépendances

## Installer des dépendances supplémentaires (si nécessaire)
yarn add @react-navigation/native @react-navigation/stack

Étape 3 : Configurer la navigation

Créez un fichier navigation.js :

// Importation des librairies nécessaires
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './HomeScreen';
import TaskDetailScreen from './TaskDetailScreen';

## Création de l'instance de NavigationContainer
const Stack = createStackNavigator();

export default function AppNavigator() {
  return (
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="TaskDetail" component={TaskDetailScreen} />
    </Stack.Navigator>
  );
}

Étape 4 : Créer les composants

Créez un fichier HomeScreen.js :

// Importation des librairies nécessaires
import React, { useState } from 'react';
import { View, Text, Button, TextInput } from 'react-native';

## Définition du composant HomeScreen
const HomeScreen = ({ navigation }) => {
  const [tasks, setTasks] = useState([]);
  const [taskText, setTaskText] = useState('');

  const handleAddTask = () => {
    if (taskText.trim() !== '') {
      setTasks([...tasks, { text: taskText, completed: false }]);
      setTaskText('');
    }
  };

  return (
    <View style=flex: 1, padding: 20>
      <TextInput
        value={taskText}
        onChangeText={(text) => setTaskText(text)}
        placeholder="Ajoutez une tâche"
        style=height: 40, borderColor: 'gray', borderWidth: 1
      />
      <Button title="Ajouter" onPress={handleAddTask} />
      {tasks.map((task, index) => (
        <View key={index} style=flexDirection: 'row', alignItems: 'center'>
          <Text>{task.text}</Text>
          <Button
            title={task.completed ? 'Marquer comme non-fini' : 'Marquer comme fini'}
            onPress={() =>
              setTasks(
                tasks.map((t, i) => (i === index ? { ...t, completed: !t.completed } : t))
              )
            }
          />
        </View>
      ))}
    </View>
  );
};

export default HomeScreen;

Créez un fichier TaskDetailScreen.js :

// Importation des librairies nécessaires
import React from 'react';
import { View, Text } from 'react-native';

## Définition du composant TaskDetailScreen
const TaskDetailScreen = ({ route }) => {
  const { task } = route.params;

  return (
    <View style=flex: 1, justifyContent: 'center', alignItems: 'center'>
      <Text>{task.text}</Text>
    </View>
  );
};

export default TaskDetailScreen;

Étape 5 : Utiliser la navigation

Modifiez le fichier App.js pour utiliser la navigation :

// Importation des librairies nécessaires
import React from 'react';
import AppNavigator from './navigation';

## Définition du composant App
const App = () => {
  return <AppNavigator />;
};

export default App;

Étape 6 : Exécuter le projet

## Pour Android
npx react-native run-android

## Pour iOS
npx react-native run-ios

Erreurs fréquentes et debugging

Erreur 1 : "Invariant Violation: View: Unknown prop style on element type"

Code incorrect :

<View style="flex: 1, justifyContent: 'center', alignItems: 'center'">

Code correct :

<View style=flex: 1, justifyContent: 'center', alignItems: 'center'>

Erreur 2 : "Invariant Violation: Text strings must be rendered within a component"

Code incorrect :

<Text>Bienvenue sur React Native !</Text>

Code correct :

<View style=flex: 1, justifyContent: 'center', alignItems: 'center'>
  <Text>Bienvenue sur React Native !</Text>
</View>

Erreur 3 : "Invariant Violation: Attempted to call a method named setState on an object with no such method"

Code incorrect :

this.setState({ tasks: [...tasks, { text: taskText, completed: false }] });

Code correct :

setTasks([...tasks, { text: taskText, completed: false }]);

Pour aller plus loin

1. Comprendre les Hooks avancés : Apprenez à utiliser des hooks comme useEffect et useCallback.

   • Documentation officielle

2. Utiliser les Contexts : Découvrez comment partager des données entre composants sans avoir à les passer manuellement via les props.

   • Documentation officielle

3. Intégrer des bibliothèques tierces : Apprenez à utiliser des bibliothèques comme React Navigation, Redux ou Axios pour ajouter des fonctionnalités complexes à votre application.

   • React Navigation
   • Redux
   • Axios

Défi pratique

Créez une application simple qui affiche une liste de contacts. Chaque contact doit avoir un nom et un numéro de téléphone. Ajoutez la possibilité d'ajouter de nouveaux contacts en utilisant un formulaire.