0Pricing
React Academy · Leçon

Composants fondamentaux de React Native et DOM web

Mettez en correspondance View, Text, Image et ScrollView avec leurs équivalents DOM et comprenez le modèle de pont.

Composants fondamentaux de React Native et DOM web est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.

Pourquoi n’y a-t-il pas de HTML dans React Native ?

React Native effectue le rendu vers des composants d’interface natifs iOS et Android, et non vers un DOM de navigateur. Il n’existe pas de <div>, de <p> ou de <img> : chaque plateforme possède ses propres primitives natives.

View — L’équivalent de div

View est le conteneur de mise en page le plus élémentaire de React Native. Il correspond à UIView sur iOS et à android.view.View sur Android. Considérez-le comme un <div> qui ne peut pas contenir directement du texte.

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

function Card() {
  return (
    <View style={styles.card}>
      {/* children go here */}
    </View>
  );
}

const styles = StyleSheet.create({ card: { padding: 16, borderRadius: 8 } });

Text — L’équivalent de p/span

Text est obligatoire pour tout texte visible. Contrairement au Web, vous ne pouvez pas placer directement une chaîne dans un View : elle doit être encadrée par <Text>.

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

function Greeting() {
  return (
    <View>
      <Text style={{ fontSize: 24, fontWeight: 'bold' }}>Hello!</Text>
      <Text>Welcome to React Native.</Text>
    </View>
  );
}

Image — L’équivalent de img

Image effectue le rendu des images. Utilisez la propriété source avec un require() pour les ressources locales ou un objet { uri: '...' } pour les images réseau.

import { Image } from 'react-native';

// Local asset:
<Image source={require('./assets/logo.png')} style={{ width: 100, height: 100 }} />

// Network image (must provide dimensions):
<Image source={{ uri: 'https://example.com/photo.jpg' }} style={{ width: 200, height: 150 }} />

ScrollView — L’équivalent de overflow:scroll

ScrollView est un conteneur défilable. Contrairement au Web, vous devez l’utiliser explicitement : View ne défile pas. Pour les longues listes, préférez FlatList.

import { ScrollView, Text } from 'react-native';

function Article({ paragraphs }) {
  return (
    <ScrollView>
      {paragraphs.map((p, i) => <Text key={i}>{p}</Text>)}
    </ScrollView>
  );
}

FlatList — La liste virtualisée

FlatList n’effectue le rendu que des éléments visibles et recycle ceux qui sont hors écran, ce qui est essentiel pour les performances avec de grands ensembles de données.

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

function UserList({ users }) {
  return (
    <FlatList
      data={users}
      keyExtractor={u => u.id}
      renderItem={({ item }) => <Text>{item.name}</Text>}
    />
  );
}

TouchableOpacity — L’équivalent de button

TouchableOpacity (et Pressable dans les versions plus récentes de RN) ajoute un retour tactile à n’importe quelle vue. La propriété onPress gère les pressions.

import { TouchableOpacity, Text } from 'react-native';

function Button({ onPress, title }) {
  return (
    <TouchableOpacity onPress={onPress} activeOpacity={0.7}>
      <Text>{title}</Text>
    </TouchableOpacity>
  );
}

TextInput — L’équivalent de input

TextInput est le champ de saisie contrôlé. Il prend en charge value, onChangeText, placeholder et les types de clavier.

import { TextInput, useState } from 'react-native';

function SearchBar() {
  const [query, setQuery] = useState('');
  return (
    <TextInput
      value={query}
      onChangeText={setQuery}
      placeholder="Search..."
      keyboardType="default"
    />
  );
}

ActivityIndicator — L’indicateur de chargement

ActivityIndicator est l’indicateur de chargement natif. Sur iOS, il s’agit d’un indicateur circulaire ; sur Android, d’un indicateur circulaire de progression Material.

import { ActivityIndicator, View } from 'react-native';

<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
  <ActivityIndicator size="large" color="#4f46e5" />
</View>

SafeAreaView

SafeAreaView ajoute automatiquement des marges internes pour les encoches de l’appareil, les barres d’état et les indicateurs d’accueil sur iOS et Android.

import { SafeAreaView } from 'react-native-safe-area-context';

export default function App() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <MyScreen />
    </SafeAreaView>
  );
}

Modal

Modal affiche une superposition au-dessus de l’application. La propriété visible contrôle son affichage.

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

<Modal visible={showModal} animationType="slide" transparent={true}>
  <View style={styles.overlay}>
    <View style={styles.dialog}>
      <Text>Are you sure?</Text>
    </View>
  </View>
</Modal>

Vérification rapide

Quel composant React Native devez-vous utiliser pour afficher du texte à l’écran ?

Récapitulatif

React Native associe les concepts du Web à des composants natifs : View (div), Text (p), Image (img), ScrollView, FlatList (liste virtualisée), TextInput (input) et TouchableOpacity (button). Utilisez toujours SafeAreaView pour la mise en page racine.

Questions Fréquemment Posées

La leçon « Composants fondamentaux de React Native et DOM web » est-elle gratuite ?

Oui — le texte complet de « Composants fondamentaux de React Native et DOM web » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Composants fondamentaux de React Native et DOM web » ?

Mettez en correspondance View, Text, Image et ScrollView avec leurs équivalents DOM et comprenez le modèle de pont. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer React Academy ?

Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Composants fondamentaux de React Native et DOM web » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon React Academy ?

Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Composants fondamentaux de React Native et DOM web
  2. Styles avec l’API StyleSheet et Flexbox
  3. Navigation avec Expo Router
  4. Accéder aux API de l’appareil : caméra, position et notifications push
← Retour à React Academy