Tôi đã bắt đầu tìm hiểu React vì tò mò và muốn biết sự khác biệt giữa React và React Native - mặc dù không thể tìm thấy câu trả lời thỏa đáng khi sử dụng Google. React và React Native dường như có cùng định dạng. Họ có cú pháp hoàn toàn khác nhau?

ReactJS là một thư viện JavaScript, hỗ trợ cả web front-end và được chạy trên máy chủ, để xây dựng giao diện người dùng và ứng dụng web.

React Native là một khung di động biên dịch thành các thành phần ứng dụng gốc, cho phép bạn xây dựng các ứng dụng di động gốc cho các nền tảng khác nhau (iOS, Android và Windows Mobile) trong JavaScript cho phép bạn sử dụng ReactJS để xây dựng các thành phần của mình và triển khai ReactJS trong mui xe.

Cả hai đều tuân theo phần mở rộng cú pháp JSX sang JavaScript.

Cả hai đều có nguồn mở từ Facebook.

Đây là dự án React .

Tại Facebook, họ đã phát minh ra React để JavaScript có thể thao tác trang web DOM nhanh hơn bằng mô hình DOM ảo.

Làm mới toàn bộ DOM chậm hơn so với mô hình dom-virtual React , chỉ làm mới các phần của trang (đọc: làm mới một phần).

Như bạn có thể hiểu từ video này , Facebook đã không phát minh ra React vì họ hiểu ngay rằng việc làm mới một phần sẽ nhanh hơn so với thông thường. Ban đầu, họ cần một cách để giảm thời gian xây dựng lại ứng dụng Facebook và may mắn là điều này đã mang lại một phần làm mới DOM.

React bản địa chỉ là hệ quả của React. Nó là một nền tảng để xây dựng các ứng dụng gốc bằng JavaScript.

Trước khi có React bản địa, bạn cần biết Java cho Android hoặc Objective-C cho iPhone và iPad để tạo các ứng dụng gốc.

Với React Native, có thể bắt chước hành vi của ứng dụng gốc trong JavaScript và cuối cùng, bạn sẽ nhận được mã cụ thể của nền tảng làm đầu ra. Bạn thậm chí có thể trộn mã gốc với JavaScript nếu bạn cần tối ưu hóa ứng dụng của mình hơn nữa.

Như Olivia Bishop đã nói trong video , 85% cơ sở mã gốc React có thể được chia sẻ giữa các nền tảng. Đây sẽ là các thành phần ứng dụng thường sử dụng và logic chung.

15% mã là nền tảng cụ thể. JavaScript dành riêng cho nền tảng là thứ mang lại hương vị nền tảng (và tạo ra sự khác biệt trong trải nghiệm).

Điều thú vị là mã cụ thể của nền tảng này - đã được viết, vì vậy bạn chỉ cần sử dụng nó.

Phản ứng:

React là một thư viện JavaScript khai báo, hiệu quả và linh hoạt để xây dựng giao diện người dùng.

Phản ứng bản địa:

React Native cho phép bạn xây dựng các ứng dụng di động chỉ bằng JavaScript. Nó sử dụng thiết kế giống như React, cho phép bạn soạn một giao diện người dùng di động phong phú từ các thành phần khai báo.
Với React Native, bạn không xây dựng ứng dụng web trên điện thoại di động, một ứng dụng HTML5, hay ứng dụng lai HTML5. Bạn xây dựng một ứng dụng di động thực sự không thể phân biệt được với một ứng dụng được xây dựng bằng Objective-C hoặc Java. React Native sử dụng các khối xây dựng UI cơ bản giống như các ứng dụng iOS và Android thông thường. Bạn chỉ cần đặt các khối xây dựng đó lại với nhau bằng JavaScript và React.
React Native cho phép bạn xây dựng ứng dụng của mình nhanh hơn. Thay vì biên dịch lại, bạn có thể tải lại ứng dụng của mình ngay lập tức. Với tải lại nóng, bạn thậm chí có thể chạy mã mới trong khi vẫn giữ trạng thái ứng dụng của mình. Hãy thử xem - đó là một trải nghiệm kỳ diệu.
React Native kết hợp trơn tru với các thành phần được viết bằng Objective-C, Java hoặc Swift. Thật đơn giản để thả xuống mã gốc nếu bạn cần tối ưu hóa một vài khía cạnh của ứng dụng. Bạn cũng dễ dàng xây dựng một phần ứng dụng của mình trong React Native và một phần ứng dụng của bạn bằng cách sử dụng mã gốc trực tiếp - đó là cách ứng dụng Facebook hoạt động.

Vì vậy, về cơ bản React là thư viện UI để xem ứng dụng web của bạn, sử dụng javascript và JSX , React bản địa là một thư viện bổ sung trên đầu React, để tạo ứng dụng gốc cho thiết bị iOSvà Androidthiết bị.

Mẫu mã phản ứng :

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')
);

Phản ứng mẫu mã gốc :

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>
    );
  }
}

Để biết thêm thông tin về React , hãy truy cập trang web chính thức của họ được tạo bởi nhóm facebook:

https://facebook.github.io/react

Để biết thêm thông tin về React Native , hãy truy cập trang web gốc React bên dưới:

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

ReactJS là một khung để xây dựng một hệ thống phân cấp các thành phần UI. Mỗi thành phần có nhà nước và đạo cụ. Dữ liệu chảy từ các thành phần cấp cao nhất đến cấp thấp thông qua các đạo cụ. Trạng thái được cập nhật trong thành phần cấp cao nhất bằng trình xử lý sự kiện.

React bản địa sử dụng khung React để xây dựng các thành phần cho ứng dụng di động. React bản địa cung cấp một bộ các thành phần cơ bản cho cả nền tảng iOS và Android. Một số thành phần trong React Native là Navigator, TabBar, Text, TextInput, View, ScrollView. Các thành phần này sử dụng các thành phần UI UIKit và Android gốc trong nội bộ. React bản địa cũng cho phép NativeModules nơi mã được viết bằng ObjectiveC cho iOS và Java cho Android có thể được sử dụng trong JavaScript.

Đầu tiên, những điểm tương đồng: Cả React & React Native (RN) được thiết kế để tạo giao diện người dùng linh hoạt. Có rất nhiều lợi ích cho các khung này, nhưng điều cơ bản nhất là chúng được tạo ra để phát triển UI. Facebook đã phát triển RN một vài năm sau React.

Phản ứng: Facebook đã thiết kế khung này gần giống như viết JavaScript của bạn bên trong HTML / XML, đó là lý do tại sao các thẻ được gọi là " JSX " (JavaScript XML) và tương tự như các thẻ giống như HTML quen thuộc như <div>hoặc <p>. Một đặc điểm nổi bật của React là các thẻ chữ in hoa biểu thị một thành phần tùy chỉnh, chẳng hạn như <MyFancyNavbar />, cũng tồn tại trong RN. Tuy nhiên, React sử dụng DOM . DOM tồn tại cho HTML, do đó React được sử dụng để phát triển web.

React Native: RN không sử dụng HTML và do đó không được sử dụng để phát triển web. Nó được sử dụng cho ... hầu như mọi thứ khác! Phát triển di động (cả iOS và Android), thiết bị thông minh (ví dụ: đồng hồ, TV), thực tế mở rộng, v.v. Vì RN không có DOM để tương tác, thay vì sử dụng cùng một loại thẻ HTML được sử dụng trong React, nó sử dụng chính nó các thẻ sau đó được biên dịch sang các ngôn ngữ khác. Ví dụ: thay vì <div>thẻ, nhà phát triển RN sử dụng thẻ tích hợp của RN <View>, sẽ biên dịch thành mã gốc khác trong trình duyệt (ví dụ: android.viewtrên Android; và UIViewtrên iOS).

Nói tóm lại: chúng rất giống nhau (để phát triển UI) nhưng được sử dụng cho các phương tiện khác nhau.

1. React-Native là một khuôn khổ để phát triển các ứng dụng Android và iOS, chia sẻ 80% - 90% mã Javascript.

Trong khi React.js là một thư viện Javascript gốc để phát triển các ứng dụng web.

2. Trong khi bạn sử dụng các thẻ như <View>, <Text>rất thường xuyên trong React-Native, React.js sử dụng các thẻ html web như thế <div> <h1> <h2>, chỉ là từ đồng nghĩa trong từ điển phát triển web / di động.

3. Đối với React.js, bạn cần DOM để hiển thị đường dẫn của thẻ html, trong khi đối với ứng dụng di động: React-Native sử dụng AppRegistry để đăng ký ứng dụng của bạn.

Tôi hy vọng đây là một lời giải thích dễ dàng cho sự khác biệt / tương đồng nhanh chóng trong React.js và React-Native.

Chúng ta không thể so sánh chúng chính xác. Có sự khác biệt trong trường hợp sử dụng .

(Cập nhật 2018)

Phản ứng

React có trọng tâm chính là Phát triển Web.

1. • DOM ảo của React nhanh hơn mô hình làm mới hoàn toàn thông thường , vì DOM ảo chỉ làm mới các phần của trang.
2. • Bạn có thể sử dụng lại các thành phần mã trong React, giúp bạn tiết kiệm rất nhiều thời gian. (Bạn cũng có thể trong React Native.)
3. • Là một doanh nghiệp: Việc hiển thị hoàn toàn các trang của bạn, từ máy chủ đến trình duyệt sẽ cải thiện SEO của ứng dụng web của bạn .
4. • Nó cải thiện tốc độ gỡ lỗi giúp cuộc sống của nhà phát triển của bạn dễ dàng hơn.
5. • Bạn có thể sử dụng phát triển ứng dụng di động lai, như Cordova hoặc Ionic, để xây dựng ứng dụng di động với React, nhưng xây dựng ứng dụng di động hiệu quả hơn với React Native từ nhiều điểm.

Phản ứng bản địa

Một phần mở rộng của React , được phát triển trên Mobile Development.

1. • Trọng tâm chính của nó là tất cả về Giao diện người dùng di động .
2. • iOS và Android được bảo hiểm.
3. • Các thành phần và mô-đun UI React Native UI cho phép các ứng dụng lai hiển thị nguyên bản.
4. • Không cần phải đại tu ứng dụng cũ của bạn. Tất cả những gì bạn phải làm là thêm các thành phần UI React Native vào mã ứng dụng hiện có của bạn mà không phải viết lại.
5. • Không sử dụng HTML để kết xuất ứng dụng . Cung cấp các thành phần thay thế hoạt động theo cách tương tự, vì vậy sẽ không khó để hiểu chúng.
6. • Vì mã của bạn không được hiển thị trong trang HTML, điều này cũng có nghĩa là bạn sẽ không thể sử dụng lại bất kỳ thư viện nào bạn đã sử dụng trước đây với React để hiển thị bất kỳ loại HTML, SVG hoặc Canvas nào.
7. • React Native không được tạo từ các thành phần web và không thể được tạo kiểu theo cùng một cách. Tạm biệt Ảnh động CSS!

Hy vọng tôi đã giúp bạn :)

Hiểu theo nghĩa đơn giản, React và React bản địa tuân theo các nguyên tắc thiết kế giống nhau ngoại trừ trong trường hợp thiết kế giao diện người dùng.

1. React bản địa có một bộ thẻ riêng để xác định giao diện người dùng cho thiết bị di động, nhưng cả hai đều sử dụng JSX để xác định các thành phần.
2. Cả hai hệ thống đều có mục đích chính là phát triển các thành phần UI có thể sử dụng lại và giảm nỗ lực phát triển bởi các thành phần của nó.
3. Nếu bạn lập kế hoạch và cấu trúc mã đúng, bạn có thể sử dụng cùng logic kinh doanh cho thiết bị di động và web

Dù sao, đó là một thư viện tuyệt vời để xây dựng giao diện người dùng cho thiết bị di động và web.

React là một thư viện JavaScript khai báo, hiệu quả và linh hoạt để xây dựng giao diện người dùng. Các thành phần của bạn nói với React những gì bạn muốn kết xuất - sau đó React sẽ cập nhật và hiển thị đúng các thành phần khi dữ liệu của bạn thay đổi. Ở đây, ShoppingList là một lớp thành phần React hoặc loại thành phần React.

Ứng dụng React Native là một ứng dụng di động thực sự. Với React Native, bạn không xây dựng ứng dụng web trên điện thoại di động, một ứng dụng HTML5, hay ứng dụng lai HTML5. Bạn xây dựng một ứng dụng di động thực sự không thể phân biệt được với một ứng dụng được xây dựng bằng Objective-C hoặc Java. React Native sử dụng các khối xây dựng UI cơ bản giống như các ứng dụng iOS và Android thông thường.

Thêm thông tin

ReactJS là một khung cốt lõi, có nghĩa là để xây dựng thành phần được phân lập dựa trên mô hình phản ứng, bạn có thể nghĩ nó là V từ MVC, mặc dù tôi muốn nói rằng phản ứng đó mang lại cảm giác khác, đặc biệt nếu bạn không quen với khái niệm phản ứng .

ReactNative là một lớp khác có nghĩa là có một thành phần được thiết lập cho nền tảng Android và iOS là phổ biến. Vì vậy, mã về cơ bản trông giống như ReactJS vì là ReactJS, nhưng nó tải tự nhiên trong các nền tảng di động. Bạn cũng có thể kết nối API tương đối phức tạp và nền tảng hơn với Java / Objective-C / Swift tùy thuộc vào HĐH và sử dụng nó trong React.

React Native được phát triển chủ yếu bằng JavaScript, có nghĩa là hầu hết các mã bạn cần để bắt đầu có thể được chia sẻ trên các nền tảng. React Native sẽ kết xuất bằng các thành phần gốc. Các ứng dụng React Native được phát triển theo ngôn ngữ theo yêu cầu của nền tảng mà nó nhắm mục tiêu, Objective-C hoặc Swift cho iOS, Java cho Android, v.v. Mã được viết không được chia sẻ trên các nền tảng và hành vi của chúng khác nhau. Họ có quyền truy cập trực tiếp vào tất cả các tính năng được cung cấp bởi nền tảng mà không có bất kỳ hạn chế nào.

React là một thư viện JavaScript mã nguồn mở được phát triển bởi Facebook để xây dựng giao diện người dùng. Nó được sử dụng để xử lý lớp xem cho các ứng dụng web và di động. ReactJS được sử dụng để tạo các thành phần UI có thể sử dụng lại. Đây hiện là một trong những thư viện JavaScript phổ biến nhất trong lĩnh vực này và nó có nền tảng vững chắc và cộng đồng lớn đằng sau nó. Nếu bạn học ReactJS, bạn cần có kiến ​​thức về JavaScript, HTML5 và CSS.

React là sự trừu tượng hóa cơ bản của React Native và React DOM , vì vậy nếu bạn sẽ làm việc với React Native, bạn cũng sẽ cần React ... tương tự với web nhưng thay vì React Native, bạn sẽ cần React DOM.

Vì React là cơ sở trừu tượng hóa nên cú pháp chung và quy trình công việc là như nhau nhưng các thành phần bạn sẽ sử dụng rất khác nhau, do đó bạn sẽ cần tìm hiểu những khác biệt này, đây là nội tuyến với React nên được gọi là "Học một lần viết ở bất cứ đâu" bởi vì nếu bạn biết React (trừu tượng hóa cơ bản) bạn có thể chỉ cần tìm hiểu sự khác biệt giữa nền tảng mà không cần học ngôn ngữ lập trình, cú pháp và quy trình làm việc khác.

React-Native là một khung công tác, trong đó ReactJS là một thư viện javascript mà bạn có thể sử dụng cho trang web của mình.

React -igen cung cấp các thành phần cốt lõi mặc định (hình ảnh, văn bản), trong đó React cung cấp một loạt các thành phần và làm cho chúng hoạt động cùng nhau.

React Js là một Thư viện Javascript nơi bạn có thể phát triển và chạy các ứng dụng web nhanh hơn bằng React.

React Native cho phép bạn xây dựng các ứng dụng di động chỉ bằng JavaScript, nó được sử dụng để phát triển ứng dụng Di động. thêm thông tin ở đây https://facebook.github.io/react-native/docs/getting-started.html

Liên quan đến vòng đời thành phần và tất cả các chuông và còi khác, nó hầu như giống nhau.

Sự khác biệt chủ yếu là đánh dấu JSX được sử dụng. React sử dụng một cái giống như html. Cái khác là đánh dấu được sử dụng bởi Reac -igen để hiển thị khung nhìn.

React Native dành cho các ứng dụng di động trong khi React dành cho các trang web (front-end). Cả hai đều là các khung được phát minh bởi Facebook. React Native là một khung phát triển đa nền tảng có nghĩa là người ta có thể viết gần như cùng một mã cho cả iOS và Android và nó sẽ hoạt động. Cá nhân tôi biết nhiều hơn về React Native nên tôi sẽ để nó ở đây.

React Js đang thao tác với HTML Dom. Nhưng React bản địa đang thao tác với thành phần ui riêng trên thiết bị di động (iOS / android).

Phản ứng là một thư viện javascript được sử dụng để xây dựng giao diện web. Bạn sẽ cần một gói như webpack và cố gắng cài đặt các mô-đun bạn sẽ cần để xây dựng trang web của mình.

Phản ứng bản địa là một khung javascript và nó đi kèm với mọi thứ bạn cần để viết các ứng dụng đa nền tảng (như iOS hoặc Android). Bạn sẽ cần xcode và android studio được cài đặt để xây dựng và triển khai ứng dụng của bạn.

Không giống như ReactJS, React-Native không sử dụng HTML nhưng các thành phần tương tự mà bạn có thể sử dụng trên ios và Android để xây dựng ứng dụng của mình. Các thành phần này sử dụng các thành phần gốc thực sự để xây dựng các ứng dụng ios và Android. Do các ứng dụng React-Native này cảm thấy thực sự không giống như các nền tảng phát triển Hybrid khác. Các thành phần cũng làm tăng khả năng sử dụng lại mã của bạn khi bạn không cần phải tạo lại giao diện người dùng trên ios và Android.

Nói một cách đơn giản, ReactJS là thư viện mẹ trả về một cái gì đó để hiển thị theo môi trường máy chủ (trình duyệt, thiết bị di động, máy chủ, máy tính để bàn..v.v). Ngoài việc kết xuất, nó còn cung cấp các phương thức khác như móc vòng đời .. vv

Trong trình duyệt, nó sử dụng một thư viện Reac-dom khác để kết xuất các phần tử DOM. Trong thiết bị di động, nó sử dụng các thành phần React-Native để kết xuất các thành phần UI gốc của cả nền tảng (Cả iOS và Android). VÌ THẾ,

Reac + Reac-dom = phát triển web

Reac + Reac -igen = phát triển di động

REACT là thư viện Javascript để xây dựng ứng dụng web giao diện lớn / nhỏ như Facebook.

PHẢN ỨNG TỰ NHIÊN là khung Javascript để phát triển ứng dụng di động gốc trên Android, IOS và Windows Phone.

Cả hai đều có nguồn gốc từ Facebook.

Dưới đây là những khác biệt mà tôi biết về:

1. Chúng có các thẻ html khác nhau: React Native đang sử dụng để xử lý văn bản và thay vì trong React.
2. React Native đang sử dụng các thành phần Touchable thay vì một phần tử nút thông thường.
3. React Native có các thành phần ScrollView và FlatList để hiển thị danh sách.
4. React Native đang sử dụng AsyncStorage trong khi React đang sử dụng bộ nhớ cục bộ.
5. Trong bộ định tuyến React Native có chức năng như một ngăn xếp, trong khi trong React, chúng tôi sử dụng các thành phần Tuyến để điều hướng ánh xạ.

Tóm lại: React.js để phát triển web trong khi React-Native cho phát triển ứng dụng di động

Phản ứng

• React được sử dụng để tạo trang web, ứng dụng web, SPA, v.v.
• React là một thư viện Javascript được sử dụng để tạo phân cấp UI.
• Nó chịu trách nhiệm hiển thị các thành phần UI, Nó được coi là phần V của khung MVC.
• DOM ảo của React nhanh hơn mô hình làm mới hoàn toàn thông thường, vì DOM ảo chỉ làm mới các phần của trang, do đó giảm thời gian làm mới trang.
• React sử dụng các thành phần làm đơn vị cơ bản của UI có thể được sử dụng lại giúp tiết kiệm thời gian mã hóa. Đơn giản và dễ học.

Phản ứng bản địa

• React Native là một khung được sử dụng để tạo các ứng dụng gốc đa nền tảng. Điều đó có nghĩa là bạn có thể tạo các ứng dụng gốc và cùng một ứng dụng sẽ chạy trên Android và ios.
• React bản địa có tất cả những lợi ích của ReactJS
• React bản địa cho phép các nhà phát triển tạo các ứng dụng gốc theo cách tiếp cận kiểu web.
• Nhà phát triển front end có thể trở thành nhà phát triển di động một cách dễ dàng.

React Js - React JS là thư viện javascript phía trước, thư viện lớn không phải là một khung công tác

• Nó tuân theo cách tiếp cận dựa trên thành phần giúp xây dựng
  các thành phần UI có thể tái sử dụng
  • Nó được sử dụng để phát triển giao diện người dùng di động và web phức tạp và tương tác
  • Mặc dù nó chỉ có nguồn mở vào năm 2015, nhưng nó có một trong những cộng đồng lớn nhất hỗ trợ nó.

ReactNative - React Native là một khung ứng dụng di động nguồn mở.

Một chút muộn cho bữa tiệc, nhưng đây là một câu trả lời toàn diện hơn với các ví dụ:

Phản ứng

React là một thư viện UI dựa trên thành phần sử dụng "DOM bóng" để cập nhật hiệu quả DOM với những gì đã thay đổi thay vì xây dựng lại toàn bộ cây DOM cho mỗi thay đổi. Ban đầu nó được xây dựng cho các ứng dụng web, nhưng bây giờ cũng có thể được sử dụng cho thiết bị di động & 3D / vr.

Các thành phần giữa React và React Native không thể được hoán đổi cho nhau vì React Native ánh xạ tới các thành phần UI di động gốc nhưng logic kinh doanh và mã không liên quan đến kết xuất có thể được sử dụng lại.

ReactDOM

Ban đầu được bao gồm với thư viện React nhưng đã bị tách ra sau khi React đang được sử dụng cho các nền tảng khác ngoài web. Nó đóng vai trò là điểm vào DOM và được sử dụng kết hợp với React.

Thí dụ:

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'));

Phản ứng bản địa

React Native là một khung di động đa nền tảng sử dụng React và giao tiếp giữa Javascript và đối tác gốc của nó thông qua một "cây cầu". Do đó, rất nhiều cấu trúc UI phải khác khi sử dụng React Native. Ví dụ: khi xây dựng danh sách, bạn sẽ gặp phải các vấn đề hiệu suất lớn nếu bạn cố gắng sử dụng mapđể xây dựng danh sách thay vì React NativeFlatList . React Native có thể được sử dụng để xây dựng các ứng dụng di động iOS / Android, cũng như cho đồng hồ thông minh và TV.

Hội chợ triển lãm

Hội chợ triển lãm là hướng đi khi bắt đầu một ứng dụng React Native mới.

Expo là một khuôn khổ và một nền tảng cho các ứng dụng React phổ quát. Đó là một bộ công cụ và dịch vụ được xây dựng xung quanh React Native và các nền tảng bản địa giúp bạn phát triển, xây dựng, triển khai và lặp lại nhanh chóng trên các ứng dụng web, Android và web

Ghi chú: Khi sử dụng hội chợ triển lãm, bạn chỉ có thể sử dụng Bản gốc mà họ cung cấp. Tất cả các thư viện bổ sung mà bạn bao gồm sẽ cần phải là javascript thuần túy hoặc bạn sẽ cần phải đẩy expo.

Ví dụ tương tự khi sử dụng 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,
    },
});

Sự khác biệt:

• Lưu ý rằng mọi thứ bên ngoài kết xuất có thể giữ nguyên, đây là lý do tại sao mã logic nghiệp vụ / vòng đời có thể được sử dụng lại trên React và React Native
• Trong React Native, tất cả các thành phần cần phải được nhập từ thư viện UI gốc hoặc thư viện UI khác
• Sử dụng một số API nhất định mà ánh xạ tới các thành phần gốc thường sẽ hiệu quả hơn là cố gắng xử lý mọi thứ ở phía javascript. Ví dụ. các thành phần ánh xạ để xây dựng một danh sách so với sử dụng danh sách phẳng
• Sự khác biệt tinh tế: những thứ như onClickbiến thànhonPress , React Native sử dụng biểu định kiểu để xác định kiểu theo cách hiệu quả hơn và React Native sử dụng flexbox làm cấu trúc bố cục mặc định để giữ mọi thứ phản hồi.
• Vì không có "DOM" truyền thống trong React Native, nên chỉ có các thư viện javascript thuần túy có thể được sử dụng trên cả React và React Native

React360

Điều đáng nói là React cũng có thể được sử dụng để phát triển ứng dụng 3D / VR. Cấu trúc thành phần rất giống với React Native. https://facebook.github.io/react-360/

React như điều hướng phản ứng của bạn và các thư viện phổ biến khác mà họ có chung.

Đáp lại nhận xét từ @poshest ở trên, đây là phiên bản React Native của mã Clock được đăng trước đó trong React (xin lỗi, tôi không thể nhận xét trực tiếp về phần này, nếu không tôi sẽ thêm mã vào đó):

Phản ứng mẫu mã gốc

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);

Lưu ý rằng kiểu dáng hoàn toàn là lựa chọn của tôi và không tìm cách sao chép trực tiếp các thẻ <h1>và <h2>thẻ được sử dụng trong mã React.

Một số khác biệt như sau:
1- React-Native là một khung được sử dụng để tạo Ứng dụng di động, trong đó ReactJS là thư viện javascript mà bạn có thể sử dụng cho trang web của mình.
2- React-Native không sử dụng HTML để kết xuất ứng dụng trong khi React sử dụng.
3- React-Native được sử dụng để chỉ phát triển Ứng dụng di động trong khi React sử dụng cho trang web và Di động.

Phản ứng bản địa

• Nó là một khung để xây dựng các ứng dụng gốc bằng JavaScript.

• Nó biên dịch thành các thành phần ứng dụng gốc, giúp bạn có thể xây dựng các ứng dụng di động gốc.

• Không cần phải đại tu ứng dụng cũ của bạn. Tất cả những gì bạn phải làm là thêm các thành phần UI React Native vào mã ứng dụng hiện có của bạn mà không phải viết lại.

Phản ứng js

• Nó hỗ trợ cả web front-end và được chạy trên máy chủ, để xây dựng giao diện người dùng và ứng dụng web.

• Nó cũng cho phép chúng ta tạo các thành phần UI có thể tái sử dụng.

• Bạn có thể sử dụng lại các thành phần mã trong React JS, giúp bạn tiết kiệm rất nhiều thời gian.

React.js thường được gọi là React hoặc ReactJS là một thư viện JavaScript chịu trách nhiệm xây dựng một hệ thống phân cấp các thành phần UI hoặc nói cách khác, chịu trách nhiệm hiển thị các thành phần UI. Nó cung cấp hỗ trợ cho cả frontend và phía máy chủ.

React Native là một khung để xây dựng các ứng dụng gốc bằng JavaScript. React Native biên dịch thành các thành phần ứng dụng gốc, giúp bạn có thể xây dựng các ứng dụng di động gốc. Trong React JS, React là sự trừu tượng hóa cơ bản của React DOM cho nền tảng web, trong khi với React Native, React vẫn là sự trừu tượng hóa cơ bản nhưng là React Native. Vì vậy, cú pháp và quy trình làm việc vẫn tương tự, nhưng các thành phần là khác nhau.