Bases indispensables avant React Native 🚀

Avant de construire une cabane dans les arbres, il faut savoir utiliser un marteau et une scie. React Native, c'est pareil : avant de coder ton app mobile, il faut connaître 3 outils essentiels. Pas de panique, on va les découvrir ensemble ! 🛠️

⚡ 1. JavaScript moderne — Les raccourcis pour aller plus vite

Imagine que tu dois écrire "bonjour" 100 fois. Tu peux écrire à la main chaque lettre (lent 😴) ou inventer un raccourci comme "bjr → bonjour" (rapide ⚡). Le JavaScript moderne, c'est pareil : des raccourcis pour coder la même chose en moins de lignes !

🏹 Les fonctions flèchées (arrow functions)

// 📦 Ancienne façon (longue) :
function addition(a, b) {
  return a + b;
}

// ⚡ Nouvelle façon (rapide) :
const addition = (a, b) => a + b;

// Les deux font EXACTEMENT la même chose !
console.log(addition(3, 5)); // → 8

🧠 Astuce : la flèche => remplace function ET return en même temps. C'est comme un toboggan : la valeur glisse directement à la sortie !

🎁 Le destructuring — Ouvrir une boîte cadeau

// Sans destructuring 😩 :
const nom = utilisateur.nom;
const age = utilisateur.age;

// Avec destructuring 🎉 :
const { nom, age } = utilisateur;
// → PAF ! nom = "Alice", age = 15, sortis d'un coup !

🧠 Astuce : les accolades {} à gauche du = disent à JavaScript "ouvre la boîte et sors les valeurs !"

🔄 Spread et Rest — La photocopieuse et le sac magique

// 📋 Spread (... = copier) : comme une photocopieuse
const fruits = ["🍎", "🍌", "🍒"];
const panier = [...fruits, "🥝"];  // copie + ajoute un kiwi

// 🎒 Rest (... = rassembler) : comme un sac qui attrape tout
function premierEtReste(premier, ...lesAutres) {
  console.log(premier);    // premier élément
  console.log(lesAutres);  // tout le reste dans un tableau
}
premierEtReste("🐱", "🐶", "🐰", "🦊");
// → "🐱"   et   ["🐶", "🐰", "🦊"]

⏳ async/await — Faire la queue à la cantine

async function chargerProfil(userId) {
  const reponse = await fetch("https://api.exemple.com/user/" + userId);
  const donnees = await reponse.json();
  return donnees;
}

const profil = await chargerProfil(42);
console.log(profil);  // → { nom: "Alice", age: 25, ... }

🧠 Astuce : async transforme ta fonction en "attentive", await dit "patientons ici".

🛡️ 2. TypeScript — Le videur qui vérifie les cartes d'identité

Imagine une boîte de nuit : un videur regarde ta carte d'identité pour vérifier que tout est en ordre avant de te laisser entrer. 🚪

TypeScript, c'est exactement ça : il vérifie que tes données ont les bons champs AVANT que ton code ne s'exécute. Fini les surprises "oups, j'ai mis un texte là où il fallait un nombre" ! 🐛→✅

// 👮 Le videur (interface) dit :
// "Pour entrer, tu dois avoir un id (nombre), un nom (texte) et un email (texte)"
interface CarteIdentite {
  id: number;
  nom: string;
  email: string;
}

// ✅ Carte valide
const bonneCarte: CarteIdentite = { id: 42, nom: "Alice", email: "alice@ex.com" };

// ❌ Carte REFUSÉE : id="abc" n'est pas un nombre !
// const mauvaiseCarte: CarteIdentite = { id: "abc", nom: "Bob", email: "bob@ex.com" };
// → 🚫 ERREUR avant même d'exécuter !

🧠 Astuce : les ? rendent un champ optionnel. age?: number = "t'as le droit de ne pas mettre d'âge".

🧱 3. React — Des briques LEGO réutilisables

Tu as déjà joué avec des LEGO ? Chaque brique a une forme précise, et tu peux la réutiliser pour faire des constructions différentes. 🧩

En React, un composant c'est pareil : tu crées UNE FOIS une "brique" et tu t'en sers partout !

' 🧩 COMPOSANT = une fonction qui fabrique un bout d'écran
'    function MaCarte(props) { return <View>...</View>; }
'    → Comme un moule à gâteau : tu verses la pâte, tu obtiens un gâteau

' 📦 PROPS = les paramètres qu'on donne à un composant
'    <MaCarte titre="Bonjour" couleur="rouge" />
'    → Comme les instructions sur une boîte de gâteau : tu changes le goût

' 🔄 STATE = la mémoire du composant (ce qui peut changer)
'    const [compteur, setCompteur] = useState(0);
'    → Comme un score dans un jeu vidéo : quand il change, l'écran se met à jour

' 🎣 HOOKS = des fonctions spéciales pour ajouter des super-pouvoirs
'    useState, useEffect, useContext...
'    → Comme des accessoires pour ton LEGO : roues, ailes, fusée...

Exemple concret : un compteur de clics 🔢

import { useState } from "react";

function Compteur() {
  const [compte, setCompte] = useState(0);

  return (
    <div>
      <p>Tu as cliqué {compte} fois !</p>
      <button onClick={() => setCompte(compte + 1)}>+1</button>
    </div>
  );
}

🧠 Comprends bien : tu cliques → setCompte change la mémoire → React re-affiche le composant avec la nouvelle valeur. Tout est automatique ! ⚡

📱 4. Correspondance Web → React Native

Tu connais déjà le HTML. React Native utilise les MÊMES idées mais avec des noms différents. Voici la table de traduction :

' 🌐 Web          →    📱 React Native
' ─────────────────────────────────────
' <div>           →    <View>              (boîte/contour)
' <p><span>       →    <Text>              (texte)
' <button>        →    <TouchableOpacity>  (bouton cliquable)
' <input>         →    <TextInput>         (zone de saisie)
' <img>           →    <Image>             (image)
' <ul><li>        →    <FlatList>          (liste qui défile)
' className=""    →    style={{ }}         (style en objet JS)
' onClick         →    onPress             (clic au doigt)

En résumé : si tu sais faire du HTML, tu sais déjà 50% de React Native ! 🎉

🧭 Schéma récapitulatif

🎯 Exercices pour toi

1. ES6 🏹 : prends un tableau [{nom, note}] et garde seulement ceux qui ont la moyenne (>10). Utilise filter + destructuring pour extraire note directement. Astuce : ({ note }) => note > 10

2. TypeScript 🛡️ : crée une interface Produit avec id, nom, prix (nombre) et stock (nombre). Écris une fonction calculerTVA(produit) qui retourne le prix avec 20% de TVA.

3. React 🧱 : écris un composant Bienvenue qui affiche un message et un bouton "Changer le message". Au clic, le message change. Utilise useState pour stocker le message !