Apa perbedaan antara React Native dan React?


730

Saya sudah mulai belajar Bere karena penasaran dan ingin tahu perbedaan antara Bereaksi dan Bereaksi Asli - meskipun tidak dapat menemukan jawaban yang memuaskan menggunakan Google. Bereaksi dan Bereaksi Asli tampaknya memiliki format yang sama. Apakah mereka memiliki sintaks yang sama sekali berbeda?


61
Semua orang memberikan respons kamus ketika kebanyakan orang yang mengajukan pertanyaan ini hanya ingin tahu seberapa dipertukarkannya mereka: Seberapa mudah mem-porting kode Bereaksi mereka ke React Native? Apakah Anda perlu menulis ulang ujung depan aplikasi web Anda menjadi kode Bereaksi yang berbeda jika Anda menginginkannya di iPad? Apa bedanya?
Lawrence Weru

9
Apa perbedaan utama antara ReactJS dan React-Native? tautan di sini medium.com/@alexmngn/…
core114

14
Jawaban singkatnya adalah react-native membangun aplikasi seluler untuk iOS, Android, dan Windows Mobile yang dapat Anda kompilasi dan masukkan ke dalam toko aplikasi untuk dipasang oleh pengguna. Reactjs adalah untuk membangun halaman web untuk digunakan di browser web. Keduanya menggunakan komponen yang dapat digunakan kembali, tetapi sintaks yang Anda gunakan untuk membuat elemen dalam komponen (menggunakan JSX) berbeda. Bereaksi BEJ merender html seperti komponen seperti <h1>, <p>, dll Dimana bereaksi-native merender tampilan aplikasi komponen asli seperti <View>, <Text>, <Image>, <ScrollView>, sehingga Anda tidak dapat langsung menggunakan kembali kode komponen UI Anda kecuali Anda ulang / mengganti semua elemen.
Ira Herman

Jawaban:


773

ReactJS adalah pustaka JavaScript, mendukung web front-end dan dijalankan di server, untuk membangun antarmuka pengguna dan aplikasi web.

React Native adalah kerangka kerja seluler yang mengkompilasi ke komponen aplikasi asli, yang memungkinkan Anda untuk membangun aplikasi seluler asli untuk platform yang berbeda (iOS, Android, dan Windows Mobile) dalam JavaScript yang memungkinkan Anda menggunakan ReactJS untuk membangun komponen Anda, dan mengimplementasikan ReactJS di bawah jilbab.

Keduanya mengikuti ekstensi sintaks JSX ke JavaScript.

Keduanya bersumber terbuka oleh Facebook.


3
@LemuelAdane Ini adalah tulisan dari Facebook tentang bagaimana hal ini dilakukan: facebook.github.io/react/docs/environmentments.html . Inilah intro yang bagus yang membahas cara mengimplementasikan ini: maketea.co.uk/2014/06/30/...
Nader Dabit

61
Jadi, jika saya membuat aplikasi di reaksi asli, dapatkah salah satu dari itu digunakan kembali di reactJS atau sebaliknya?
Troy Cosentino

12
@MelAdane Poster ini kemungkinan merujuk pada penggunaan perpustakaan ReactJS pada NodeJS untuk membuat file prebuilt (menggunakan sesuatu seperti Webpack) yang kemudian dapat disajikan kepada klien sebagai file statis.
Pineda

9
Jika saya membuat aplikasi web menggunakan reaksi, dapatkah kode HTML / JS yang sama dapat digunakan di aplikasi seluler menggunakan reaksi asli?
Ravi Maniyar

14
@RaviManiyar TIDAK, Anda dapat menggunakan kembali logika bisnis Anda tetapi Anda tidak dapat menggunakan kembali kode ui Anda. React Native menggunakan komponen ui asli sementara React.JS menggunakan untuk web dan ui dibangun menggunakan komponen html dan css
Chromonav

292

Ini proyek React .

Di Facebook, mereka menemukan React sehingga JavaScript dapat memanipulasi DOM situs web lebih cepat menggunakan model DOM virtual.

Refresh penuh DOM lebih lambat dibandingkan dengan model virtual-dom Bereaksi , yang hanya me-refresh bagian halaman (baca: refresh sebagian).

Seperti yang mungkin Anda pahami dari video ini , Facebook tidak menciptakan React karena mereka segera memahami bahwa penyegaran sebagian akan lebih cepat daripada yang konvensional. Awalnya mereka membutuhkan cara untuk mengurangi waktu membangun kembali aplikasi Facebook dan untungnya ini menghidupkan kembali DOM parsial.

Bereaksi asli hanyalah konsekuensi dari Bereaksi. Ini adalah platform untuk membangun aplikasi asli menggunakan JavaScript.

Sebelum Bereaksi asli, Anda harus mengetahui Java untuk Android atau Objective-C untuk iPhone dan iPad untuk membuat aplikasi asli.

Dengan React Native dimungkinkan untuk meniru perilaku aplikasi asli dalam JavaScript dan pada akhirnya, Anda akan mendapatkan kode spesifik platform sebagai hasilnya. Anda bahkan dapat mencampur kode asli dengan JavaScript jika Anda perlu mengoptimalkan aplikasi Anda lebih lanjut.

Seperti yang dikatakan Olivia Bishop dalam video itu , 85% dari basis kode asli Bereaksi dapat dibagikan di antara platform. Ini akan menjadi komponen aplikasi yang biasanya digunakan dan logika umum.

15% dari kode adalah khusus platform. JavaScript khusus platform adalah yang memberikan cita rasa platform (dan membuat perbedaan dalam pengalaman).

Yang keren adalah kode khusus platform ini - sudah ditulis, jadi Anda hanya perlu menggunakannya.


9
Saya pribadi lebih suka jawaban ini, karena lebih rinci tautan tawaran ke penjelasan lebih lanjut.
Cristi Potlog

7
Saya juga suka jawaban ini. "Sebelum Bereaksi Asli ..." Jangan lupa ada Xamarin juga. ;)
Asp Upload

117

Reaksi:

React adalah pustaka JavaScript yang deklaratif, efisien, dan fleksibel untuk membangun antarmuka pengguna.

Bereaksi Asli:

React Native memungkinkan Anda membuat aplikasi seluler hanya menggunakan JavaScript. Ini menggunakan desain yang sama seperti Bereaksi, memungkinkan Anda membuat UI seluler kaya dari komponen deklaratif.
Dengan React Native, Anda tidak membangun "aplikasi web seluler", "aplikasi HTML5", atau "aplikasi hybrid". Anda membuat aplikasi seluler nyata yang tidak dapat dibedakan dari aplikasi yang dibuat menggunakan Objective-C atau Java. React Native menggunakan blok bangunan UI dasar yang sama dengan aplikasi iOS dan Android biasa. Anda cukup menempatkan blok bangunan tersebut menggunakan JavaScript dan Bereaksi.
Bereaksi Asli memungkinkan Anda membangun aplikasi lebih cepat. Alih-alih mengkompilasi ulang, Anda dapat memuat ulang aplikasi Anda secara instan. Dengan pemuatan ulang panas, Anda bahkan dapat menjalankan kode baru sambil mempertahankan status aplikasi Anda. Cobalah - ini adalah pengalaman ajaib.
React Native menggabungkan dengan lancar dengan komponen yang ditulis dalam Objective-C, Java, atau Swift. Sangat mudah untuk drop down ke kode asli jika Anda perlu mengoptimalkan beberapa aspek dari aplikasi Anda. Juga mudah untuk membangun bagian dari aplikasi Anda di React Native, dan bagian dari aplikasi Anda menggunakan kode asli secara langsung - begitulah cara aplikasi Facebook bekerja.

Jadi pada dasarnya React adalah pustaka UI untuk tampilan aplikasi web Anda, menggunakan javascript dan JSX , React native adalah pustaka tambahan di bagian atas React, untuk membuat aplikasi iOSdan Androidperangkat asli.

Bereaksi sampel kode:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);


Bereaksi sampel kode asli :

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

class WhyReactNativeIsSoGreat extends Component {
  render() {
    return (
      <View>
        <Text>
          If you like React on the web, you'll like React Native.
        </Text>
        <Text>
          You just use native components like 'View' and 'Text',
          instead of web components like 'div' and 'span'.
        </Text>
      </View>
    );
  }
}

Untuk informasi lebih lanjut tentang Bereaksi , kunjungi situs web resmi mereka yang dibuat oleh tim facebook:

https://facebook.github.io/react

Untuk informasi lebih lanjut tentang Bereaksi Asli , kunjungi Bereaksi situs web asli di bawah:

https://facebook.github.io/react-native


40
Sampel kode Anda bermanfaat, tetapi akan jauh lebih baik untuk melihat komponen SAMA diterapkan di setiap kerangka kerja
poshest

8
Jawaban Anda harus yang diterima, saya datang ke sini mencari untuk melihat apakah Bereaksi dan Bereaksi Asli memiliki arsitektur yang sama dan jika kode terlihat sama bukan untuk definisi kedua perpustakaan.
Gherbi Hicham

1
Saya ingin menambahkan, bahwa jika Anda menggunakan bahasa asli, Anda hanya akan memiliki dua baris kode, yang salah satunya diatur secara otomatis untuk outlet (tergantung). Ya, Anda akan memerlukan formatter tanggal, tetapi masih hanya satu baris. Saya kesulitan membaca "Ini sebabnya reaksi luar biasa" ketika sebenarnya memiliki 20 kali lebih banyak baris kode daripada aplikasi asli yang sebenarnya. Yang mengatakan, saya sangat menghargai jawaban Anda, dan bahkan menikmati Bereaksi di web untuk solusi yang diberikannya dalam domain itu hebat. Saya hanya berharap lebih banyak orang tahu bagaimana menerapkan pola-pola tanpa itu, untuk membandingkan kapan itu berguna vs pemeliharaan mimpi buruk
Stephen J

58

ReactJS adalah kerangka kerja untuk membangun hierarki komponen UI. Setiap komponen memiliki status dan alat peraga. Data mengalir dari atas ke komponen tingkat rendah melalui alat peraga. Keadaan diperbarui di komponen tingkat atas menggunakan penangan acara.

Bereaksi asli menggunakan React framework untuk membangun komponen untuk aplikasi seluler. Bereaksi asli menyediakan serangkaian komponen dasar untuk platform iOS dan Android. Beberapa komponen dalam React Native adalah Navigator, TabBar, Text, TextInput, View, ScrollView. Komponen-komponen ini menggunakan komponen asli iOS UIKit dan Android UI secara internal. Bereaksi asli juga memungkinkan NativeModules di mana kode yang ditulis dalam ObjectiveC untuk iOS dan Java untuk Android dapat digunakan dalam JavaScript.


41

Pertama, kesamaannya: Baik React & React Native (RN) dirancang untuk membuat antarmuka pengguna yang fleksibel. Ada banyak manfaat untuk kerangka kerja ini, tetapi yang paling mendasar adalah kerangka itu dibuat untuk pengembangan UI. Facebook mengembangkan RN beberapa tahun setelah React.

Bereaksi: Facebook mendesain kerangka kerja ini hampir seperti menulis JavaScript Anda di dalam HTML / XML Anda, itulah sebabnya tag tersebut disebut " JSX " (JavaScript XML) dan mirip dengan tag seperti HTML yang sudah dikenal seperti <div>atau <p>. Ciri khas React adalah tag huruf kapital yang menunjukkan komponen khusus, seperti <MyFancyNavbar />, yang juga ada di RN. Namun, Bereaksi menggunakan DOM . DOM ada untuk HTML, sehingga Bereaksi digunakan untuk pengembangan web.

Bereaksi Asli: RN tidak menggunakan HTML, dan karenanya tidak digunakan untuk pengembangan web. Ini digunakan untuk ... hampir semua yang lain! Pengembangan seluler (baik iOS & Android), perangkat pintar (misalnya jam tangan, TV), augmented reality, dll. Karena RN tidak memiliki DOM untuk berinteraksi, alih-alih menggunakan jenis tag HTML yang sama yang digunakan dalam Bereaksi, ia menggunakan miliknya sendiri tag yang kemudian dikompilasi ke bahasa lain. Misalnya, alih-alih <div>tag, pengembang RN menggunakan tag bawaan RN <View>, yang mengkompilasi ke dalam kode asli lainnya di bawah tenda (misalnya android.viewdi Android; dan UIViewdi iOS).

Singkatnya: mereka sangat mirip (untuk pengembangan UI) tetapi digunakan untuk media yang berbeda.


Jawaban yang bagus .. Bisakah Anda menjelaskan sedikit lebih banyak dan menambahkan lebih banyak poin ke dalamnya. Akan menyenangkan bagi Orang yang membaca.
sarath

1
letakkan jawaban ini di atas
JerryGoyal

38
  1. React-Native adalah kerangka kerja untuk mengembangkan aplikasi Android & iOS yang berbagi 80% - 90% dari kode Javascript.

Sedangkan React.js adalah pustaka Javascript induk untuk mengembangkan aplikasi web.

  1. Saat Anda menggunakan tag seperti <View>, <Text>sangat sering di React-Native, React.js menggunakan tag html web seperti <div> <h1> <h2>, yang hanya sinonim dalam kamus perkembangan web / seluler.

  2. Untuk React.js Anda memerlukan DOM untuk rendering path tag html, sedangkan untuk aplikasi seluler: React-Native menggunakan AppRegistry untuk mendaftarkan aplikasi Anda.

Saya harap ini adalah penjelasan yang mudah untuk perbedaan / persamaan cepat di React.js dan React-Native.


25

Kami tidak dapat membandingkan mereka dengan tepat. Ada perbedaan dalam hal penggunaan .

(Pembaruan 2018)


ReactJS

Bereaksi memiliki sebagai fokus utama Pengembangan Web.

    • DOM virtual React lebih cepat daripada model refresh penuh konvensional , karena DOM virtual hanya menyegarkan sebagian halaman.
    • Anda dapat menggunakan kembali komponen kode dalam Bereaksi, menghemat banyak waktu. (Anda juga bisa dalam Bereaksi Asli.)
    • Sebagai bisnis: Render halaman Anda sepenuhnya, dari server ke browser akan meningkatkan SEO aplikasi web Anda .
    • Ini meningkatkan kecepatan debug membuat hidup pengembang Anda lebih mudah.
    • Anda dapat menggunakan pengembangan aplikasi seluler hybrid, seperti Cordova atau Ionic, untuk membangun aplikasi seluler dengan React, tetapi lebih efisien membangun aplikasi seluler dengan React Native dari banyak titik.

Bereaksi Asli

Perpanjangan Bereaksi , fokus pada Pengembangan Seluler.

    • Fokus utamanya adalah semua tentang Antarmuka Pengguna Seluler .
    • iOS & Android tercakup.
    • Reusable React komponen & modul UI Asli memungkinkan aplikasi hybrid untuk merender secara asli.
    • Tidak perlu merombak aplikasi lama Anda. Yang harus Anda lakukan adalah menambahkan komponen UI Bereaksi Asli ke dalam kode aplikasi yang ada , tanpa harus menulis ulang.
    • Tidak menggunakan HTML untuk merender aplikasi . Menyediakan komponen alternatif yang bekerja dengan cara yang sama, sehingga tidak akan sulit untuk memahaminya.
    • Karena kode Anda tidak dirender dalam halaman HTML, ini juga berarti Anda tidak akan dapat menggunakan kembali perpustakaan yang sebelumnya Anda gunakan dengan Bereaksi yang membuat segala jenis HTML, SVG atau Canvas.
    • Bereaksi Asli tidak terbuat dari elemen web dan tidak dapat ditata dengan cara yang sama. Selamat tinggal Animasi CSS!

Semoga saya membantumu :)


17

Dalam arti sederhana, Bereaksi dan Bereaksi asli mengikuti prinsip-prinsip desain yang sama kecuali dalam hal merancang antarmuka pengguna.

  1. Bereaksi asli memiliki serangkaian tag terpisah untuk mendefinisikan antarmuka pengguna untuk seluler, tetapi keduanya menggunakan JSX untuk mendefinisikan komponen.
  2. Kedua tujuan utama sistem adalah untuk mengembangkan komponen UI yang dapat digunakan kembali dan mengurangi upaya pengembangan dengan komposisinya.
  3. Jika Anda merencanakan & menyusun kode dengan benar, Anda dapat menggunakan logika bisnis yang sama untuk seluler dan web

Bagaimanapun, ini adalah perpustakaan yang sangat baik untuk membangun antarmuka pengguna untuk seluler dan web.


16

React adalah pustaka JavaScript yang deklaratif, efisien, dan fleksibel untuk membangun antarmuka pengguna. Komponen Anda memberi tahu Bereaksi apa yang ingin Anda render - kemudian React akan memperbarui dan membuat komponen yang tepat secara efisien saat data Anda berubah. Di sini, ShoppingList adalah kelas komponen React, atau tipe komponen React.

Aplikasi Bereaksi Asli adalah aplikasi seluler yang nyata. Dengan React Native, Anda tidak membangun "aplikasi web seluler", "aplikasi HTML5", atau "aplikasi hybrid". Anda membuat aplikasi seluler nyata yang tidak dapat dibedakan dari aplikasi yang dibuat menggunakan Objective-C atau Java. React Native menggunakan blok bangunan UI dasar yang sama dengan aplikasi iOS dan Android biasa.

Info lebih lanjut


13

ReactJS adalah kerangka kerja inti, yang dimaksudkan untuk membangun komponen yang diisolasi berdasarkan pola reaktif, Anda dapat menganggapnya sebagai V dari MVC, walaupun saya ingin menyatakan bahwa reaksi memang membawa nuansa yang berbeda, khususnya jika Anda kurang terbiasa dengan konsep reaktif .

ReactNative adalah lapisan lain yang dimaksudkan untuk memiliki komponen yang ditetapkan untuk platform Android dan iOS yang umum. Jadi kode pada dasarnya terlihat sama dengan ReactJS karena ReactJS, tetapi memuat secara native di platform mobile. Anda juga dapat menjembatani API relatif lebih kompleks dan platform dengan Java / Objective-C / Swift tergantung pada OS dan menggunakannya dalam Bereaksi.


13

React Native terutama dikembangkan dalam JavaScript, yang berarti bahwa sebagian besar kode yang Anda butuhkan untuk memulai dapat dibagikan di seluruh platform. Bereaksi Asli akan dirender menggunakan komponen asli. Aplikasi React Native dikembangkan dalam bahasa yang diperlukan oleh platform yang ditargetkan, Objective-C atau Swift untuk iOS, Java untuk Android, dll. Kode yang ditulis tidak dibagi di seluruh platform dan perilakunya bervariasi. Mereka memiliki akses langsung ke semua fitur yang ditawarkan oleh platform tanpa batasan apa pun.

React adalah pustaka JavaScript open-source yang dikembangkan oleh Facebook untuk membangun antarmuka pengguna. Ini digunakan untuk menangani tampilan layer untuk aplikasi web dan seluler. ReactJS digunakan untuk membuat komponen UI yang dapat digunakan kembali. Saat ini salah satu perpustakaan JavaScript paling populer di bidangnya dan memiliki dasar yang kuat dan komunitas besar di belakangnya. Jika Anda belajar ReactJS, Anda perlu memiliki pengetahuan tentang JavaScript, HTML5 dan CSS.


12

Bereaksi adalah abstraksi dasar dari Bereaksi Asli dan Bereaksi DOM , jadi jika Anda akan bekerja dengan Bereaksi Asli Anda juga akan perlu Bereaksi ... sama dengan web tetapi bukan Bereaksi Asli Anda akan perlu Bereaksi DOM.

Karena React adalah abstraksi dasar, sintaksis umum dan alur kerjanya adalah sama tetapi komponen yang akan Anda gunakan sangat berbeda sehingga Anda perlu mempelajari perbedaan-perbedaan ini. Anda tahu Bereaksi (abstraksi dasar) Anda bisa mempelajari perbedaan antara platform tanpa mempelajari bahasa pemrograman lain, sintaksis dan alur kerja.


11

React-Native adalah kerangka kerja, di mana ReactJS adalah pustaka javascript yang dapat Anda gunakan untuk situs web Anda.

React-asli menyediakan komponen inti default (gambar, teks), di mana React menyediakan banyak komponen dan membuatnya bekerja bersama.



9

Berkenaan dengan siklus hidup komponen dan semua lonceng dan peluit lainnya, sebagian besar sama.

Perbedaannya sebagian besar adalah markup JSX yang digunakan. Bereaksi menggunakan yang menyerupai html. Yang lainnya adalah markup yang digunakan oleh react-asli untuk menampilkan tampilan.


8

React Native adalah untuk aplikasi seluler sedangkan React adalah untuk situs web (front-end). Keduanya adalah kerangka yang ditemukan oleh Facebook. React Native adalah kerangka kerja pengembangan lintas platform yang berarti orang bisa menulis kode yang hampir sama untuk iOS dan Android dan itu akan berhasil. Saya pribadi tahu lebih banyak tentang Bereaksi Asli jadi saya akan berhenti di sini.


8

Bereaksi Js memanipulasi dengan Dom HTML. Tetapi Bereaksi asli memanipulasi dengan komponen ui asli seluler (iOS / android).


7

ReactJS adalah perpustakaan javascript yang digunakan untuk membangun antarmuka web. Anda memerlukan bundler seperti webpack dan mencoba memasang modul yang Anda perlukan untuk membangun situs web Anda.

Bereaksi Asli adalah kerangka kerja javascript dan dilengkapi dengan semua yang Anda butuhkan untuk menulis aplikasi multi-platform (seperti iOS atau Android). Anda membutuhkan xcode dan studio android yang diinstal untuk membangun dan menggunakan aplikasi Anda.

Tidak seperti ReactJS, React-Native tidak menggunakan HTML tetapi komponen serupa yang dapat Anda gunakan di seluruh ios dan android untuk membangun aplikasi Anda. Komponen ini menggunakan komponen asli asli untuk membangun aplikasi iOS dan Android. Karena aplikasi React-Native ini terasa nyata tidak seperti platform pengembangan Hybrid lainnya. Komponen juga meningkatkan penggunaan kembali kode Anda karena Anda tidak perlu membuat antarmuka pengguna yang sama lagi di ios dan android.


6

Secara sederhana ReactJS adalah pustaka induk yang mengembalikan sesuatu untuk dirender sesuai dengan lingkungan host (browser, ponsel, server, desktop..etc). Selain rendering itu juga menyediakan metode lain seperti kait siklus hidup .. dll

Di browser, ia menggunakan perpustakaan lain bereaksi dom untuk membuat elemen DOM. Dalam seluler, menggunakan komponen React-Native untuk membuat komponen UI asli platform (Baik iOS dan Android). BEGITU,

react + react-dom = pengembangan web

react + react-native = pengembangan seluler


4

REACT adalah perpustakaan Javascript untuk membangun aplikasi web antarmuka besar / kecil seperti Facebook.

REAKSI ALAMI adalah kerangka kerja Javascript untuk mengembangkan aplikasi seluler asli di Android, iOS, dan Windows Phone.

Keduanya bersumber terbuka oleh Facebook.


3

Inilah perbedaan yang saya ketahui:

  1. Mereka memiliki tag html yang berbeda: Bereaksi Asli digunakan untuk menangani teks dan bukan di Bereaksi.
  2. React Native menggunakan komponen yang dapat disentuh alih-alih elemen tombol biasa.
  3. Bereaksi Asli memiliki komponen ScrollView dan FlatList untuk merender daftar.
  4. React Native menggunakan AsyncStorage sementara React menggunakan penyimpanan lokal.
  5. Dalam fungsi React Native routers sebagai stack, sementara di React, kami menggunakan komponen Route untuk memetakan navigasi.

3

Singkatnya: React.js untuk Pengembangan Web sementara React-Native untuk Pengembangan Aplikasi Seluler


3

Bereaksi vs Bereaksi Asli

ReactJS

  • Bereaksi digunakan untuk membuat situs web, aplikasi web, SPA dll.
  • Bereaksi adalah perpustakaan Javascript yang digunakan untuk membuat hierarki UI.
  • Ini bertanggung jawab untuk rendering komponen UI, Itu dianggap sebagai bagian V kerangka MVC.
  • React's DOM virtual lebih cepat daripada model refresh penuh konvensional, karena DOM virtual hanya me-refresh bagian halaman, sehingga mengurangi waktu refresh halaman.
  • Bereaksi menggunakan komponen sebagai unit dasar UI yang dapat digunakan kembali ini menghemat waktu pengkodean. Sederhana dan mudah dipelajari.

Bereaksi Asli

  • React Native adalah kerangka kerja yang digunakan untuk membuat aplikasi Native lintas platform. Ini berarti Anda dapat membuat aplikasi asli dan aplikasi yang sama akan berjalan di Android dan iOS.
  • Bereaksi asli memiliki semua manfaat ReactJS
  • Bereaksi asli memungkinkan pengembang untuk membuat aplikasi asli dengan pendekatan gaya web.
  • Pengembang ujung depan dapat menjadi pengembang seluler dengan mudah.

2

Bereaksi Js - Bereaksi JS adalah perpustakaan javascript front-end itu perpustakaan besar bukan kerangka

  • Ini mengikuti pendekatan berbasis komponen yang membantu dalam membangun
    komponen UI yang dapat digunakan kembali
    • Ini digunakan untuk mengembangkan web dan mobile UI yang kompleks dan interaktif
    • Meskipun hanya bersumber terbuka pada tahun 2015, ia memiliki salah satu komunitas terbesar yang mendukungnya.

ReactNative - React Native adalah kerangka kerja aplikasi seluler open-source.


2

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 mapuntuk 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 onClickberubah 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/


1

reactjs menggunakan re-dom bukan dom browser sementara react asli menggunakan dom virtual tetapi keduanya menggunakan sintaks yang sama yaitu jika Anda dapat menggunakan reactjs maka Anda dapat menggunakan react asli. karena sebagian besar perpustakaan yang Anda gunakan di reactjs tersedia di reactjs tersedia seperti navigasi reaksi Anda dan perpustakaan umum lainnya yang memiliki kesamaan.


Jawaban singkatnya adalah react-native membangun aplikasi seluler untuk iOS, Android, dan Windows Mobile yang dapat Anda kompilasi dan masukkan ke dalam toko aplikasi untuk dipasang oleh pengguna. Reactjs adalah untuk membangun halaman web untuk digunakan di browser web. Keduanya menggunakan komponen yang dapat digunakan kembali, tetapi sintaks yang Anda gunakan untuk membuat elemen dalam komponen (menggunakan JSX) berbeda. Bereaksi BEJ merender html seperti komponen seperti <h1>, <p>, dll Dimana bereaksi-native merender asli tampilan aplikasi komponen seperti <View>dan <Text>.
Ira Herman

1

Menanggapi komentar dari @poshest di atas, berikut adalah versi React Native dari kode Clock yang sebelumnya diposting di React (maaf, saya tidak dapat mengomentari bagian tersebut secara langsung, kalau tidak saya akan menambahkan kode di sana):

Bereaksi sampel kode asli

import { AppRegistry } from 'react-native';
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';

class Clock extends Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.sectionTitle}>Hello, world!</Text>
        <Text style={styles.sectionDescription}>It is {this.state.date.toLocaleTimeString()}.</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    flex: 1,
    justifyContent: 'center',
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: 'black',
    alignSelf: 'center',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: 'darkgrey',
    alignSelf: 'center',
  },
});

AppRegistry.registerComponent("clock", () => Clock);

Perhatikan bahwa penataan merupakan sepenuhnya pilihan saya dan tidak berusaha mereplikasi secara langsung tag <h1>dan yang <h2>digunakan dalam kode Bereaksi.


1

Beberapa perbedaan adalah sebagai berikut:
1- React-Native adalah kerangka kerja yang digunakan untuk membuat Aplikasi Seluler, di mana ReactJS adalah pustaka javascript yang dapat Anda gunakan untuk situs web Anda.
2- React-Native tidak menggunakan HTML untuk membuat aplikasi saat React menggunakan.
3- React-Native digunakan untuk mengembangkan hanya Aplikasi Seluler sementara React digunakan untuk situs web dan Seluler.


0

Bereaksi Asli

  • Ini adalah kerangka kerja untuk membangun aplikasi asli menggunakan JavaScript.

  • Ini mengkompilasi ke komponen aplikasi asli, yang memungkinkan Anda untuk membangun aplikasi seluler asli.

  • Tidak perlu merombak aplikasi lama Anda. Yang harus Anda lakukan adalah menambahkan komponen UI Bereaksi Asli ke dalam kode aplikasi yang ada, tanpa harus menulis ulang.

Bereaksi js

  • Ini mendukung web front-end dan dijalankan di server, untuk membangun antarmuka pengguna dan aplikasi web.

  • Ini juga memungkinkan kita membuat komponen UI yang dapat digunakan kembali.

  • Anda dapat menggunakan kembali komponen kode dalam Bereaksi JS, menghemat banyak waktu.


0

React.js sering disebut sebagai React atau ReactJS adalah pustaka JavaScript yang bertanggung jawab untuk membangun hirarki komponen UI atau dengan kata lain, bertanggung jawab atas rendering komponen UI. Ini memberikan dukungan untuk frontend dan sisi server.

React Native adalah kerangka kerja untuk membangun aplikasi asli menggunakan JavaScript. Bereaksi kompilasi Asli untuk komponen aplikasi asli, yang memungkinkan Anda membangun aplikasi seluler asli. Dalam React JS, React adalah abstraksi dasar dari React DOM untuk platform web, sementara dengan React Native, React masih abstraksi dasar tetapi React Native. Jadi sintaks dan alur kerjanya tetap sama, tetapi komponennya berbeda.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.