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

804
shiva kumar 2016-01-07 09:51.

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

30 answers

847
Nader Dabit 2016-01-07 10:04.

ReactJSはJavaScriptライブラリであり、ユーザーインターフェイスとWebアプリケーションを構築するために、フロントエンドWebをサポートし、サーバー上で実行されます。これは、再利用可能なコンポーネントの概念に従います。

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

どちらもJavaScriptのJSX構文拡張に従います。これは、内部のReact.createElement呼び出しにコンパイルされます。JSXの詳細

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

142
Alireza 2017-04-18 16:07.

反応:

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アプリの仕組みです。

つまり、基本的にReactは、JavaScriptJSXを使用してWebアプリを表示するためのUIライブラリです。ReactnativeはReactの上部にある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 NativeWebサイトにアクセスしてください。

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

63
vijayst 2016-08-20 18:13.

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

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

57
Ryo-code 2018-07-15 09:53.

まず、類似点: 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の両方)、スマートデバイス(時計、テレビなど)、拡張現実など。RNにはReactで使用されるのと同じ種類のHTMLタグを使用する代わりに、対話するDOMがないため、独自のDOMを使用します。その後、他の言語にコンパイルされるタグ。たとえば<div>、RN開発者は、タグの代わりにRNの組み込み<View>タグを使用します。このタグは、内部で他のネイティブコードにコンパイルされます(android.viewAndroidやUIViewiOSなど)。

つまり、これらは(UI開発では)非常に似ていますが、さまざまなメディアで使用されます。

44
Анураг Пракаш 2017-03-10 21:51.
  1. React-Nativeは、Javascriptコードの80%〜90%を共有するAndroidおよびiOSアプリケーションを開発するためのフレームワークです。

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

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

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

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

34
Adrian Gheorghe 2018-09-21 10:57.

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

(2018年更新)


ReactJS

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

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

リアクトネイティブ

モバイル開発にニッチなReactの拡張

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

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

21
Manzoor Samad 2017-04-04 06:05.

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

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

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

18
Bipon Biswas 2017-08-29 18:31.

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

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

より詳しい情報

14
Necronet 2017-04-19 11:50.

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

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

14
Ramya Ram 2017-05-23 02:05.

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

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

13
Sharlon M. Balbalosa 2017-05-15 16:15.

反応の基本抽象化であるネイティブに反応し、DOMを反応させるので、あなたがして仕事に行くのがネイティブに反応ならば、あなたはまた、ウェブと同じ...反応するが、代わりにあなたが必要とDOMを反応するネイティブの反応が必要になります。

Reactは基本的な抽象化であるため、一般的な構文とワークフローは同じですが、使用するコンポーネントが大きく異なるため、これらの違いを学習する必要があります。これは、Reactのいわゆるmotoと一致します。 React(ベース抽象化)を知っているので、別のプログラミング言語、構文、ワークフローを学ぶことなく、プラットフォーム間の違いを簡単に学ぶことができます。

12
iPragmatech 2017-03-07 02:25.

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

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

11
Nischith 2017-03-03 02:46.

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

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

10
Scott Blanch 2017-07-26 10:12.

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

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

10
S. Sinha 2017-08-09 13:29.

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

8
Uzama Zaid 2019-04-18 09:22.

ReactJsはHTMLDomを操作しています。しかし、React Nativeはモバイル(iOS / android)ネイティブUIコンポーネントで操作しています。

7
Ashish Pisey 2018-03-15 19:23.

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

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

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

6
Rajender Dandyal 2019-03-16 21:43.

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

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

react + react-dom = Web開発

react + react-native =モバイル開発

4
Daniel Agus Sidabutar 2018-03-27 07:50.

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

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

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

4
Matt Aft 2019-10-28 19:12.

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

React

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モバイルアプリの構築だけでなく、スマートウォッチやテレビにも使用できます。

博覧会

Expoは、新しいReactNativeアプリを起動する際の頼みの綱です。

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

注: 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とReactNativeで再利用できる理由です。
  • React Nativeでは、すべてのコンポーネントをreact-nativeまたは別のUIライブラリからインポートする必要があります
  • ネイティブコンポーネントにマップする特定のAPIを使用すると、通常、JavaScript側ですべてを処理しようとするよりもパフォーマンスが向上します。例 リストを作成するためのコンポーネントのマッピングとフラットリストの使用
  • 微妙な違い:にonClick変わるonPress、React Nativeはスタイルシートを使用してよりパフォーマンスの高い方法でスタイルを定義し、ReactNativeはデフォルトのレイアウト構造としてflexboxを使用して応答性を維持します。
  • React Nativeには従来の「DOM」がないため、ReactとReactNativeの両方で使用できるのは純粋なJavaScriptライブラリのみです。

React360

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

4
Waheed Akhtar 2020-05-10 01:04.

すでに多くの答えがあることは知っていますが、これらすべてを読んだ後でも、まだ説明の余地があると思います。

React

React = Vaila JS + ES6 + HTML + CSS = JSX

それでは話がについて聞かせて反応するので、最初のネイティブ反応もに基づいて反応するとJSの同じ概念が使用されてきています。

Reactは、美しく、柔軟性があり、パフォーマンスの高いシングルページWebアプリケーションを作成するために使用されるJSライブラリです。そのためシングルページWebアプリとは何かという疑問が頭に浮かびます。

シングルページアプリケーション

シングルページアプリケーションは、ブラウザ内で動作するアプリであり、使用中にページを再読み込みする必要はありません。このタイプのアプリケーションを毎日使用しています。たとえば、Gmail、Googleマップ、Facebook、GitHubなどです。SPAはすべて、ブラウザで「自然な」環境を模倣しようとすることで、優れたUXを提供することを目的としています。ページのリロードや余分な待機時間はありません。アクセスするのは1つのWebページだけで、JavaScriptを使用して他のすべてのコンテンツをロードします。これらのコンテンツは非常に依存しています。SPAはマークアップとデータを個別に要求し、ブラウザでページを直接レンダリングします。これは、AngularJS、Ember.js、Meteor.js、Knockout.js、React.js、Vue.jsなどの高度なJavaScriptフレームワークのおかげで実現できます。単一ページのサイトは、コンテンツがシンプル、簡単、そして実行可能な方法でユーザーに提示される1つの快適なWeb​​スペースにユーザーを維持するのに役立ちます。

使い方

これでSPAとは何かがわかりました。ご存知のとおり、これはWebアプリであるため、ブラウザーでの実行にHTML要素を使用し、これらの要素に関連するすべての機能の処理にJSを使用します。これは、使用仮想ドムのコンポーネントで新しい変更をレンダリングします。

リアクトネイティブ

これで、reactについて少し考えたので、react-nativeについて話しましょう。

React-Native = React(Vaila JS + ES6 + JSとネイティブコード間のブリッジ)+ Native(IOS、Android)

React-Reactを使用して美しいクロスプラットフォームモバイルアプリ(Android、IOS)を作成するために使用されるネイティブ。

使い方

React-Nativeには2つのスレッドがあります。

  1. JSスレッド

  2. ネイティブスレッド

JSスレッドはすべての計算を実行し、データをネイティブに渡します。

Reactは非同期ブリッジを使用してデータをJSON形式でネイティブスレッドに渡します。これはreact-nativeと呼ばれます。

そのため、react-nativeでプレゼンテーションビューを作成するためにネイティブコンポーネントを使用し、そのブリッジを使用してこれら2つの異なる世界間で通信します。

これら2つのフレームワークの共通点と相違点について話しましょう。

|---------------------|------------------|---------------------|
|      Feature        |     React        |  React-Native       |
|---------------------|------------------|---------------------|
|    Platform         |        Web       |  Android, IOS, JS   |
|---------------------|------------------|---------------------|
|   Open Source       |        Yes       |        Yes          |
|---------------------|------------------|---------------------|
| Presentational View |   HTML + CSS     | Native Components   |
|---------------------|------------------|---------------------|
|  Arichtecure        |  Virtual Dom     | Virtual Dom + Bridge|
|---------------------|------------------|---------------------|
|   Animations        | CSS Animations   | Native Animations   | 
|---------------------|------------------|---------------------|
|     Styling         |     CSS          | JS Stylesheets      |
|---------------------|------------------|---------------------|
|  Developed By       |  Facebook        |      Facebook       |
|---------------------|------------------|---------------------|
4
GOVINDARAJ 2019-12-28 23:08.

ReactJS

  • Reactは、Webサイト、Webアプリ、SPAなどの作成に使用されます。

  • Reactは、UI階層の作成に使用されるJavascriptライブラリです。

  • UIコンポーネントのレンダリングを担当し、MVCフレームワークのV部分と見なされます。

  • Reactの仮想DOMは、従来の完全更新モデルよりも高速です。これは、仮想DOMがページの一部のみを更新するため、ページの更新時間が短縮されるためです。

  • ReactはコンポーネントをUIの基本単位として使用し、再利用できるため、コーディング時間を節約できます。シンプルで習得しやすい。

    リアクトネイティブ

  • React Nativeは、クロスプラットフォームのネイティブアプリを作成するために使用されるフレームワークです。つまり、ネイティブアプリを作成でき、同じアプリがAndroidとiOSで実行されます。

  • React Nativeには、ReactJSのすべての利点があります

  • React Nativeを使用すると、開発者はWebスタイルのアプローチでネイティブアプリを作成できます。

3
Dusty 2018-05-17 10:21.

私が知っている違いは次のとおりです。

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

要約:Web開発用のReact.jsとモバイルアプリ開発用のReact-Native

3
Pankaj Gadhiya 2019-07-06 01:39.

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

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

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

2
Martin N 2019-09-13 22:55.

上記のReact NativeとReactの違いは何ですか?からのコメントに応えて、これは以前にReactに投稿されたClockコードのReact Nativeバージョンです(申し訳ありませんが、セクションに直接コメントすることはできませんでした。そうでなければ、そこにコードを追加していました):

ReactNativeコードサンプル

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>タグを直接複製しようとはしないことに注意してください。

2
Naveen 2019-10-09 08:11.

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

2
Guilherme de Jesus Santos 2020-06-05 08:08.

簡単な比較は

ReactJs

return(
    <div>
      <p>Hello World</p>
    </div>
)

リアクトネイティブ

return(
    <View>
      <Text>Hello World</Text>
    </View>
)

以下のようなHTML要素を持っていないネイティブの反応divph1、など、代わりにそれは理にかなっているモバイル用のコンポーネントを持っています。
詳細については、https://reactnative.dev/docs/components-and-apisをご覧ください。

1
solex 2019-01-17 02:57.

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

1
heart hacker 2019-09-04 00:32.

リアクトネイティブ

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

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

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

React js

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

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

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

Related questions

MORE COOL STUFF

「水曜日」シーズン1の中心には大きなミステリーがあります

「水曜日」シーズン1の中心には大きなミステリーがあります

Netflixの「水曜日」は、典型的な10代のドラマ以上のものであり、実際、シーズン1にはその中心に大きなミステリーがあります.

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ケイト・ミドルトンは、州の夕食会と州の訪問中にカミラ・パーカー・ボウルズからスポットライトを奪いたくなかった、と専門家は言う.

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンが、オリビア・ワイルドが彼女とハリー・スタイルズとの間の「難しい」が「非常に友好的」な分割を恒久的にすることを望んでいる理由を見つけてください.

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする 

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする&nbsp;

エリザベス女王の死後、ケイト・ミドルトンが舞台裏で「非常に困難な時期」を過ごしていたと伝えられている理由を調べてください.

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セント ヘレナ島のジェイコブズ ラダーは 699 段の真っ直ぐ上る階段で、頂上に到達すると証明書が発行されるほどの難易度です。

The Secrets of Airline Travel Quiz

The Secrets of Airline Travel Quiz

Air travel is far more than getting from point A to point B safely. How much do you know about the million little details that go into flying on airplanes?

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

Total War:Warhammer:Kotakuレビュー

Total War:Warhammer:Kotakuレビュー

私はこのゲームを嫌う準備ができていました。先週の前に、Total War:Warhammerについての私の考えがありました:それでもここに私は、私の手にある完成品であり、私は変わった男です。

涙の道:軍事化された帝国主義勢力がスタンディングロックキャンプを占領

涙の道:軍事化された帝国主義勢力がスタンディングロックキャンプを占領

スタンディングロックスー族のメンバーと水の保護者は、ノースダコタ州のスタンディングロックにあるオセティサコウィンキャンプを去ります。(Twitter経由のCNNスクリーンショット)火と煙がスカイラインを覆い、スタンディングロックスー族のメンバーと水の保護者が、聖なるものを守りながら建てた家、オセティサコウィン(セブンカウンシルファイアーズ)キャンプから行進し、太鼓を打ち、歌い、祈りました。ダコタアクセスパイプラインとしても知られる「ブラックスネーク」からの土地。

シアーズとKマートはイヴァンカ・トランプの商品を自分たちで取り除いています

シアーズとKマートはイヴァンカ・トランプの商品を自分たちで取り除いています

写真:APシアーズとKマートは、イヴァンカ・トランプのトランプホームアイテムのコレクションも、誰も購入したくないために削除しました。シアーズとKマートの両方の親会社であるシアーズホールディングスは、土曜日のABCニュースへの声明で、彼らが気にかけていると辛抱強く説明しましたトランプラインを売り続けるにはお金を稼ぐことについてあまりにも多く。

ポテトチップスでたった10分でスペインのトルティーヤを作る

ポテトチップスでたった10分でスペインのトルティーヤを作る

伝統的なスペインのトルティーヤは通常、オリーブオイルで柔らかくなるまで調理されたポテトから始まります(30分以上かかる場合があります)が、ケトルで調理されたポテトチップスの助けを借りてわずか10分でテーブルに置くことができます。上のビデオはすべてがバラバラにならないように裏返す方法を含め、レシピ全体を説明しますが、必要なのは4〜5個の卵と3カップのケトルチップスだけです。

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、子供向けのパズルの本の序文を書き、ジョージ王子、シャーロット王女、ルイ王子と一緒にテキストを読むと述べた.

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

Yak's Produce は、数十個のつぶれたメロンを野生動物のリハビリ専門家であるレスリー グリーンと彼女のルイジアナ州の救助施設で暮らす 42 匹の動物に寄付しました。

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

8 枚目のスタジオ アルバムのリリースに向けて準備を進めているデミ ロヴァートは、「スーパー グレート ガイ」と付き合っている、と情報筋は PEOPLE に確認しています。

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

イーサン プラスの誕生日のお祝いは、TLC のウェルカム トゥ プラスビルのシーズン 4 のフィナーレで、戦争中の母親のキム プラスと妻のオリビア プラスを結びつけました。

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

ホームオフィスのセットアップ術を極めよう!AppExert の開発者は、家族全員が一緒にいる場合でも、在宅勤務の技術を習得しています。祖父や曽祖父が共同家族で暮らしていた頃の記憶がよみがえりました。

2022 年、私たちのデジタル ライフはどこで終わり、「リアル ライフ」はどこから始まるのでしょうか?

20 年前のタイムトラベラーでさえ、日常生活におけるデジタルおよびインターネットベースのサービスの重要性に驚くことでしょう。MySpace、eBay、Napster などのプラットフォームは、高速化に焦点を合わせた世界がどのようなものになるかを示してくれました。

ニューロマーケティングの秘密科学

ニューロマーケティングの秘密科学

マーケティング担当者が人間の欲望を操作するために使用する、最先端の (気味が悪いと言う人もいます) メソッドを探ります。カートをいっぱいにして 3 桁の領収書を持って店を出る前に、ほんの数点の商品を買いに行ったことはありませんか? あなたは一人じゃない。

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

私たちが住んでいる世界を確実に理解するには、データが必要です。ただし、空間参照がない場合、このデータは地理的コンテキストがないと役に立たなくなる可能性があります。

Language