Faire du React Native quand on est développeur React

Introduction à React et React Native

React est une bibliothèque JavaScript (non ce n'est pas un framework !!🤬) pour construire des interfaces utilisateur. Mais ça tu le savais déjà. 

React Native, également maintenu par Facebook, permet de créer des applications mobiles pour iOS et Android en utilisant une seule base de code JavaScript. Contrairement aux applications hybrides, les applications React Native utilisent des composants natifs pour fournir une performance et une expérience utilisateur comparables à celles d'une application native.

Les différences majeures

1. Environnement d'exécution

L'une des premières différences notables est l'environnement d'exécution.

• React: Les applications React sont exécutées dans un navigateur web. Les éléments de l'application sont traduits en HTML, CSS, et JavaScript et rendus par le moteur de rendu du navigateur.
• React Native: Les applications React Native sont exécutées sur des appareils mobiles iOS et Android. Les composants React Native sont traduits en composants natifs spécifiques à la plateforme, tels que UIView pour iOS et View pour Android.

2. Éléments d'interface utilisateur

Les composants d'interface utilisateur diffèrent également.

• React: Utilise des éléments HTML comme <div>, <span>, <h1>, etc.
• React Native: Utilise des composants natifs comme <View>, <Text>, et <Image>. Ces composants abstraient les différences entre les différentes plateformes afin de permettre le développement multiplateforme.

3. Feuilles de style

La gestion des styles est une autre différence clé.

• React: Utilise des fichiers CSS ou des solutions alternatives comme Styled Components ou CSS-in-JS pour styler les composants.
• React Native: Utilise un système de styles basé sur JavaScript où les styles sont définis sous forme d'objets JavaScript. Les propriétés CSS courantes sont supportées, mais certaines propriétés spécifiques aux plateformes mobiles sont également présentes.

4. Navigation

La gestion de la navigation entre les différentes vues varie également.

• React: Utilise des bibliothèques comme React Router pour gérer la navigation en utilisant l'URL du navigateur.
• React Native: Utilise des bibliothèques comme React Navigation ou React Native Navigation, qui sont adaptées pour la navigation sur mobile et tirent parti des composants natifs de navigation.

Exemples de code détaillés

Exemple 1 : Création d'un composant de base

React :

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Bonjour de React</h1>
    </div>
  );
}

export default App;

‍

React Native :

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Bonjour de React Native</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  text: {
    fontSize: 20,
  },
});

‍

Exemple 2 : Gestion des styles

En React, tu peux définir les styles directement dans des fichiers CSS ou utiliser des bibliothèques pour intégrer les styles dans vos composants.

React :

.App {
  text-align: center;
}

.App h1 {
  color: blue;
}

En React Native, les styles sont définis à l'intérieur de vos composants en utilisant l'API StyleSheet.

React Native :

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  text: {
    color: 'blue',
    fontSize: 20,
  },
});

‍

Exemple 3 : Navigation

Naviguer entre les pages est une tâche courante dans toute application. En React et en React Native, cette tâche est réalisée de manière différente.

React avec React Router :

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

function Home() {
  return <h2>Accueil</h2>;
}

function About() {
  return <h2>À propos</h2>;
}

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Accueil</Link>
            </li>
            <li>
              <Link to="/about">À propos</Link>
            </li>
          </ul>
        </nav>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
}

export default App;

‍

React Native avec React Navigation :

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { View, Text, Button } from 'react-native';

function HomeScreen({ navigation }) {
  return (
    <View>
      <Text>Accueil</Text>
      <Button title="Go to About" onPress={() => navigation.navigate('About')} />
    </View>
  );
}

function AboutScreen() {
  return (
    <View>
      <Text>À propos</Text>
    </View>
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="About" component={AboutScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

‍

Exemple 4 : Appels réseau et gestion de l'état

Les appels réseau et la gestion de l'état sont également similaires mais nécessitent quelques ajustements pour les environnements mobiles.

React :

import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  if (!data) {
    return <div>Chargement...</div>;
  }

  return (
    <div>
      <h1>Data fetched from API</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default App;

‍

React Native :

import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, ActivityIndicator } from 'react-native';

export default function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  if (!data) {
    return (
      <View style={styles.container}>
        <ActivityIndicator size="large" color="#0000ff" />
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <Text>Data fetched from API:</Text>
      <Text>{JSON.stringify(data, null, 2)}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  text: {
    fontSize: 16,
    textAlign: 'center',
  },
});

‍

Conclusion

Quand on vient de React, il n'est pas très difficile de se mettre à React Native. Les plus grandes difficultés ne viendrons pas du langage mais plutôt du reste. Développer, débuguer, tester sur des mobiles ou simulateur, c'est pas forcément simple tout de suite.

C'est pourquoi je te conseille de lire mes autres articles sur le sujet.