Les bases à connaître

Cette page explique les notions de React et React Native dont tu as besoin pour lire le code. Chaque exemple vient de l'app.

Un composant, c'est une fonction

Un composant est une fonction qui renvoie ce qu'il faut afficher. Son nom commence par une majuscule. Voici une version simplifiée de src/components/profile-header.tsx :

export function ProfileHeader({ initials, name, subtitle }: ProfileHeaderProps) {
  return (
    <View>
      <Avatar initials={initials} />
      <Text size={20} weight="semibold">{name}</Text>
      <Text color="textMuted">{subtitle}</Text>
    </View>
  );
}

On l'utilise ensuite comme une balise : <ProfileHeader initials="EH" name="Elias" subtitle="Manager" />.

Le code qui ressemble à du HTML s'appelle du JSX. Les accolades {...} permettent d'y mettre du JavaScript.

Les props : ce qu'on donne au composant

Les valeurs passées entre les balises (initials, name...) sont les props. Le composant ne peut pas les modifier, il les lit. Avec TypeScript, on décrit leur forme :

type ProfileHeaderProps = {
  initials: string;
  name: string;
  subtitle: string;
};

L'état : la mémoire du composant

Quand une valeur doit changer à l'écran (le texte d'un champ, une feuille ouverte ou fermée), on utilise useState.

const [email, setEmail] = useState('');

<TextField value={email} onChangeText={setEmail} />

email est la valeur actuelle, setEmail la change. À chaque changement, React redessine le composant avec la nouvelle valeur. On ne modifie jamais l'écran à la main : on change l'état et React s'occupe du reste.

Les hooks

Les fonctions qui commencent par use sont des hooks. Elles donnent un comportement à un composant :

Hook	Ce qu'il fait
useState	Une valeur qui peut changer
useEffect	Lancer quelque chose après l'affichage (une requête, un minuteur)
useMemo, useCallback	Garder un calcul ou une fonction tant que ses entrées ne changent pas
useContext	Lire une valeur partagée (voir plus bas)
useRef	Garder une valeur sans redessiner (une animation, un compteur)

L'app a aussi ses propres hooks dans src/hooks/ : useQuery, useToday, useNow... Un hook maison est simplement une fonction qui utilise d'autres hooks.

Règle des hooks

Un hook s'appelle toujours en haut du composant, jamais dans un if ou une boucle. React les reconnaît par leur ordre d'appel.

Le contexte : partager sans tout passer à la main

L'utilisateur connecté sert dans presque tous les écrans. Plutôt que de le passer de composant en composant, on le met dans un contexte. Un Provider place la valeur, et n'importe quel composant en dessous la lit.

// src/app/_layout.tsx
<SessionProvider>
  <RootStack />
</SessionProvider>

// n'importe quel écran
const user = useCurrentUser();

React Native : pas de HTML

React Native ressemble à React pour le web, mais les balises sont différentes :

Web	React Native
<div>	<View>
<p>, <span>	<Text> (tout texte doit être dans un <Text>)
<input>	<TextInput>
<button>, onClick	<Pressable>, onPress
CSS dans un fichier	StyleSheet.create({...}) dans le même fichier
Défilement automatique	<ScrollView> explicite

Les styles s'écrivent en objets JavaScript, avec des noms en camelCase et des nombres sans unité :

const styles = StyleSheet.create({
  body: { gap: 24, paddingTop: 16, paddingHorizontal: 16 },
});

La mise en page utilise flexbox, mais en colonne par défaut (au web, c'est en ligne).

Expo : la boîte à outils

React Native seul demande Xcode et Android Studio. Expo simplifie tout :

• npx expo start lance un serveur de développement ;
• l'application Expo Go sur ton téléphone scanne le QR code et lance l'app ;
• chaque sauvegarde de fichier met à jour l'app en direct ;
• les fonctions du téléphone (vibrations, stockage chiffré, partage) sont des paquets expo-* prêts à l'emploi.

TypeScript

Le code est en TypeScript : JavaScript avec des types. Si tu écris user.emial au lieu de user.email, l'éditeur le souligne avant même de lancer l'app. Les types partagés (utilisateur, période de travail, équipe...) sont dans src/types/api.ts.

Pour tout vérifier d'un coup :

npx tsc --noEmit

async / await

Une requête réseau prend du temps. Une fonction async peut attendre un résultat avec await sans bloquer l'app :

const user = await login(email, password);

Si la requête échoue, une erreur est levée. On la rattrape avec try { ... } catch (error) { ... }.