React Native fornisce un insieme di componenti core — come View, Text, Image, ScrollView, TextInput — che mappano su elementi nativi dell'interfaccia utente. Sono i blocchi costitutivi fondamentali delle interfacce React Native, utilizzati al posto degli elementi HTML 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
Comprendere i componenti core è fondamentale per lo sviluppo di React Native perché sono i blocchi costitutivi di ogni interfaccia React Native — li componi per costruire interfacce, quindi è una conoscenza fondamentale imprescindibile.
React Native fornisce i propri componenti che mappano su viste native (piuttosto che su elementi HTML web), e comprendere quelli essenziali — View (il contenitore, come un div), Text (per tutto il testo, con la regola importante che tutto il testo deve essere all'interno di un componente Text, diversamente dal web), Image, TextInput, ScrollView, FlatList (per liste lunghe efficienti), e touchables/Pressable (per gestire i tap) — è necessario per costruire qualsiasi interfaccia React Native.
Comprendere le differenze chiave dal web è particolarmente importante per gli sviluppatori web/React che passano a React Native: usare View al posto di div e Text al posto di p/span (con la regola di tutto-il-testo-in-Text), applicare lo stile tramite la proprietà style anziché classi/file CSS, usare touchables/Pressable per le interazioni anziché onClick, e usare FlatList per liste lunghe (che esegue il rendering efficiente/lazy) anziché mappare tutto — queste differenze sono ostacoli comuni che la comprensione dei componenti core chiarisce.
I componenti si compongono (come in React) per costruire interfacce, con View come contenitore fondamentale.
Poiché i componenti core sono i blocchi costitutivi di ogni interfaccia React Native (li usi costantemente per costruire interfacce) e comprenderli e come differiscono da HTML web è fondamentale per costruire app React Native (specialmente per gli sviluppatori web), comprendere i componenti core è una conoscenza React Native essenziale e fondamentale — il vocabolario di base dell'interfaccia React Native, necessario per costruire qualsiasi interfaccia e per adattare la conoscenza di React web al modello di componenti nativi, una competenza centrale per lo sviluppo di React Native.