Sedikit terlambat ke pesta, tapi inilah jawaban yang lebih komprehensif dengan contoh-contoh:
Reaksi
React adalah pustaka UI berbasis komponen yang menggunakan "shadow DOM" untuk memperbarui DOM secara efisien dengan apa yang telah berubah alih-alih membangun kembali seluruh pohon DOM untuk setiap perubahan. Awalnya dibuat untuk aplikasi web, tetapi sekarang dapat digunakan untuk seluler & 3D / vr juga.
Komponen antara Bereaksi dan Bereaksi Asli tidak dapat dipertukarkan karena Bereaksi Peta asli ke elemen UI seluler asli tetapi logika bisnis dan kode terkait non-render dapat digunakan kembali.
ReactDOM
Awalnya disertakan dengan perpustakaan React tetapi dibelah begitu React digunakan untuk platform lain selain hanya web. Ini berfungsi sebagai titik masuk ke DOM dan digunakan dalam kesatuan dengan Bereaksi.
Contoh:
import React from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
state = {
data: [],
}
componentDidMount() {
const data = API.getData(); // fetch some data
this.setState({ data })
}
clearData = () => {
this.setState({
data: [],
});
}
render() {
return (
<div>
{this.state.data.map((data) => (
<p key={data.id}>{data.label}</p>
))}
<button onClick={this.clearData}>
Clear list
</button>
</div>
);
}
}
ReactDOM.render(App, document.getElementById('app'));
Bereaksi Asli
React Native adalah kerangka kerja lintas-platform seluler yang menggunakan Bereaksi dan berkomunikasi antara Javascript dan rekan aslinya melalui "jembatan". Karena ini, banyak penataan UI harus berbeda ketika menggunakan React Native. Misalnya: saat membuat daftar, Anda akan mengalami masalah kinerja utama jika Anda mencoba menggunakan map
untuk membuat daftar alih-alih Bereaksi AsliFlatList
. React Native dapat digunakan untuk membangun aplikasi seluler iOS / Android, serta untuk jam tangan pintar dan TV.
Expo
Expo adalah tujuan ketika memulai aplikasi Asli Bereaksi baru.
Expo adalah kerangka kerja dan platform untuk aplikasi Bereaksi universal. Ini adalah seperangkat alat dan layanan yang dibangun di sekitar React Native dan platform asli yang membantu Anda mengembangkan, membangun, menyebarkan, dan beralih dengan cepat di iOS, Android, dan aplikasi web
Catatan: Saat menggunakan Expo, Anda hanya dapat menggunakan Apative Asli yang mereka sediakan. Semua pustaka tambahan yang Anda sertakan harus javascript murni atau Anda harus mengeluarkan expo.
Contoh yang sama menggunakan React Native:
import React, { Component } from 'react';
import { Flatlist, View, Text, StyleSheet } from 'react-native';
export default class App extends Component {
state = {
data: [],
}
componentDidMount() {
const data = API.getData(); // fetch some data
this.setState({ data })
}
clearData = () => {
this.setState({
data: [],
});
}
render() {
return (
<View style={styles.container}>
<FlatList
data={this.state.data}
renderItem={({ item }) => <Text key={item.id}>{item.label}</Text>}
/>
<Button title="Clear list" onPress={this.clearData}></Button>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
Perbedaan:
- Perhatikan bahwa segala sesuatu di luar render dapat tetap sama, inilah sebabnya logika bisnis / kode logika siklus hidup dapat digunakan kembali di seluruh Bereaksi dan Bereaksi Asli
- Dalam Bereaksi Asli semua komponen harus diimpor dari react-asli atau pustaka UI lain
- Menggunakan API tertentu yang memetakan komponen asli biasanya akan lebih berkinerja daripada mencoba menangani semuanya di sisi javascript. ex. memetakan komponen untuk membangun daftar vs menggunakan daftar datar
- Perbedaan halus: hal-hal seperti
onClick
berubah menjadi onPress
, React Native menggunakan stylesheet untuk mendefinisikan gaya dengan cara yang lebih berkinerja, dan React Native menggunakan flexbox sebagai struktur tata letak default untuk menjaga hal-hal responsif.
- Karena tidak ada "DOM" tradisional di React Native, hanya pustaka javascript murni yang dapat digunakan di kedua React dan React Native
React360
Perlu juga disebutkan bahwa Bereaksi juga dapat digunakan untuk mengembangkan aplikasi 3D / VR. Struktur komponen sangat mirip dengan React Native. https://facebook.github.io/react-360/