web-dev-qa-db-ja.com

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

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

javascriptreactjsreact-nativejavascript-framework
498
shiva kumar

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

React Native はネイティブアプリコンポーネントにコンパイルされるモバイルフレームワークで、異なるプラットフォーム（iOS、Android、Windows Mobile）用のネイティブモバイルアプリケーションをJavaScriptで構築でき、ReactJSを使用してコンポーネントを構築できます。フードの下でReactJSを実装します。

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

543
Nader Dabit

あなたが言ったように、Googleはあなたにこれを説明することができません、しかし、彼らがReactを発明したならば、Googleはとても幸せになるでしょう。

これがReactプロジェクトです（ https://github.com/facebook/react ）。

Facebookでは、彼らがReactを発明したので、JavaScriptは仮想DOMモデルを使用してウェブサイトDOMをより速く操作することができます。

DOMのフルリフレッシュは、ページの一部のみをリフレッシュする React virtual-domモデル と比較して遅くなります（パーシャルリフレッシュ）。

あなたがこの video から理解できるように、FacebookはReactを発明しませんでした。もともと彼らはFacebookアプリケーションの再構築時間を減らす方法を必要としていました、そして幸運にもこれは部分的なDOMのリフレッシュを活性化させました。

React native（ https://github.com/facebook/react-native ）はReactの結果にすぎません。 JavaScriptを使ってネイティブアプリを構築するためのプラットフォームです。

ネイティブアプリケーションを作成するには、React nativeより前にAndroid用のJava、またはiPhoneおよびiPad用のObjective-Cの知識が必要です。

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

Olivia Bishopが video で言ったように、React nativeコードベースの85％はプラットフォーム間で共有できます。これらは、アプリケーションが通常使用するコンポーネントと共通ロジックです。

コードの15％はプラットフォーム固有です。プラットフォーム固有のJavaScriptは、プラットフォームの特色を与えるものです（そして経験に違いをもたらします）。

素晴らしいのは、このプラットフォーム固有のコードです - 既に書かれているので、あなたはそれを使う必要があるだけです。

191
prosti

反応：

Reactは宣言的、効率的、そして柔軟なユーザーインターフェース構築用JavaScriptライブラリです。

ネイティブの反応：

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

したがって、基本的に React はWebアプリケーションのビュー用のUIライブラリです。 javascript および _ jsx _ 、 React native は追加機能です。 iOSとAndroidデバイス用のネイティブアプリを作るために、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')
);


ネイティブネイティブを反応させる コードサンプル：

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で公式ウェブサイトをご覧ください。

https://facebook.github.io/react

React Native の詳細については、React nativeのWebサイトを参照してください。

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

66
Alireza

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

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

43
vijayst
  1. React-Nativeは、JavaScriptコードの80％〜90％を共有するAndroidおよびiOSアプリケーションを開発するためのフレームワークです。

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

  1. React-Nativeでは<View>、<Text>のようなタグを頻繁に使用しますが、React.jsは<div><h1><h2>のようなWeb HTMLタグを使用します。これらはWeb /モバイル開発の辞書の同義語にすぎません。

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

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

28
Анураг Пракаш

まず、類似点：反応と反応ネイティブ（RN）の両方が、開発者が柔軟なユーザーインターフェイスを作成できるように設計されました。これらのフレームワークには多くの利点がありますが、最も基本的なことはUI開発のために作られていることです。

React：Facebook（reactの数年後にRNを開発した）は、このフレームワークをHTML/XML内でJavaScriptを記述するように設計しました。タグが「JSX」（JavaScript XML）と呼ばれる理由（たとえば、<div>や<p>などの使い慣れたHTMLのようなタグ）。 Reactの特徴は、<MyFancyNavbar />などのカスタムコンポーネントを示す大文字のタグです。これはRNにも当てはまります。ただし、それらの違いは、Reactが DOM を使用していることです。 DOMはHTMLに存在するため、ReactはWeb開発に使用されます。

React Native：RNはHTMLを使用しないため、Web開発には使用されません。それは...他のほとんどすべてに使用されます！モバイル開発（iOSとAndroidの両方）、スマートデバイス（時計、テレビなど）、拡張現実など。RNはやり取りするDOMを持たないため、Reactで使用されるのと同じ種類のHTMLタグを使用する代わりに、独自のその後、他の言語にコンパイルされるタグ。たとえば、RN開発者は<div>タグの代わりに、RNの組み込み<View>タグを使用します。これは、ボンネットの下で他のネイティブコードにコンパイルされます（例：AndroidのAndroid.view; iOSのUIViewname__）。

要するに：それらは非常に似ています（UI開発用）が、異なる媒体に使用されます。

20
Ryo-code

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

（2018アップデート）

ReactJS

メインとしてfocus：Web Development

    • Reactの仮想DOMは従来の完全更新モデルよりも高速です。仮想DOMはページの一部のみを更新するためです。
    • コードコンポーネントの再利用 in React JSを使用すると、時間を大幅に節約できます。 （RNでもできるように）
    • ビジネスとして：サーバーからブラウザへのページの完全なレンダリングは、WebアプリのSEOの改善です。
    • それデバッグの速度を改善する開発者の生活を楽にします。
    • CordovaまたはIonicなどのハイブリッドモバイルアプリ開発を使用して、ReactJSでモバイルアプリを構築することもできますが、React Nativeを使用して多くの点でモバイルアプリをより効率的に構築できます。

ReactNative

reactの拡張、モバイル開発

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

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

14
Adrian Gheorghe

Reactはユーザーインターフェイスを構築するための宣言的、効率的、そして柔軟なJavaScriptライブラリです。あなたのレンダリングしたいものをReactに伝えます - そしてあなたのデータが変わったときにReactは正しいコンポーネントを効率的に更新しレンダリングします。ここで、ShoppingListはReactコンポーネントクラス、またはReactコンポーネントタイプです。

React Nativeアプリは本物のモバイルアプリです。 React Nativeでは、「モバイルWebアプリ」、「HTML 5アプリ」、または「ハイブリッドアプリ」を構築することはありません。あなたは、Objective-CやJavaを使って構築されたアプリと区別がつかない本当のモバイルアプリを構築します。 React Nativeは、通常のiOSおよびAndroidアプリと同じ基本的なUI構成要素を使用しています。

詳細情報

12
Bipon Biswas

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

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

10
Ramya Ram

ReactJSは、リアクティブパターンに基づいて分離されたコンポーネントを構築するためのコアフレームワークです。MVCからのVと考えることができます。 。

ReactNativeは、一般的なAndroidおよびiOSプラットフォーム用のセットコンポーネントを持つことを目的としたもう1つの層です。そのため、コードはReactJSと基本的にはReactJSと同じに見えますが、モバイルプラットフォームではネイティブに読み込まれます。 OSに応じてJava/Objective-C/Swiftを使用してより複雑でプラットフォーム関連のAPIをブリッジし、React内で使用することもできます。

10
Necronet

React Jsは、Reactを使ってより速いWebアプリケーションを開発し実行することができるJavascriptライブラリです。

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

8
Nischith

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

React-nativeはデフォルトのコアコンポーネント（画像、テキスト）を提供します。ここでReactは多数のコンポーネントを提供し、それらを連携させます。

8
iPragmatech

React は React Native および React DOM の基本的な抽象概念です。したがって、React Nativeを使用する場合はReact ...も必要です。ReactNativeの代わりにWebでも同様です。 React DOMが必要になります。

Reactは基本的な抽象概念であるため、一般的な構文とワークフローは同じですが、使用するコンポーネントは非常に異なるため、これらの違いを学習する必要があります。 React（基本抽象化）を知っていれば、他のプログラミング言語、構文、およびワークフローを学ぶことなくプラットフォーム間の違いを簡単に学ぶことができます。

8
Sharlon M. Balbalosa

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

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

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

7
Manzoor Samad

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

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

7
Scott Blanch

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

7
S. Sinha

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

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

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

4
Daniel Agus Sidabutar

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

React Native は javascriptフレームワーク であり、マルチプラットフォームアプリケーション（iOSやAndroidなど）の作成に必要なものがすべて付属しています。アプリをビルドしてデプロイするには、xcodeとAndroid Studioがインストールされている必要があります。

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

4
Ashish Pisey

これが私が知っている違いです：

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

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

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

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

2
Pankaj Gadhiya

要約：Web開発用のReact.jsとモバイルアプリケーション開発用のReactネイティブ

1
Albert A

reactjsはブラウザdomではなくreact-domを使用しますが、react nativeは仮想domを使用しますが、どちらも同じシンタックスを使用します。つまり、reactjsを使用できる場合はreact nativeを使用できます。あなたの反応ナビゲーションや他の一般的なライブラリのようにそれらは共通しています。

1
solex

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

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

反応+反応-dom =ウェブ開発

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

1
Rajender Dandyal

React JsはHTML Domを使って操作しています。しかしReact nativeはモバイル（iOS/Android）ネイティブUIコンポーネントで操作しています。

0
Uzama Zaid
  • React ReactまたはReactJSとよく呼ばれるのは、UIコンポーネントの階層を構築する、つまりUIコンポーネントのレンダリングを担当するJavaScriptライブラリです。フロントエンドとサーバーサイドの両方のサポートを提供します。ネイティブネイティブ JavaScriptを使用してネイティブアプリケーションを構築するためのフレームワークです。 React Nativeはネイティブアプリコンポーネントにコンパイルし、ネイティブモバイルアプリケーションを構築することを可能にします。

  • React JSでは、ReactはWebプラットフォーム用のReact DOMの基本抽象化ですが、 React Native では、Reactは依然として基本抽象化ですがReactネイティブの抽象化です。そのため、構文とワークフローは似ていますが、コンポーネントは異なります。

  • React は、Webインターフェイス用の動的で高性能のレスポンシブUIを構築するのに理想的です。一方、 React Native は、モバイルアプリに本当にネイティブな感じを与えるためのものです。
0
abhinandan sharma

React NativeはReactの結果であり、JavaScriptを使ってネイティブアプリケーションを構築することができます。 Reactと同じデザインを使用することで、宣言型コンポーネントから豊富なモバイルUIを構築できます。これは、JSXとして知られるJavaScriptとXML風のマークアップを使用してモバイルアプリのインターフェースを開発します。

React Nativeを使用すると、AndroidおよびiOS用のネイティブモバイルアプリを作成することができます（Java、Objective-C、またはSwiftを使用して作成されたものと同様）。このReactフレームワークでは、Javascriptを使用してネイティブアプリの動作を模倣し、プラットフォーム固有のコードを出力として取得することができます。モバイルアプリ開発におけるReact Nativeの優れた利点には、次のものがあります。

複数プラットフォーム用の単一環境：React Nativeは、クロスプラットフォームのネイティブアプリケーション開発を容易にします。つまり、あるプラットフォーム用に書かれたコードを別のプラットフォームで使用することができます。ルックアンドフィールに妥協することなく、React Nativeはコスト効率の高いモバイルアプリを構築し、開発者が2つの異なるプラットフォーム用に異なるAPIを統合して新しいロジックを作成する負担を軽減できるようにします。

ネイティブコードとReactコンポーネントを組み合わせる：開発者は、Objective-C、Java、またはSwiftのコンポーネントをReactネイティブコードと組み合わせることで、アプリの効率を最適化できます。 React Nativeでアプリコンポーネントの一部とネイティブコードを使用してその一部を構築してからそれらをマージするのは簡単です。

0
user2236335