React Native fournit un ensemble de composants core — comme View, Text, Image, ScrollView, TextInput — qui correspondent à des éléments natifs de l'interface utilisateur. Ce sont les éléments fondamentaux des interfaces React Native, utilisés à la place des éléments HTML du web.
React Native uses its OWN components (mapping to native views), NOT HTML:
VIEW → a container (like a <div>) — the basic layout building block
TEXT → display text (ALL text must be inside a <Text>, unlike web)
IMAGE → display images (local or remote)
TEXTINPUT → text input field (like an <input>)
SCROLLVIEW → a scrollable container
FLATLIST → an efficient scrollable LIST (for long lists — renders lazily)
TOUCHABLEOPACITY / PRESSABLE → handle taps (touchable areas)
BUTTON → a basic button
import { View, Text, Image, TextInput, TouchableOpacity } from 'react-native';
function Profile() {
return (
<View style={styles.container}> {/* container (like a div) */}
<Image source={{ uri: 'https://...' }} style={styles.avatar} />
<Text style={styles.name}>Ann</Text> {/* text MUST be in <Text> */}
<TextInput placeholder="Email" />
<TouchableOpacity onPress={() => {}}>
<Text>Submit</Text>
</TouchableOpacity>
</View>
);
}
✓ Use <View> not <div>, <Text> not <p>/<span>; ALL text must be in <Text>
✓ No CSS classes/files — STYLING via a style prop (JS objects, StyleSheet) — see styling
✓ Touchables/Pressable for interactions (not onClick on divs)
✓ FlatList for long lists (efficient) — not mapping over everything
Comprendre les composants core est fondamental au développement React Native car ce sont les éléments constitutifs de chaque interface React Native — vous les composez pour construire des interfaces, c'est donc une connaissance fondamentale incontournable.
React Native fournit ses propres composants qui correspondent à des vues natives (plutôt qu'à des éléments HTML web), et comprendre les essentiels — View (le conteneur, comme une div), Text (pour tout le texte, avec la règle importante que tout texte doit être à l'intérieur d'un composant Text, contrairement au web), Image, TextInput, ScrollView, FlatList (pour les listes longues efficaces), et les touchables/Pressable (pour gérer les appuis) — est nécessaire pour construire n'importe quelle interface React Native.
Comprendre les différences clés avec le web est particulièrement important pour les développeurs React/web qui transition vers React Native : utiliser View au lieu de div et Text au lieu de p/span (avec la règle tout-texte-dans-Text), styliser via la prop style plutôt que des classes/fichiers CSS, utiliser les touchables/Pressable pour les interactions plutôt que onClick, et utiliser FlatList pour les listes longues (qui affiche efficacement/en lazy) plutôt que de mapper sur tout — ces différences sont des écueils courants que comprendre les composants core clarifie.
Les composants se composent (comme React) pour construire des interfaces, avec View comme conteneur fondamental.
Puisque les composants core sont les éléments constitutifs de chaque interface React Native (vous les utilisez constamment pour construire des interfaces) et comprendre ces composants et comment ils différent du HTML web est fondamental pour construire des applications React Native (particulièrement pour les développeurs web), comprendre les composants core est une connaissance React Native essentielle et fondamentale — le vocabulaire de base de l'interface utilisateur React Native, nécessaire pour construire n'importe quelle interface et pour adapter la connaissance React web au modèle de composants natifs, une compétence fondamentale du développement React Native.