📱 Qu’est-ce que React Native ?

React Native est un framework open-source développé par Facebook qui permet de créer des applications mobiles pour iOS et Android à partir d’un seul code en JavaScript. Contrairement aux solutions classiques où il faut coder deux fois (une fois pour iOS en Swift/Objective-C et une fois pour Android en Java/Kotlin), React Native permet de partager le même code pour les deux plateformes.

👉 Si tu connais un peu HTML/CSS/JavaScript ou même React.js, tu as déjà un bon point de départ !

🎯 Pourquoi apprendre React Native ?

• ✅ Un seul code, deux applis : gagne du temps et de l’énergie.
• ✅ Performance native : l’application est rapide comme une vraie app native.
• ✅ Communauté active : beaucoup de ressources, bibliothèques, et d’aide en ligne.
• ✅ Flexibilité : tu peux aussi intégrer du code natif si nécessaire.

🛠️ De quoi as-tu besoin pour commencer ?

Voici ce qu’il faut pour développer avec React Native :

1. Avoir Node.js installé

👉 Télécharge-le ici : https://nodejs.org

2. Installer Expo CLI (recommandé pour les débutants)

npm install -g expo-cli

3. Créer ton premier projet

npx create-expo-app MonApp
cd MonApp
npx expo start

4. Tester l’appli sur ton téléphone

• Télécharge l’app Expo Go depuis le Play Store ou App Store.
• Scanne le QR code affiché dans le terminal avec ton téléphone.

👨‍💻 Comprendre le Code de Base

Voici un exemple de code de base dans App.js :

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Bienvenue sur React Native !</Text>
    </View>
  );
}

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

Ce que tu vois ici :

• View : c’est comme une div en HTML, un conteneur.
• Text : pour afficher du texte.
• StyleSheet : permet de styliser tes éléments, comme du CSS.

📚 Concepts Clés à Connaître

1. Composants : Ce sont des blocs de ton interface utilisateur.
2. Props : Données qu’on transmet à un composant.
3. State : Données internes à un composant, qui peuvent changer.
4. Hooks (useState, useEffect) : Pour gérer l’état et les effets.

💡 Exemple : Un bouton qui change du texte

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

export default function App() {
  const [message, setMessage] = useState("Bonjour !");

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>{message}</Text>
      <Button title="Clique-moi" onPress={() => setMessage("Tu as cliqué !")} />
    </View>
  );
}

🧠 Conseils pour apprendre efficacement

• 👣 Commence petit : fais des petites apps (ex : calculatrice, todo-list).
• 📖 Lis la doc officielle : https://reactnative.dev
• 🎥 Regarde des tutos vidéo pour visualiser.
• 🤝 Rejoins des groupes ou forums (Discord, Reddit, etc.)

React Native est une excellente porte d’entrée dans le monde du développement mobile. Si tu sais faire un site web, tu peux déjà faire une app mobile. Avec Expo, tu n’as même pas besoin d’un Mac ou d’Android Studio pour tester !

Prêt à créer ta première appli ? Lance-toi avec React Native !