web-dev-qa-db-ja.com

react.jsとAjaxの違い

React.jsについてGoogleで調べたところ、React.jsはユーザーインターフェイスの作成に使用されるフレームワークです。 Webサイトの特定の部分が頻繁に更新される場合、reactを使用できます。しかし、私はAjaxがこれだけに使用されていると混乱しています。ページを更新せずにAjaxを使用してサイトの一部を更新できます。テンプレート化には、ハンドルバーと口ひげを使用します。誰かがAjaxとはどのように反応するのか、なぜそれを使うべきなのかを説明してもらえますか？.

ajaxreactjshandlebars.jsmustache
21
yasar

Ajaxは、Webページをリロードせずに更新するために使用されます。サーバーにリクエストを送信しますが、通常、ページ全体をリロードすることなくブラウザーに新しい要素を動的に表示するJavaScriptによって応答が処理されます。

Reactは、inferfaceコンポーネントでページを動的に更新するJavaScriptライブラリです。コンポーネントは、JavaScriptの対話またはサーバーを経由するajaxリクエストによって計算されます。そのため、ReactJSはAjaxリクエストを使用してページを更新することもできます。

MoustacheとHandlebarsはReactJSとは少し異なります。主な目的は、ページに表示されるコンポーネントのテンプレートを変換することです。また、Ajaxを使用してデータを取得することもできます（テンプレートまたはJSONデータを取得するため）。

14
Christophe

これはおそらくあなたが探しているよりも簡単な説明ですが、混乱する可能性のある他の人には...

Reactを理解するには、AJAXがすべてを変更した方法を理解する必要があります。

90年代のインターネットを覚えていますか？

何かをクリックすると、ページがリロードされて、クリックで何が起こったのかを表示する必要があります（たとえそれが無かったとしても）。

これは素晴らしい例です 。そのページに移動してクリックします...クリックすると、まったく別のページに移動します。それは、AJAXより前のインターネットです。アクションを処理するには、同じページであっても、新しいページを読み込む必要がありました。

そのサイトは [〜＃〜] ajax [〜＃〜] の前に構築されました。

さて、このページをご覧ください。各回答の横に上矢印があります。先に進み、それらのいずれかをクリックします。ページはリロードされませんが、フィードバックが表示されます：矢印がオレンジ色に変わります。これは取るに足らないように見えるかもしれませんが、Webテクノロジーの大きな進歩を表しています。

良い例えは、アナログ腕時計です。顔には数字と手があり、側面にはノブがあります。ノブを回して時間を変更できます。時計を回転させるたびに、時計の顔、数字、針が破壊され、新しい時間が表示されるように再構築されます。これは、AJAX以前のインターネットです。

AJAX

AJAXは[〜＃〜] a [〜＃〜]synchronous[〜＃〜] j [〜 ＃〜]avascript[〜＃〜] a [〜＃〜]nd[〜＃〜] x [〜＃〜]ML。しかし、そこにある最も重要な単語はAsynchronousであり、これは「異なる時間に」を意味し、その結果、ユーザーインタラクションはユーザーの視野外で処理されます。

Stack Overflowの上矢印をクリックすると、次のようになります。

  1. ブラウザ（Chrome、Internet Explorer、Firefoxなど）がメッセージを別のコンピューターに送信します-スタックオーバーフロー " server」。 AJAXにより、ページをリロードせずにこのメッセージを送信できます。送信されるものはrequestと呼ばれます。これは、ブラウザがサーバーに何かを要求しているためです。サーバーから返されるのは、応答です。
  2. Stack Overflowサーバーは、「サーバー側」コード（ブラウザーに読み込まれる代わりにサーバー上に存在するコード）で ビジネスロジック を使用して、矢印をクリックできることを確認します（例許可されていないことは、ログインしていないときに投票することです）。
  3. SOサーバーは、基本的に「はい」または「いいえ」というメッセージをブラウザーに送信します（応答）。

  4. 返されるメッセージは通常、JSON（JavaScript Object Notation-文字列に変換されるJavaScriptオブジェクトの単なる凝った用語）です。おそらく次のようになります。

    {「アクション」：「賛成票」、「成功」：「真」}

JSONは比較的新しいものです。 JSONより前は、この応答はXMLで行われていました。

<xml>
  <action>upvote</action>
  <success>true</success>
</xml>

Reactはこの応答を理解し、ページ全体をリロードせずに矢印をオレンジ色にします。

今日ではすべてがAJAXを使用しています。 WebなしでWebを想像することは難しく、開発者として、AJAXが何であるかさえ知らなくてもWebアプリケーションを書くことがますます容易になっています。これは、Reactのような、使用するjavaScriptテクノロジーに同化されたためです。

React.js

React は、ユーザーインターフェイスを構築するためのJavaScriptライブラリです。

（ライブラリ、フレームワーク、ツールキットの違いについて詳しく知りたい場合は、 このすばらしい投稿 outを確認してください。）

基本的に、Reactには事前に記述されたコードがあり、最新のインタラクティブなWebアプリケーションをより簡単に、よりクリーンに作成できます。

React、VueおよびAngularを使用すると、「単一ページのアプリケーション」を作成できます。これは、1ページしか使用しないアプリケーションです！ Bill GatesのWebページを検討してください。クリックするたびに、画面上のHTML/CSSが変更されるだけです...単一ページのアプリケーションであれば、別のページに移動する必要はありません。

Reactにはさらに多くの機能がありますが、AJAXに関する限り、Reactは応答を受け取り、「ビュー」（ユーザーに見えるもの）を更新して変更を表示します。

または、より正確に言うと、開発者はReactに「ユーザーがクリックしてAJAX応答に「アクション」があり、「賛成」で「成功」が真のときにオレンジ色に変わる矢印が必要です、」およびReactが残りを処理します。この場合、矢印は「コンポーネント」になります。コンポーネントは、オプションを取り込んで出力を生成するReactの主要な構成要素です。通常、出力はWebページに表示するHTMLです。

口ひげ

Mustache はテンプレートシステムです。つまり、Webページのコンテンツと構造を分離できます。たとえば、これは口ひげのない通常のHTMLページです。

<h1>This is the Title of My Page. This is Content</h1>
<p>This is a paragraph. blah blah blah. My email is [email protected]</p>
<footer>Contact me at [email protected]</footer>

構造はHTMLによって定義されます。 <h1>と<p>は、コンテンツがセクションに分割される方法をブラウザ（Chrome、Firefox、またはIE）に伝える「タグ」です。

メールアドレスを変更したいとします。 2箇所で変更する必要があります。これは悪いことです。たぶん10年が経ち、あなたがメールを置く場所をすべて忘れるか、他の誰かがそれに取り組んでいて、彼らはそれが2つの場所にあることを知らないので、彼らは1つの場所を変更しますが、お客様が間違ったアドレスにメールを送信する可能性があります。それにはお金がかかります。

Moustacheは、変数を使用してHTMLでコンテンツを表示できるようにすることで、（特に）これを修正することを目的としています。口ひげでは、次のようなことができます。

<script>
  var json = {
    title: "This is the Title of My Page. This is Content",
    paragraph: "This is a paragraph. blah blah blah. My email is ",
    footer_verbiage: "Contact me at ",
    email: "[email protected]"
  }
</script>

<h1>{{title}}</h1>
<p>{{paragraph}} {{email}}</p>
<footer>{{footer_verbiage}} {{email}}</footer>

構造とは別に、スクリプトでコンテンツを定義しているのをご覧ください。したがって、メールを変更する場合は、1か所で変更するだけで済み、メールを表示したいすべての場所に反映されます。

AJAXと同じように、この方法は当時としては極めて重要だったため、現在では最新のjsライブラリに組み込まれています。すぐに、Mustacheのことを知らなくても、あなたのキャリア全体に行くことができますが、毎日それを使用してください。

実際、AngularとVueは同様のテンプレートシステム、二重中括弧、およびすべてを使用しますが、Mustacheについては言及していません。ベテランのコーダーにも馴染みがあり、初心者にとっても簡単に習得できます。ライブラリに応じて異なるテンプレートシステムを習得する必要はありません。 AngularとVueは、口ひげをライブラリに組み込んだため、より長く関連します。

祖父の時計の例に戻ります-口ひげは時計の針です。手は、シーンであることから、与えられたデータの形を取ります。

ハンドルバー

ハンドルバー は、口ひげをより強力にします。違いについての詳細は good post をご覧ください。上記の例では、ハンドルバーを使用すると、サーバーではなくクライアント（ブラウザー）でテンプレート（HTML）を再レンダリングできます。したがって、AJAXが一部のコンテンツを変更した場合、HTMLにライブで表示される可能性があります。

繰り返しになりますが、Handlebarsは非常に革新的で、新しいものに自動的に組み込まれました。これがパターンであり、これらのことを学ぶことは、Webアプリケーションテクノロジーが非常に急速に動いており、食欲をそそるので、この時点で学習履歴とほとんど同じです。

祖父の時計の例では、ハンドルバーを使用すると、時計の文字盤を刻む代わりに秒針がシームレスに動くことができます。口ひげがなければ、サーバーは次に目にするものを構築し、それをクライアントに送信します。そうすれば、それを見ることができます。

たとえば、SOからログアウトしてから何かを投票しようとすると、上矢印に注意を払ってください。しばらくするとオレンジ色に変わり、灰色に戻ってログインするように求められます。これは、クリックに反応し、サーバーからの「OK」を待つのではなく、すぐにオレンジ色に指示するロジックがコンピューターにあるためです。

すべて一緒に結ぶ

前に見たように、90年代のWebページはシームレスに変更できませんでした。データがサーバーに送信されるまで待つ必要があり、サーバーは新しいhtmlページを送り返します。それは「静的な」ウェブページです。開発者の介入なしにコンテンツを変更することはできないため、最初のコード例は静的です。

ただし、2番目の例は、コンテンツがjson変数によって定義されるため、動的なWebページです。はい、json変数は同じページ上で定義されます（これはまだ静的なページであることを意味します）が、代わりにajax関数によって定義された場合、いつでも変更できます。これは、基本的なAJAX関数の外観です。

AJAX.get("http://stackoverflow.api.com?upvote", function(response){
  json = response.data;
});

呼び出しているURLと、応答をどうするかを指定する関数があることがわかります。

Reactは、上記のAJAXを構築し、単一ページアプリケーションの開発をそれなしよりも迅速に促進しますMustacheはコンテンツをWebページ外で定義できるようにし、Handlebarsはクライアント上のそのWebページを変更します（a Webブラウザー）データがサーバーから返されるとき。

ボーナス-角度とは何ですか？なぜそんなに大したことですか？：

上記の「すべてを結び付ける」セクションでは、少なくとも3つのJavaScriptライブラリを実行するすべてのものが、Angular自体ですべて実行され、コードが少なく、読みやすくなっています（欠点はありますが）。

[〜＃〜] mvc [〜＃〜]は、モデル、ビュー、コントローラーを表します。これは、Webアプリケーションが複雑さを回避できるコーディングパターンです（「 spaghetti code 」を参照）。純粋なjqueryでアプリを作成したことがある場合は、すぐに手に負えなくなる可能性があることを知っています。 React、Mustache、Handlebarが一緒になってこの種のパラダイムを設定します。

角度を入力

Angularを使用すると、これらすべてを1つのフレームワークで実行できます。上記の例では、メールを変更し、Webページでライブで変更を確認できます。これにより、Angularはゲームチェンジャーになり、基本を簡単に学ぶことができますが、非常に複雑になります。

以前見たように、Angularのすべての素晴らしさを網羅する別のフレームワークがリリースされるのはおそらく時間の問題でしょうが、多くの欠点は取り除かれています。実際、 Vue はAngularとReactの一般的なコンポーネントを組み合わせており、どちらよりも高速に動作します。現在、Vueコミュニティは小さいですが、急速に成長しています。

概要：

ReactはAJAXに対するもので、飛行機は車輪に対応しています-車輪は飛行機が機能するために必要ですが、飛行機について考えるときに最初に考えることではないので、実際には比較できません。ホイールは飛行機の一部であり、AJAXからReactまでです-AJAXはReactの一部です。

オンラインコースをチェックして、このことを理解することをお勧めします。 TypeScriptについて学ぶためにudemyを使用し、クラスは良いと思いました。しかし、私もいくつかの本当の悪臭を見つけたので、レビューを必ず読んでください。私はこれを言うためにudemyから支払われていませんが、彼らが私に支払いをしたいなら、私は感謝するでしょう。

59
Travis Heeter

簡単に言うと、ReactはFacebookによって構築されたJavaScriptライブラリです。多くの拡張機能があるため、フレームワークとして一般的に見られますが、公式ドキュメントではユーザーインターフェイスを構築するためのライブラリとしてラベル付けしています。 Ajaxは、プログラマーがコードのフローをまったく中断せずにWeb APIを呼び出すために使用する手法です。その日の終わりには、JavaScriptコードは行ごとに同期的に実行し、Ajaxは同期コード内で非同期に実行されますが、コードを一時停止せず、API呼び出しの送受信を待機します。バックグラウンドで行われるので、そのデータを取得するのにかかる遅延を心配する必要はありません。実際にReactコードでAjaxを使用できます。AjaxはFetchと呼ばれるものを使用して実際に呼び出しますAPIを使用すると、さまざまなメソッドを使用して、 .thenや.catchまたはAsync/AwaitなどのAPI。また、Fetchを使用する必要はまったくありません。Axiosを使用するなど、AjaxでAPIを呼び出す他のサードパーティの方法があります。これらのさまざまなツールの使用方法に関するビデオをご覧になることをお勧めします。これらのツールがすべてどのように機能するかを理解すると、ReactとAjaxを一緒に使用して、これがお役に立てば幸いです、しかし、あなたがこの答えについてどのように感じたかに投票してください。

1
albert_anthony6

反応を明確にすることはフレームワークではなく、ライブラリです！

馬の口からそれを取る：

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

0
dier

Ajax

Http要求を送信するためにajaxを使用しています。また、ajaxのみを使用してページの特定の領域（DOM）を再レンダリングすることはできません。 ajax呼び出しで応答が出された後、ページを再レンダリングするためにjqueryが必要です。実際、jquery + HTMLとReact.jsの比較は、ajaxとReact.jsの比較よりもはるかに優れています。

React.js

React.jsの役割は、ページ（DOM）を小さなピース（コンポーネント）に分割することです。例：-プロフィール画像エリア、メインナビゲーション、サイドバー、テキストフィールド、ボタン。など。大きな和平から小さな和平へ。最も重要なことは、これらのコンポーネントに機能をバインドできることです。例：-ユーザーが、「プロフィール画像エリア」の上をクリックしてプロフィール画像をアップロードするためにポップアップを必要とすると仮定しましょう。ポップアップを開く関数を作成できます。また、プロファイル画像をデータベースにアップロードする別の関数を作成することもできます。このようにして、React.js内でajaxを使用できます

これに従ってください チュートリアル 。

0
Eranga Kapukotuwa