React NativeとReactの違いは何ですか?


730

私は好奇心からReactを学び始め、ReactとReact Nativeの違いを知りたかったのですが、Googleを使用して満足のいく答えを見つけることができませんでした。ReactとReact Nativeの形式は同じようです。それらは完全に異なる構文を持っていますか?


61
この質問をするほとんどの人が自分たちがどれほど互換性があるか知りたいだけなのに、誰もがディクショナリレスポンスを返しています。ReactコードをReact Nativeに移植するのはどれほど簡単ですか。iPadで必要な場合、Webアプリのフロントエンドを別の Reactコードに書き換える必要がありますか?どう違う?
Lawrence Weru 2018

9
ReactJSとReact-Nativeの主な違いは何ですか?ここにリンク medium.com/@alexmngn/...
core114

14
短い答えは、react-nativeはiOS、Android、およびWindows Mobile用のモバイルアプリをビルドし、コンパイルしてユーザーがインストールできるようにアプリストアに配置できるということです。Reactjsは、Webブラウザーで使用するWebページを構築するためのものです。どちらも再利用可能なコンポーネントを使用しますが、コンポーネント内の要素を(JSXを使用して)レンダリングするために使用する構文は異なります。反応JSXはレンダリングするHTMLに似たような部品<h1><p>などのネイティブアプリのビューコンポーネントレンダリングするネイティブが反応する、など<View><Text><Image><ScrollView>あなたが直接あなたがリワークしない限り、/あなたのUIコンポーネントのコードを再利用するすべての要素を置き換えることはできません、ように。
Ira Herman、

回答:


772

ReactJSはJavaScriptライブラリであり、ユーザーインターフェイスとWebアプリケーションを構築するために、フロントエンドWebとサーバー上での実行の両方をサポートしています。

React Nativeは、ネイティブアプリコンポーネントにコンパイルするモバイルフレームワークであり、JavaScriptでさまざまなプラットフォーム(iOS、Android、およびWindows Mobile)のネイティブモバイルアプリケーションを構築できます。これにより、ReactJSを使用してコンポーネントを構築し、ReactJSをフード。

どちらもJavaScriptのJSX構文拡張に従います。

どちらもFacebookによってオープンソース化されています。


3
@LemuelAdaneこれがどのように行われるかについてのFacebookからの書き込みです:facebook.github.io/react/docs/environments.html。ここでは、この実装方法をオーバー行く素敵なイントロです:maketea.co.uk/2014/06/30/...は
ネーダーダビット

61
それで、reactネイティブでアプリをビルドした場合、その一部またはすべてをreactJSで再利用できますか?
Troy Cosentino 2016

12
@MelAdaneポスターは、NodeJSでのReactJSライブラリの使用について言及している可能性があり、(Webpackのようなものを使用して)ビルド済みファイルを作成し、静的ファイルとしてクライアントに提供できます。
Pineda

9
reactを使用してwebappを構築した場合、同じHTML / JSコードをreactネイティブを使用してモバイルアプリで使用できますか?
Ravi Maniyar 2017年

14
@RaviManiyarいいえ、ビジネスロジックは再利用できますが、UIコードは再利用できません。React Nativeはネイティブuiコンポーネントを使用しますが、React.JSはweb用であり、uiはhtmlコンポーネントとcssを使用して構築されます
Chromonav

292

これがReactプロジェクトです。

Facebookでは、JavaScriptが仮想DOMモデルを使用してWebサイトのDOMをより速く操作できるように、Reactを発明しました。

DOMの完全更新は、ページの一部のみを更新するReact virtual-domモデル(読み取り:部分更新)と比較すると遅くなります。

このビデオからわかるように、FacebookはReactを発明しませんでした。部分的な更新が従来の更新よりも速いことをすぐに理解したためです。もともとFacebookアプリケーションの再構築時間を短縮する方法が必要でしたが、幸いにもこれによりDOMの部分的な更新が実現しました。

Reactネイティブは、Reactの結果です。JavaScriptを使用してネイティブアプリを構築するためのプラットフォームです。

Reactネイティブの前に、ネイティブアプリを作成するには、Java for AndroidまたはObjective-C for iPhone and iPadを知る必要がありました。

React Nativeを使用すると、JavaScriptでネイティブアプリの動作を模倣することができ、最後に、プラットフォーム固有のコードを出力として取得します。アプリケーションをさらに最適化する必要がある場合は、ネイティブコードとJavaScriptを混在させることもできます。

Olivia Bishopがビデオで述べたように、Reactネイティブコードベースの85%はプラットフォーム間で共有できます。これらは、アプリケーションが通常使用するコンポーネントと一般的なロジックです。

コードの15%はプラットフォーム固有です。プラットフォーム固有のJavaScriptは、プラットフォームのフレーバーを提供します(そしてエクスペリエンスに違いをもたらします)。

すばらしいのは、このプラットフォーム固有のコードです—すでに記述されているので、それを使用するだけで済みます。


9
私は個人的にこの回答をより気に入っています。より詳細であり、詳細な説明へのリンクを提供しているからです。
Cristi Potlog

7
私もこの答えが好きです。「ネイティブに反応する前に...」Xamarinもあるのを忘れないでください。;)
Aspアップロード

117

反応:

Reactは、ユーザーインターフェースを構築するための宣言的で効率的で柔軟なJavaScriptライブラリです。

リアクトネイティブ:

React Nativeでは、JavaScriptのみを使用してモバイルアプリを作成できます。Reactと同じデザインを使用して、宣言型コンポーネントからリッチなモバイルUIを作成できます。
React Nativeでは、「モバイルWebアプリ」、「HTML5アプリ」、または「ハイブリッドアプリ」を作成する必要はありません。Objective-CまたはJavaを使用して構築されたアプリと区別がつかない実際のモバイルアプリを構築します。React Nativeは、通常のiOSおよびAndroidアプリと同じ基本的なUIビルディングブロックを使用します。JavaScriptとReactを使用して、これらの構成要素を組み合わせるだけです。
React Nativeを使用すると、アプリをより速く構築できます。再コンパイルする代わりに、アプリを即座にリロードできます。ホットリロードを使用すると、アプリケーションの状態を維持しながら新しいコードを実行することもできます。それを試してみてください-それは魔法の経験です。
React Nativeは、Objective-C、Java、またはSwiftで記述されたコンポーネントとスムーズに結合します。アプリケーションのいくつかの側面を最適化する必要がある場合、ネイティブコードにドロップダウンするのは簡単です。また、React Nativeでアプリの一部を構築することも、ネイティブコードを直接使用してアプリの一部を構築することも簡単です。これがFacebookアプリの仕組みです。

そこで、基本的リアクトは、使用してWebアプリケーションのビューのためのUIライブラリーではJavaScriptJSXはネイティブが反応用のネイティブアプリを作るために、リアクトの上に余分なライブラリであるiOSAndroidデバイス。

Reactコードサンプル:

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


React Nativeコードサンプル:

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

Reactの詳細については、facebookチームが作成した公式Webサイトにアクセスしてください。

https://facebook.github.io/react

React Nativeの詳細については、以下のReactネイティブWebサイトにアクセスしてください。

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


40
あなたのコードサンプルは役に立ちますが、各フレームワークに実装されたSAMEコンポーネントを確認する方がはるかに優れています
poshest

8
あなたの答えは受け入れられるものでなければなりません。ReactとReact Nativeのアーキテクチャが同じかどうか、また両方のライブラリの定義ではなくコードが同じかどうかを確認するためにここに来ました。
Gherbi Hicham、2018

1
付け加えておきたいのは、生のネイティブになった場合、文字通り2行のコードしかなく、そのうちの1つは(自動的に)アウトレット用にセットアップされるということです。はい、日付フォーマッタが必要ですが、それでも1行だけです。実際のネイティブアプリよりも文字列が20行多いコードの場合、「これがリアクションが素晴らしい理由です」を読むのに苦労します。そうは言っても、私はあなたの答えに感謝します。そして、それが得意とするドメインでそれが提供するソリューションのためにReact on webを楽しんでさえいます。それを使わずにパターンを実装する方法をもっと多くの人に知ってもらい、それが便利な場合とメンテナンスの悪夢の場合とを比較してほしい
Stephen J

58

ReactJSは、UIコンポーネントの階層を構築するためのフレームワークです。各コンポーネントには状態と小道具があります。データは、プロップを介してトップから低レベルのコンポーネントに流れます。状態は、イベントハンドラーを使用して最上位コンポーネントで更新されます。

Reactネイティブは、モバイルアプリのコンポーネントを構築するためにReactフレームワークを使用します。Reactネイティブは、iOSおよびAndroidプラットフォームの両方に基本的なコンポーネントのセットを提供します。React Nativeのコンポーネントには、Navigator、TabBar、Text、TextInput、View、ScrollViewなどがあります。これらのコンポーネントは、内部でネイティブiOS UIKitおよびAndroid UIコンポーネントを使用します。Reactネイティブでは、ObjectiveC for iOSおよびJava for Androidで記述されたコードをJavaScript内で使用できるNativeModulesも使用できます。


41

まず、類似点: ReactとReact Native(RN)はどちらも柔軟なユーザーインターフェイスを作成するように設計されています。これらのフレームワークには多くの利点がありますが、最も基本的な要点は、UI開発用に作成されていることです。FacebookはReactの数年後にRNを開発しました。

反応: Facebookはほとんどのタグが「と呼ばれる理由は、あなたのHTML / XMLのあなたのJavaScriptの内部に、書き込みのようになり、このフレームワークを設計しJSX」(JavaScriptのXML)とおなじみのHTMLに似たようなタグに似ている<div>かを<p>。Reactの特徴は<MyFancyNavbar />、RNにも存在するなどのカスタムコンポーネントを示す大文字のタグです。ただし、ReactはDOMを使用します。DOMはHTML用に存在するため、ReactはWeb開発に使用されます。

React Native: RNはHTMLを使用しないため、Web開発には使用されません。それは...ほとんどすべてに使用されます!モバイル開発(iOSとAndroidの両方)、スマートデバイス(時計、テレビなど)、拡張現実などタグは他の言語にコンパイルされます。たとえば<div>、RN開発者は、タグの代わりに、内部で<View>他のネイティブコードにコンパイルされるRNの組み込みタグを使用します(android.viewAndroidやUIViewiOSなど)。

つまり、これらは非常によく似ていますが(UI開発の場合)、さまざまな媒体で使用されます。


良い答えです。もう少し詳しく説明して、さらにポイントを追加できます。読む人にとってはいいことです。
サラト

1
この回答を先頭に
JerryGoyal

38
  1. React-Nativeは、AndroidおよびiOSアプリケーションを開発するためのフレームワークであり、Javascriptコードの80%-90%を共有します。

一方、React.jsはWebアプリケーションを開発するための親JavaScriptライブラリです。

  1. のようなタグを使用しますが<View><Text>React-Nativeでは頻繁に使用されますが、React.jsはのようなWeb htmlタグを使用します<div> <h1> <h2>

  2. React.jsではhtmlタグのパスレンダリングにDOMが必要ですが、モバイルアプリケーションでは、React-NativeはAppRegistryを使用してアプリを登録します。

これが、React.jsとReact-Nativeの相違点/類似点の簡単な説明になることを願っています。


25

正確に比較することはできません。ユースケースに違いがあります。

(2018年更新)


ReactJS

ReactはWeb開発を主な焦点としています。

    • 仮想DOMはページの一部のみを更新するため、Reactの仮想DOMは従来の完全更新モデルよりも高速です。
    • Reactでコードコンポーネント再利用できるため、時間を大幅に節約できます。(React Nativeでもできます。)
    • ビジネスとして:サーバーからブラウザーに至るまで、ページを完全にレンダリングすると、WebアプリのSEO向上します
    • これは、デバッグの速度が向上しより簡単に開発者の人生を作ります。
    • CordovaやIonicなどのハイブリッドモバイルアプリ開発を使用して、Reactでモバイルアプリを構築できますが、React Nativeを使用してより効率的にモバイルアプリを構築できます。

リアクトネイティブ

モバイル開発に特化した Reactの拡張

    • その主な焦点はすべてモバイルユーザーインターフェイスです。
    • iOSとAndroidがカバーされています。
    • 再利用可能な React Native UI コンポーネントとモジュールにより、ハイブリッドアプリはネイティブにレンダリングできます。
    • 古いアプリをオーバーホールする必要はありません。React Native UIコンポーネントを既存のアプリのコード追加するだけで、書き直す必要はありません。
    • アプリのレンダリングにHTMLを使用しません。同様に機能する代替コンポーネントを提供するため、それらを理解するのは難しくありません。
    • コードはHTMLページでレンダリングされないため、これは、以前にReact使用した、あらゆる種類のHTML、SVG、またはCanvasをレンダリングするライブラリを再利用できないことも意味します。
    • React NativeはWeb要素から作成されていないため、同じ方法でスタイルを設定することはできません。さようならCSSアニメーション!

うまくいけば私はあなたを助けました:)


17

簡単に言うと、ReactとReactネイティブは、ユーザーインターフェイスを設計する場合を除いて、同じ設計原則に従います。

  1. Reactネイティブには、モバイルのユーザー・インターフェースを定義するための別個のタグのセットがありますが、どちらもコンポーネントの定義にJSXを使用します。
  2. 両方のシステムの主な目的は、再利用可能なUIコンポーネントを開発し、その構成によって開発労力を削減することです。
  3. コードを適切に計画および構成すると、モバイルとWebに同じビジネスロジックを使用できます。

とにかく、モバイルとWebのユーザーインターフェイスを構築するための優れたライブラリです。


16

Reactは、ユーザーインターフェースを構築するための宣言的で効率的で柔軟なJavaScriptライブラリです。コンポーネントはReactに何をレンダリングしたいかを伝えます。Reactは、データが変更されたときに適切なコンポーネントだけを効率的に更新してレンダリングします。ここで、ShoppingListはReactコンポーネントクラス、またはReactコンポーネントタイプです。

React Nativeアプリは、実際のモバイルアプリです。React Nativeでは、「モバイルWebアプリ」、「HTML5アプリ」、または「ハイブリッドアプリ」を構築する必要はありません。Objective-CまたはJavaを使用して構築されたアプリと区別がつかない実際のモバイルアプリを構築します。React Nativeは、通常のiOSおよびAndroidアプリと同じ基本的なUIビルディングブロックを使用します。

より詳しい情報


13

ReactJSはコアフレームワークであり、リアクティブパターンに基づいて分離されたコンポーネントを構築するためのものです。MVCのVと考えることができますが、特に、リアクティブコンセプトに慣れていない場合、reactは異なる感触をもたらすと述べたいと思います。 。

ReactNativeは、共通のAndroidおよびiOSプラットフォーム用のセットコンポーネントを持つことを意図した別のレイヤーです。したがって、コードはReactJSであるため、基本的にReactJSと同じように見えますが、モバイルプラットフォームでネイティブにロードされます。OSに応じて、Java / Objective-C / Swiftを使用して、より複雑でプラットフォームに関連するAPIをブリッジし、React内で使用することもできます。


13

React Nativeは主にJavaScriptで開発されています。つまり、開始するために必要なコードのほとんどは、プラットフォーム間で共有できます。React Nativeは、ネイティブコンポーネントを使用してレンダリングします。React Nativeアプリは、ターゲットとするプラットフォーム、Objective-CまたはSwift for iOS、Java for Androidなどに必要な言語で開発されています。記述されたコードはプラットフォーム間で共有されず、動作はさまざまです。彼らは制限なしにプラットフォームが提供するすべての機能に直接アクセスできます。

Reactは、ユーザーインターフェイスを構築するためにFacebookが開発したオープンソースのJavaScriptライブラリです。Webおよびモバイルアプリのビューレイヤーの処理に使用されます。ReactJSは、再利用可能なUIコンポーネントの作成に使用されていました。現在、ITフィールドで最も人気のあるJavaScriptライブラリの1つであり、その背後に強力な基盤と大規模なコミュニティがあります。ReactJSを学ぶ場合は、JavaScript、HTML5、CSSの知識が必要です。


12

ReactReact NativeReact DOMの基本的な抽象概念であるため、React Nativeで作業する場合は、React ...もWebと同じように必要ですが、React Nativeの代わりにReact DOMが必要です。

Reactは基本的な抽象概念であるため、一般的な構文とワークフローは同じですが、使用するコンポーネントは非常に異なるため、これらの違いを学ぶ必要があります。 React(ベースアブストラクション)を知っているので、別のプログラミング言語、構文、ワークフローを学ぶことなく、プラットフォーム間の違いを学ぶことができます。


11

React-Nativeはフレームワークであり、ReactJSはWebサイトで使用できるJavaScriptライブラリです。

Reactネイティブはデフォルトのコアコンポーネント(画像、テキスト)を提供します。Reactは一連のコンポーネントを提供し、それらを連携させます。


10

React Jsは、Reactを使用してより高速なWebアプリケーションを開発および実行できるJavaScriptライブラリです。

React Nativeを使用すると、JavaScriptのみを使用してモバイルアプリを構築できます。これは、モバイルアプリケーションの開発に使用されます。詳細はこちらhttps://facebook.github.io/react-native/docs/getting-started.html


9

コンポーネントのライフサイクルと他のすべてのベルとホイッスルに関しては、ほとんど同じです。

主な違いは、使用されるJSXマークアップです。Reactはhtmlに似たものを使用します。もう1つは、react-nativeがビューを表示するために使用するマークアップです。


8

React Nativeはモバイルアプリケーション用で、ReactはWebサイト(フロントエンド)用です。どちらもFacebookが発明したフレームワークです。React Nativeはクロスプラットフォーム開発フレームワークであり、IOSとAndroidの両方にほぼ同じコードを記述でき、機能します。私は個人的にReact Nativeについて多くのことを知っているので、このままにしておきます。


8

React JsはHTML Domを操作しています。しかし、Reactネイティブはモバイル(iOS / android)ネイティブuiコンポーネントを操作しています。


7

ReactJSは、Webインターフェースの構築に使用されるJavaScriptライブラリです。あなたはwebpackのようなバンドラーを必要とし、あなたのウェブサイトを構築するために必要なモジュールをインストールしようとします。

React NativeJavaScriptフレームワークであり、マルチプラットフォームアプリ(iOSやAndroidなど)を作成するために必要なものがすべて付属しています。アプリをビルドしてデプロイするには、xcodeとandroid studioがインストールされている必要があります。

ReactJSとは異なり、React-NativeはHTMLを使用しませんが、iOSおよびandroidで使用できる類似のコンポーネントを使用してアプリを構築します。これらのコンポーネントは、実際のネイティブコンポーネントを使用してiOSおよびAndroidアプリを構築します。このため、他のハイブリッド開発プラットフォームとは異なり、React-Nativeアプリはリアルに感じます。コンポーネントを使用すると、iOSとAndroidで同じユーザーインターフェイスを再度作成する必要がないため、コードの再利用性も向上します。


6

簡単に言えば、ReactJSは親ライブラリであり、ホスト環境(ブラウザー、モバイル、サーバー、デスクトップなど)に従ってレンダリングするものを返します。レンダリングとは別に、ライフサイクルフックなどの他のメソッドも提供します。

ブラウザでは、別のライブラリreact-domを使用してDOM要素をレンダリングします。モバイルでは、React-Nativeコンポーネントを使用して、プラットフォーム固有(IOSとAndroidの両方)のネイティブUIコンポーネントをレンダリングします。そう、

反応+反応ドム= Web開発

反応+反応ネイティブ=モバイル開発


4

REACTは、Facebookのような大/小インターフェイスのWebアプリケーションを構築するためのJavaScriptライブラリです。

リアクトネイティブは、Android、IOS、およびWindows Phoneでネイティブモバイルアプリケーションを開発するためのJavaScriptフレームワークです。

どちらもFacebookがオープンソース化しています。


3

ここに私が知っている違いがあります:

  1. それらには異なるhtmlタグがあります。ReactNativeは、Reactではなくテキストの処理に使用しています。
  2. React Nativeは、通常のボタン要素の代わりにタッチ可能なコンポーネントを使用しています。
  3. React Nativeには、リストをレンダリングするためのScrollViewおよびFlatListコンポーネントがあります。
  4. Reactがローカルストレージを使用している間、Re​​act NativeはAsyncStorageを使用しています。
  5. Reactネイティブルーターはスタックとして機能しますが、Reactでは、ナビゲーションのマッピングにRouteコンポーネントを使用します。


3

React vs React Native

ReactJS

  • Reactは、Webサイト、Webアプリ、SPAなどの作成に使用されます。
  • Reactは、UI階層の作成に使用されるJavaScriptライブラリです。
  • UIコンポーネントのレンダリングを担当し、MVCフレームワークのV部分と見なされます。
  • 仮想DOMはページの一部のみを更新するため、Reactの仮想DOMは従来の完全更新モデルよりも高速で、ページの更新時間が短縮されます。
  • ReactはコンポーネントをUIの基本単位として使用します。これを再利用できるため、コーディング時間が節約されます。シンプルで学びやすい。

リアクトネイティブ

  • React Nativeは、クロスプラットフォームのネイティブアプリを作成するために使用されるフレームワークです。つまり、ネイティブアプリを作成でき、同じアプリがAndroidとiOSで実行されます。
  • ReactネイティブにはReactJSのすべての利点があります
  • React Nativeを使用すると、開発者はWebスタイルのアプローチでネイティブアプリを作成できます。
  • フロントエンド開発者は簡単にモバイル開発者になることができます。

2

React Js -React JSはフロントエンドのjavascriptライブラリで、フレームワークではなく大きなライブラリです。


  • 再利用可能なUIコンポーネントの作成に役立つコンポーネントベースのアプローチに従います
    • 複雑でインタラクティブなWebおよびモバイルUIの開発に使用されます
    • 2015年にのみオープンソース化されましたが、それをサポートする最大のコミュニティの1つがあります。

ReactNative -React Nativeは、オープンソースのモバイルアプリケーションフレームワークです。


2

パーティーには少し遅れますが、例を挙げたより包括的な回答を次に示します。

反応する

ReactはコンポーネントベースのUIライブラリで、「シャドウDOM」を使用して、変更ごとにDOMツリー全体を再構築するのではなく、変更されたものでDOMを効率的に更新します。当初はウェブアプリ用に作成されましたが、現在はモバイルや3D / VRでも使用できます。

React NativeはネイティブモバイルUI要素にマップされますが、ビジネスロジックとレンダリングに関連しないコードを再利用できるため、ReactとReact Nativeの間のコンポーネントは交換できません。

ReactDOM

最初はReactライブラリーに含まれていましたが、ReactがWeb以外のプラットフォームで使用されるようになると分割されました。これはDOMへのエントリポイントとして機能し、Reactと組み合わせて使用​​されます。

例:

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

リアクトネイティブ

React Nativeは、Reactを使用し、JavaScriptと「ブリッジ」を介してネイティブ対応物との間で通信するクロスプラットフォームのモバイルフレームワークです。このため、React Nativeを使用する場合、多くのUI構造を異なるものにする必要があります。例:リストmapを作成するときに、React Nativeのリストの代わりに使用してリストを作成しようとすると、パフォーマンスに重大な問題が発生します。FlatList。React Nativeは、IOS / Androidモバイルアプリの構築だけでなく、スマートウォッチやTVの構築にも使用できます。

万博

Expoは、新しいReact Nativeアプリを開始する際の必須条件です。

Expoはフレームワークであり、ユニバーサルReactアプリケーションのプラットフォームです。これは、React Nativeおよびネイティブプラットフォームを中心に構築されたツールとサービスのセットであり、iOS、Android、およびWebアプリでの開発、ビルド、デプロイ、および迅速な反復に役立ちます

注意: Expoを使用する場合は、Expoが提供するネイティブAPIのみを使用できます。追加するすべてのライブラリは、純粋なjavascriptであるか、expoを取り出す必要があります。

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

違い:

  • レンダー以外はすべて同じままでよいことに注意してください。これが、ReactとReact Native全体でビジネスロジック/ライフサイクルロジックコードを再利用できる理由です。
  • React Nativeでは、すべてのコンポーネントをreact-nativeまたは別のUIライブラリからインポートする必要があります
  • ネイティブコンポーネントにマップする特定のAPIを使用すると、通常、JavaScript側ですべてを処理するよりもパフォーマンスが向上します。例:リストを作成するためのコンポーネントのマッピングとフラットリストの使用
  • 微妙な違い:React NativeはにonClick変わりonPress、スタイルシートを使用してより高性能な方法でスタイルを定義し、React Nativeはflexboxをデフォルトのレイアウト構造として使用して応答性を維持します。
  • React Nativeには従来の「DOM」がないため、純粋なjavascriptライブラリのみをReactとReact Nativeの両方で使用できます

React360

Reactは3D / VRアプリケーションの開発にも使用できることにも言及する価値があります。コンポーネントの構造は、React Nativeと非常によく似ています。https://facebook.github.io/react-360/


1

reactjsはブラウザdomではなくreact-domを使用しますが、react nativeは仮想domを使用しますが、2つは同じ構文を使用します。つまり、reactjsを使用できる場合、react nativeを使用できます。あなたの反応ナビゲーションや他の共通ライブラリと同じように。


短い答えは、react-nativeはiOS、Android、およびWindows Mobile用のモバイルアプリを構築し、コンパイルしてユーザーがインストールできるようにアプリストアに配置できるということです。Reactjsは、Webブラウザーで使用するWebページを構築するためのものです。どちらも再利用可能なコンポーネントを使用しますが、コンポーネント内の要素を(JSXを使用して)レンダリングするために使用する構文は異なります。反応JSXはレンダリング、HTMLなどのような成分<h1><p>ネイティブアプリのビューコンポーネントをレンダリングするようにネイティブが反応、等<View><Text>
Ira Herman

1

上記の@poshestからのコメントに応じて、Reactに以前に投稿されたClockコードのReactネイティブバージョンをここに示します(申し訳ありませんが、セクションに直接コメントすることができませんでした。

React Nativeコードサンプル

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

スタイリングは完全に私の選択であり、Reactコードで使用されるタグ<h1><h2>タグを直接複製しようとするものではないことに注意してください。


1

次のようにいくつかの相違点は次のとおりです。
1-リアクト-ネイティブReactJSがあなたのウェブサイトのために使用できるJavaScriptライブラリであるモバイルアプリを作成するために使用されるフレームワークです。
2- Reactが使用している間、Re​​act-NativeはHTMLを使用してアプリをレンダリングしません。
3- React-Nativeはモバイルアプリのみの開発に使用され、ReactはWebサイトとモバイルに使用されます。


0

リアクトネイティブ

  • JavaScriptを使用してネイティブアプリケーションを構築するためのフレームワークです。

  • ネイティブアプリコンポーネントにコンパイルされるため、ネイティブモバイルアプリケーションを構築できます。

  • 古いアプリをオーバーホールする必要はありません。React Native UIコンポーネントを既存のアプリのコードに追加するだけで、書き直す必要はありません。

React js

  • ユーザーインターフェイスとWebアプリケーションを構築するために、フロントエンドWebとサーバーでの実行の両方をサポートしています。

  • また、再利用可能なUIコンポーネントを作成することもできます。

  • React JSでコードコンポーネントを再利用できるため、時間を大幅に節約できます。


0

ReactまたはReactJSと呼ばれることが多いReact.jsは、UIコンポーネントの階層の構築を担当する、つまり、UIコンポーネントのレンダリングを担当するJavaScriptライブラリです。フロントエンドとサーバー側の両方をサポートします。

React Nativeは、JavaScriptを使用してネイティブアプリケーションを構築するためのフレームワークです。React Nativeは、ネイティブアプリコンポーネントにコンパイルされます。これにより、ネイティブモバイルアプリケーションを構築できます。React JSでは、ReactはWebプラットフォーム用のReact DOMの基本的な抽象概念ですが、React Nativeでも、Reactは基本的な抽象概念ですが、React Nativeの抽象概念です。したがって、構文とワークフローは似ていますが、コンポーネントは異なります。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.