React crea interfacce web con elementi HTML; React Native crea app iOS e Android con viste native. Scopri l'equivalente nativo di ogni elemento web e cosa puoi condividere.
React è la libreria; React Native la usa per creare app iOS e Android. Con React sul web renderizzi elementi HTML come div e button in una pagina del browser. React Native renderizza i propri componenti, come View e Text, che diventano vere viste della piattaforma. Componenti, props, state e hook funzionano allo stesso modo in entrambi.
Fianco a fianco
Il modo più rapido per vedere la differenza è tradurre un elemento web nel suo equivalente nativo. Cerca nella mappa qui sotto un tag HTML, una prop o un'abitudine CSS, e ogni riga ti dà il sostituto in React Native con una breve nota su cosa si comporta diversamente.
No. React è la libreria di componenti; React Native è un framework che usa React per pilotare viste mobili native. Scrivi i componenti nello stesso modo, ma renderizzi View, Text e altri componenti nativi invece di HTML, e non c'è un DOM del browser.
Non direttamente. Non ci sono elementi div o span né file CSS. Gli stili sono oggetti JavaScript con nomi in camelCase che rispecchiano in gran parte il CSS, e il layout usa flexbox con alcuni default diversi.
Prima React, nella maggior parte dei casi. La documentazione stessa di React Native insegna componenti, JSX, props e state di React come base, ed esercitarsi sul web dà un feedback più rapido.
La logica sì: tipi, client API, validazione e hook che non toccano il DOM. Schermate e componenti di solito no, perché renderizzano primitive diverse.
Sì. La documentazione di React Native spiega che a runtime crea le viste Android e iOS corrispondenti ai suoi componenti, quindi una View diventa una vista nativa e non una pagina web dentro un contenitore.
La logica del componente è identica: le stesse props, la stessa chiamata a useState, lo stesso gestore. Cambiano solo gli elementi e lo stile.
Elementi HTML, una classe CSS e onClick. Il browser posiziona il pulsante dopo il testo.
View, Text e Pressable da react-native, stili da StyleSheet.create, e onPress al posto di onClick.
FlatList renderizza solo ciò che è vicino allo schermo, il che mantiene fluide le liste lunghe. keyExtractor svolge il ruolo della prop key.
Un contenitore con layout flexbox, stile e gestione del tocco. Non scorre.
Tutto il testo deve stare dentro Text. Un Text annidato eredita gli stili; non esistono tag di intestazione.
Le immagini di rete richiedono larghezza e altezza esplicite. I file locali usano require().
onChangeText passa direttamente la nuova stringa invece di un evento.
La prop multiline consente più righe di testo.
Nasconde il testo digitato. Non funziona insieme a multiline.
Un input booleano controllato: aggiorna value da onValueChange.
Button accetta una prop title; Pressable avvolge qualunque figlio tu voglia rendere toccabile.
Pressable offre anche onPressIn, onPressOut e onLongPress.
Renderizza tutti i suoi figli in una volta, quindi usalo per contenuti brevi.
Renderizza le liste lunghe in modo efficiente. Richiede data e renderItem; keyExtractor imposta ogni key.
Apre l'URL con un'app installata, come il browser. Avvolgilo in un Pressable per un link toccabile.
Gli stili sono oggetti, di solito definiti con StyleSheet.create. Passa un array per combinarli; vince l'ultimo.
I nomi degli stili sono in camelCase, come nella prop style di React sul web.
Ogni View è un contenitore flex e impila i figli in verticale, salvo indicazioni diverse.
Cerca un elemento, una prop o un concetto CSS
img, onClick, class...
{n} righe mostrate su {v}
Nessun risultato. Prova con il nome di un tag come div o input.
Elementi web e i loro equivalenti in React Native
React sul web
React Native
Cosa cambia
Inizia gratis · Nessuna carta di credito richiesta