>> [音楽再生]
>> ネールMEHTA：ここにそれが行きます。
>> まあ、誰もが、ウェブへの歓迎 将来のアプリが反応します。
これはCS50です。
私の名前はニールです。
私はCS50と二年生のためのTAよ ハーバード大学で、非常に、非常に
情熱的なウェブ開発者。
だから私は非常にエキサイティングだと 今日はあなたに話してさ、
あなたがここにいるかどうかを自宅で 見て、約再び、である、反応させ、
私は、Webアプリケーションの、未来が言ったように。
>> だから、Webフレームワークである反応します。
そして、私が言ってきたように ここにいくつかの人々に、
フレームワークはちょうどです あなたが使用できるツールのセット
あなたのWeb​​アプリケーションを構築し、構築します。
また、Webアプリケーションは、再び、ウェブサイトです Facebookのようなインタラクティブであること、
Twitter.com、Instagram.com、何でも。
>> だからFacebookはWebフレームワークであります それはFacebookのによって開発されました
リアクトback--数年です。
それ以来使用されていますで 自分の携帯アプリにFacebookの
ウェブアプリ、Instagramの。
カーンアカデミーは別です リアクトの顕著な早期導入。
>> それは実際になってきています 非常に人気。
あなたは今までの角のようなものを使用している場合か、 骨格は、これは、同じファミリーであり、
それは遠いので、持っています 彼らの人気を上回ります。
これは、ホットな新のことです。
それは本当に、本当に巨大です。
>> そして、そうではありません同じように良いですリアクト 建物インタフェースのWebフレームワーク。
これは、Webインターフェイスを構築するための良いことです。
事もあります 呼ばれるネイティブ反応します
あなたがインターフェースを構築することができます AndroidとiOS用
将来的には、おそらく他のプラットフォーム ちょうど同じJavaScriptコードを使用して。
あなたは正確に同じを使用することができます JavaScriptコードは、ウェブサイトをレンダリングします
アンドロイドアプリとiOSアプリをレンダリングします。
>> それは非常に、非常にエキサイティングな時間です​​。
それは本当に、本当にクールな機会です。
それは本当に普遍的なウェブです インタフェース開発ツール、
それは非常に、非常にです 重要なことは知っています。
そして、私は人々が言っ​​ていたとして、 前に、これは、私が思うに、
どのように我々変更する予定です 永遠のWebアプリケーションを構築します。
だから、多分ビット誇張だが、私 それは知っているかなり良いことだと思います。
>> [OK]を、ので、反応させ、何ですか？
反応することができますフレームワークです インタフェースを構築するために使用します。
インタフェースは、再び、あります ウェブページ、右？
だからここInstagram.comだ、用途が反応します。
>> 上に構築されて反応します 部品のアイデア。
コンポーネントはHTMLです ステロイドの要素、
そうHTML要素は、ボタンのようなものです。
これは段落です。
それは右、ヘッダーですか？
そして、Instagramのは、これらを使用しますが、それになります またリアクトのコンポーネントを使用します。
>> 構成要素である反応 高性能になったHTML要素
それは自身の挙動を有します それらの中に含まれていました。
そこで、一例として、私たちは持っている可能性が 時間要素、時間成分、
どのように含まれています タイムスタンプ、あなたが知っています、
プロファイルコンポーネントいます プロフィール画像が含まれています
そして、人の名前。
それは、のようなカウンタを持つことができます 同類の数のように数えることができます、
あなたがそれをクリックすると、それはよ 同類の数を増やします。
コンポーネントだけです HTMLコードの束こと
いくつかの機能を持っています その中に包まれました。
だから、HTML要素のようなものです ステロイドに、私は前に言ったように。
あなたは、これらのコンポーネントを取ることができ、 あなたはそれらを一緒に置くことができます
で、新しいコンポーネントを作成します この場合、ポスト成分
これは、すべてこのようなものが含まれています。
それは時間、プロファイルを含んでいるでしょう、 LikeCounter、多分コメント
多分イメージそのもの。
だからウェブアプリはちょうど取ることによって構築されています コンポーネントと一緒にそれらを置きます。
Instagramのフィードは以外の何ものでもありません ポストの束を次々、
各ポストは、時間のように含まれています ように、プロフィールLikeCounter、と。
それは一種の家を建てるようなものです。
あなたはビルドされません。 上から下の家。
あなたはあなたをcomponents--取ります バスルームのようになります。
あなたがそれらを貼り付けbedroom--を取ります 一緒に、あなたは新しいコンポーネントを持っています。
あなたは家の新しい部分を持っています。
>> したがって、すべての周りに構築されて反応します そのコンポーネントのこのアイデア
宣言型であること、インタラクティブです。
あなただけのものをAと言うのように プロファイルがあり、それをレンダリングします。
彼らは、構成可能です。
あなたは入れ、時間とプロファイルを取ることができます 一緒に、より良いものを作ります。
そして、彼らは再利用可能ですので、もしあなた ポストのソースコードを持って、
あなたはどこにでもを埋め込むことができます。
>> あなたはInstagramのを埋め込むことができます あなた自身のウェブサイト上での事。
あなたがFacebookの中に埋め込むことができ、例えば、 限り、それが使用するだけでなく反応します。
だから、コンポーネントは、本当に、本当に、本当にあります ウェブの強力なビルディング・ブロック
それはどこでも使用され、置くことができます 一緒に新しいビルディングブロックを作るために。
それは非常に、非常にです 高レベルの概要。
だから、再び、あなたが持っている場合 任意の点でのご質問
原子炉の哲学について、 私を停止し、私が知っているように、コーディング。
>> [OK]を、ので、それのためのクールな反応であります 見ての別の方法を持っています
あなたがウェブアプリケーションを構築する方法で。
おそらく、MVC、Aの聞きました モデルあなたはCS50または任意に制御します
あなたが使用する他のプロービングクラス。
そして、ほとんどのフレームワークは、 MVCの考え方を中心に構築。
反応しないです。
アイデアを中心に構築されて反応します 一方向のデータフローの
ここでこのチャートやグラフィックに見られるように。
>> 基本的には、データソースを持っています。
また、データソースが決定します 特定のコンポーネントを配置する方法について説明します。
そして、コンポーネントはなります その後、彼らが変更されたとき、
彼らが教えてくれます 変更するためのデータソース。
>> Instagramのを使用するには たとえば、あなたが持つかもしれません
以下のようなポストオブジェクトのリスト データベースか何かインチ
データそれ。
そして、私達のポストコンポーネント そのデータがかかります、
およびレンダリングするためにそのデータを使用 画面上のもの。
それは何矢印 データからコンポーネントにあり、
そしてその後、同じデータが使用されていること 部品の束をレンダリングします。
>> Facebookのメッセンジャーでは、のために リアクトある例、
あなたがリストを持っているかもしれません データソースとしてのメッセージ。
そして、それはないだろうレンダリング メッセージのリストのみ
だけでなく、友人のリストあなたが持っています。
あなたは未読数を持っています。
たぶん、またFacebookの事をレンダリング それは、Facebook.comの下部にあるのです。
同じデータであります 真実の単一のソース
それは、多くの原因となります コンポーネントがレンダリングされます。
そして、いつでもそれらの1 コンポーネントが変更され、
それが戻って データソースを変更します。
>> あなたは正しい、メッセージを送信しますか？
つまり、データソースを変更します。
あなたは、あなたのメッセージを読んで、 あなたは0に未読設定します。
つまり、データソースを変更します。
そして、もう一つのこれらのすべてに気付きます 矢印同じデータに戻ります
ソース、あなたが知っているので、 特定のデータセットが与えられ、
あなたが正確に把握 ページは次のようにしようとしています。
それは確定的です。
あなたは、与えられた特定のデータを知って、どのような ページは次のようにしようとしています。
あなたはそれが起こっているのかを予測することができます 動作し、どのように物事が起こっています
彼らは一緒に入れているときに動作するように。
>> そして、私は百万のコンポーネントを持っていた場合 ここで、それは右、同じように動作しますか？
あなたがいずれかを持っていません 奇妙な相互接続。
一つのデータは、百万のコンポーネントをレンダリング。
百万のコンポーネント可能性 戻ってデータを編集します。
そして、これは非常にいいです。
我々は、構成可能構築しています 簡単にスケーラブルなWebアプリケーション。
>> もし1つのデータソースが、 真理の源。
それはあなたのコンポーネントを通知します どのようにページをレイアウトするために、
コンポーネントはなります 相互作用を扱います。
そして、彼らは変更する場合 物事は、ちょうど戻って
そして、変更するには、データソースを教えてください。
理にかなって？
したがって、すべての理解についてですリアクト どのコンポーネントを構築するために
およびコンポーネントを作成する方法 外の世界と対話します。
>> コンポーネントの相互作用を作ります 外の世界との
別の技術を使用しています これは、フラックスと呼ばれます
あるフレームワークです リアクトの上に追加されました。
我々はそれについて話をするつもりはありません。
私たちは与えられた、についてもっと話をするつもりです データは、どのようにコンポーネントをレンダリングすることができますか？
>> だから、あなたのための本当にクールで反応させ、 あなたが望む任意のバックエンドでそれを使用することができます。
あなたは、Pythonバックエンドのようにしている場合、 あなたのPythonはいくつかのデータを吐き出すことができれば、
それをレンダリングすることができます反応します。
あなたには、JS出力されていない場合 データのために、それをレンダリング反応します。
Rubyはとアップレール データは、それをレンダリング反応します。
>> したがって、基本的にウェブで反応させ、 コンポーネントとフロントエンドをview--
いかなるデータソースの。
だから、データソースからに行きます コンポーネントを反応させることは非常に簡単です。
他の方法で行くことは少し難しいです。
私は前に述べたようにそれはフラックスを使用しています。
私たちは、その中に取得することはできません。
私たちは、上より焦点を当てます データ - 部品面。
あなたが作るこ​​とができますこの方法で クール、楽しいウェブアプリ。
それは外の世界には影響しません 今のところ、それはまた別の話です。
>> [OK]を、ので、もしあなたがここにいました 私の最後のセミナー
あなたがのためにコードのすべてを知っていますよ 今日の話は、次のURLであることを行っています
ここで、申し訳ありませんが、ここではこのURL。
そして、基本的に私達は行くつもりです 多分4つのステップ、5を経て、
おそらくない5。
私たちは4つのステップを移動します サンプルをビルドのアプリを反応します。
そして、そのようにすべてのソースコード 方法のあらゆるステップのための
ので、もし、ここで右になるだろう あなたは、自宅で一緒にフォローしています
このコードを熟読すること自由に感じ。
あなたはここに沿って、以下の場合は、 私たちは、画面上に表示されます
それについては心配しないでください。
しかし、あなたが自宅にいる場合は、感じます このウェブサイトを訪問すること自由に。
そして、ええ、あなたが得ることができる必要があります あなたがここに必要があると思い、すべてのコード。
だから、同様に良好なチートシートです あなたの将来の冒険のために反応します。
クール、もしそうであればここに誰もが、 あなたが自宅にいる場合であっても、
is.gd/cs50react、このウェブサイトをプルアップし、 何の資本なし、アンダースコア、ない何もありません。
>> あなたが見えるページが表示されます このような少し。
これはCodePenというものです。
CodePenは、共同で コー​​ディング環境
私はここでコードを書くことができたとし、 それが自動的に送信されます。
そして、このように、私はコードを書くことができます。
私はここでコードを実行することができます。
>> example--については、それが参照reloads--場合、 私は、ページ上のJavaScriptコードを実行していますよ
右ここで、それはよ ウェブページを自動的にレンダリングします
このJavaScriptコードで。
そして、これは方法です 私たちはコードを試してみるために
使用することなく、本当に迅速な 私たちのIDや地元のマシンを使用
または何でも。
それはあなたがモックアップするための非常に簡単な方法です コー​​ドの種類を試します。
>> だから私は、服用するつもりです コー​​ド例、ここでそれを置きます。
私たちは、それを介して作業することになるだろう。
そして、あなたは自宅にいるなら、あなた 同様にこれをプルアップすることができます。
そして、私はすでにインストールしています ここで反応するので、あなただけのことができます
ここに独自のコードを書き、 あなた自身の遊び場としてそれを試してみてください。
>> うん、誰もがする​​場合 ここでこのリンクを開きます。
私に親指を与えてください あなたはそれが開いていたらアップ。
クールクールクール。
何も、今のところここにありませんが、 我々は非常にすぐにそれを変更します。
>> [OK]を、ので、JavaScriptのですリアクト ライブラリ、およびなど、
JavaScriptの知識を必要とします これは、ウェブプログラミング言語です。
そして、それは他のもののために使われています 今あまりにしかし、主にWebを開発
言語、あなたがに慣れていない場合ので、 それは、JSforCats.comというサイトをお読みください。
それは素晴らしいです。
あなたは、JavaScriptを学ぶことができます 時間半インチ
それは信じられないです。
>> だから、それを読み取りを与えます。
また、こちらのHTMLがたくさんあり​​ます 我々はもちろん、Webページを設計しています。
だから、あなたがに慣れていないなら HTMLは、HTMLdog.comをチェックしてください。
私が反応されている学習と思います 万回容易すでに場合
ビルディングブロックを知っています。
あなたがコンポーネントを持っている場合、それはです 大きな部品を作るのは簡単。
それはあなたの言語に反応です。
>> だから先に行くと与えます これらの事のリード。
このビデオを一時停止します。
あなたがいる場合はそれを読み取りを与えます 自宅であなたがいない場合
HTMLやJavaScriptに精通しています
[OK]を、私たちはするつもりだもの 行うには、我々はするつもりですさ
リアクト使用して、非常に基本的なフラッシュカードアプリ。
我々は、フラッシュカードを持っているつもりです。
あなたは、カードを前後に反転させることができます。
そして、我々はまたのリストを持っています 我々が持っているすべてのカード、
そして、私たちは感じている場合 野心的な、我々は次のようになります
切り替えることができます それらをクリックして車。
>> しかし、これはあなたの裸のうち、 骨は、非常にシンプルなアプリを反応します。
そして、これは実際にあります 実装するのは簡単ではありません、
しかし、我々はあなたがしなければ、それを表示しようとしています これは、それを拡張するために非常に、非常に簡単です
他の人々はそれのお手伝いをする場合。
だから我々は、4つの手順を実行するつもりです これを構築するためにゼロから始めます。
>> [OK]を、ので、4つのステップは、我々はよ 最初のステップで始めます。
最初のステップは、あることを行っています あなたの最初のコンポーネントを構築します。
私が前に言ったように、中の成分が反応 ステロイドだけでHTML要素です。
これは、HTMLを指定します いくつかの動作、およびそれ
どのように人々を指定します どのようにそれと対話することができます
それは、内部​​状態を有するであろう。
ボタンがどのように多くのように知ることができますように 時間それは、例えば、クリックされています、
そして、それは自分自身をレイアウトする方法を知っています。
>> それでは、先に行くと、私たちを作成してみましょう JavaScriptを使用して最初のコンポーネント。
構文は奇妙に見えるのであれば、 それは一種のだからです。
だから、もう一度、我々はつもりです 変数を作ります
アプリキーワードを使用してみましょう、 どの変数になり、
アプリ同等React.createClassしましょう​​。
>> 反応は、ライブラリで、持っています クラスの関数を作成します。
そして、この関数であります そのあなたのコードのビット
新しいを作成するために使用することができます リアクトコンポーネントのタイプ。
そしてそうReact.createClass コンポーネントを行い、
このコンポーネントはなります ものを行うことができます。
それが行うことができます主なものはレンダリングです 何か、関数としてレンダリングされます。
>> 繰り返しますが、このインデックスはには明らかでない場合 あなたは、私はあなたの猫のためのJSに行くお勧めします
そしてそれをチェックアウト。
十分にズームインことですか？
クール。
>> だから、すべてのコンポーネントのニーズ レンダリング機能を持っています。
レンダリング機能は言います、 私は、画面上に何を印刷するのですか？
しかし、コンポーネントがあります そうでない場合には役に立ちません
画面上に印刷するものを知っているので、 あなたは、レンダリング機能を持っている必要があります。
>> あなたは、レンダリング事でそう ただ、いくつかのHTMLを返す必要があります。
そして、何クールなのはということです ものがあります
の拡張であるJSX、 反応によって使用されるJavaScript。
それはあなたの中にHTMLを記述してみましょう JavaScriptのの、どの
種類の奇妙なときに聞こえます あなたが最初にそれについて考え、
それは、その後多くの意味になります。
だから我々はこれを行うことができます。
あなたはHTMLに精通している場合、私は知っています 我々は一般的な目的でのdivを持っています
もののための容器。
私たちは、内部のdivを返す、とすることができます このdivが、私たちはものを置くことができます。
>> それでは、私たちはレンダリングしたいとしましょう 今のストレートアップフラッシュカード。
フラッシュカード、私は言うだろう、 質問と答えを持っています。
したがって、このdivの内側に、してみましょう 段落を印刷
つまり何question--言います 生活に究極の答えは、宇宙？
そして、答えは もちろん、42、になるだろう。
>> それはすべてで十分に確立されませんでした。
うん、だから基本的にはあなたは本当にすることができます JavaScriptの内部HTMLを記述します。
そして、これはあることを行っています 画面にプリントアウト。
それでは、それを試してみましょう。
>> だから我々は我々のコンポーネントを持っています。
私たちは置くに反応指示する必要があります 画面上のコンポーネント
そうReact.renderは、その結果、私たちに気付きます 他の要素のようなアプリを扱います。
それはHTML要素だったとして我々はそれを書きます。
同様の代わりにIMGのように言って 段落のイメージまたはpの、
アプリケーションがあるので、あなたは、アプリケーションを書きます HTML要素のように扱わ。
私が前に言ったように、それはです ステロイドの要素。
>> だから、アプリケーションをレンダリングし、あなた それにそれを置くための場所を与えます。
そして、これはどのようにすることができますです どこにそれを置くためにそれを伝えます。
私は上の単純なdiv要素を作成しました ページのIDと呼ばれるページ、
それはどこです 要素は行くつもりです。
>> そして、我々は、HTMLを使用して実行するつもりはありません。
基本的にこれが取得する予定です このページ要素の内側に置きます
私たちは、画面上に持っていること。
だから、このコードを実行され、これを描きます 画面上のものなので、ここではあります。
私たちは私たちの最初の反応させ、コンポーネントを行いました。
>> だから復習として、私たちは静かに行われ コンポーネントの新しいタイプの、右？
それは何React.createClassです。
そして、そのコンポーネントでは、我々 それは何をすべきか、それを語りました。
このコンポーネントは、あるときはいつでも スクリーン上に印刷され、
それはdiv要素でプリントアウトされます その中の2段落。
>> そして、私たちが何をしたか、我々は新しいアプリを作りました アングルブラケットアプリの表記を使用して。
私たちはそれを置くためにそれを言いました ページ要素の内部。
そして、私がやったこと、それが作成されました そのテンプレートから新しいアプリ。
そして、私はそれをレンダリングすることを告げました。
だから、[OK]を、アプリ、言いました、 私は何を印刷すべきか？
アプリケーションは、div要素をプリントアウト行く、と言います その中の2段落で。
出来上がり、とのdivがあります その中の2段落。
これまでに意味をなさない？
>> だから、もう一度、全体の課題が反応 単にコンポーネントを作成する方法を知っています。
する方法 コンポーネントが連携して動作します。
今、私たちは私たちの最初を作ったこと コンポーネント、のに戻ってみましょう
およびコンポーネントがカスタマイズ可能にします。
だから、HTMLでどのように知っているあなた あなたのボタンクラスを与えることができますか？
あなたのアンカーのhrefを与えることができます。
あなたは正しい、あなたの入力タイプを与えることができますか？
あなたはより多くのカスタムを与えることができます あなたのすべての要素にプロパティ
それをより面白くするために。
そして、我々は実際に行うことができます まったく同じこと。
>> それでは、私たちがしたいとしましょう アプリは、任意のカードをレンダリング行きます。
今、私たちだけ ハードコードされたカードをレンダリング。
私たちは、1つがあります知っています カードは、それが行うことができますので、私たちはしています
試してみて、今これを変更するつもり 私たちはそれにいくつかのカードを与えることができます。
これは、カードを印刷します。
>> あなたは試してみて、あなたの作るべきです コンポーネントは非常に汎用。
私は電子メールで送信できたので、この方法 この私の友人とのようで、
あなたが持っているどのようなフラッシュカード、 ちょうどここにそれを送り、
そして、それはそれ自体でそれをやります。
あなたは他の置くことができます 独自のアプリで物事。
>> しかし、最初のは、これを破るしましょう 二つの成分にアップし、
しかし、我々はカードを分けたいです 実際のアプリの一部から印刷部。
だから我々は何ができるか、私たちはあります アプリケーションからこれを変更することができます
CardViewに、ちょうど アプリの新しい名前、
私たちは、新しいことができます コンポーネントは、アプリケーションと呼ばれ
古いアプリケーションと混同しないように。
我々はcreateClassを持っています、 HTMLのように、
あなたがコンポーネントを入れ子に反応することができます 互いの内部。
>> したがって、この中で機能をレンダリング、 関数の戻りCardView、
これはまったく同じものです。
それは同じことだなぜか？
その代わりに、単にアプリをレンダリングします それの内側のdivとペアリングを持って、
アプリはCardViewをレンダリングし、 CardViewはdiv要素や段落をレンダリングします。
だから、これは私たちの最初の例であります 互いの内部にネスト要素。
それは理にかなっていますか？
だから、もう一度、我々はCardView要素を持っています。
私たちは、アプリの要素を持っています それはより大きいということ。
>> [OK]を、私たちはあなたの場合は、当社CardView--をしたいです 良いCardViewに特定のカードを与え、
それは右、あなたのためにプリントアウトよ？
したがって、最初に、我々はカードを作る必要があり、 それでは、カードオブジェクトを作成してみましょう。
だから私のカードをさせequal-- あなたはすべて精通している場合は、
これは単に記法作りです JavaScriptでのオブジェクト。
それは一種の構造体のようなものです C言語で、私たちは、カードを作りました
そして今、我々は、このカードを渡すことができます プロパティまたはHTML内の属性として
我々のアプリに専門用語。
だから我々は、アプリを起動するこれを行うことができます カードするMyCardに等しいです。
>> あなたは、あなたがどの​​ように入力で、知っています 入力タイプは、テキストやボタンに等しいです
クラスは、ブートストラップ用のBTNに等しい,?
同じ考え、アプリケーションのカードequals-- あなたがブレースを入れて持ってhere--
アプリケーションカードするMyCardに等しいので、この 私たちはこのカードオブジェクトを持っていると言います。
私はとして渡すつもりです アプリのコンポーネントにプロパティを設定します。
そして、このアプリのコンポーネントはなります それにアクセスすることができると行います
それで面白いです。
>> だから、我々のアプリがあることを行っています 今のように、カードを与えられ、
ただ与えるのアプリを持ってみましょう CardViewにカード
自身アプリのようではありませんので、 それをどのように処理するかを知っているだろう、
私たちはただCardViewにそれを与えるでしょう。
だから我々はそれを渡します 同じように、カードイコール、
そのため、各コンポーネントにアクセスすることができます それに与えられているもの。
彼らは、プロパティにアクセスすることができます それに与えられていること
this.props.card、この構文を使用して。
>> それでは、ここでされて起こります あなたするMyCardオブジェクトを持っています。
あなたはアプリにそれを渡します アプリケーションカードを使用してmyCardに等しいです。
そのカードオブジェクトは、あなたのアプリケーションに与えられています。
アプリはそれにアクセスすることができます this.props.cardとして。
それは一種の画像のようなものです それのソースが何であるかを知っています。
>> このアプリは、それは、カードのことを知っています であり、それはそれで何かを行うことができます。
これは、計算を行うことができます。
それはそれのオフに基づいて意思決定を行うことができます。
>> 今のところ、私は渡すつもりでした CardViewにthis.props.card。
これまでに意味をなさない？
今ではより多くの意味を行います。
>> [OK]を、今、私たちはCardViewにいます。
カード与えられた私たちのCardView、必要があります その質問と回答を印刷。
今私たちはいくつかをプリントアウト ハードコードされた質問と回答。
我々は必要out--把握する必要があります 彼らは私たちを与えたカードを依頼します
質問と回答は、何で、 その後、スクリーンにこれをプリントアウト。
>> だから我々は、ここでこれを行うことができます。
で最初に等しい行うbegin--レンダリングします。
それでは、私たちがここでやっていることは私達がことを知っています カードは、プロパティに私たちを与えています
右？
これは、入力として私たちに与えられています。
それはほとんどのようだよう 関数への引数。
カードは、引数であります ほとんどこのCardViewに。
>> 我々はそれを抽出し、あげますよ それを変数に疑問。
答えは行ったことを確認してください 変数answerに。
カードが応答することを要求します。
そして今、我々はこれらを持っていること、 代わりにそのテキストを印刷します、
私たちは、プリントアウトするつもりです 何でも彼らは私たちを与えました。
>> だから、これは私たちが行っていますstuff-- 質問回答を出します。
これが動作するかどうかを見てみましょう。
クール、それでは、それをステップ実行しましょう 念のためにもう一回。
>> だから私のカードは、カードオブジェクトであり、我々 アプリにそのカードを与えています。
そして、アプリは取るために起こっています カードとCardViewにそれを与えます。
そして、このCardViewはあなたの場合、言います 私は任意のフラッシュカードのオブジェクトを与え、
私はその質問をプリントアウトします その答えは、右？
>> だから私は何ができるか私ができることです まず、このコードを送信
私のコードの10行のように、私の友人に。
彼はそれを埋め込むことができます 彼自身のアプリケーション。
そして彼は同じことをした限り、 CardViewカードのようにこれを等しくなり、
彼はCardViewを作成している限り、 それに右の情報を与え、
彼は自分のカードをレンダリングすることができます。
だからこの方法は、それは本当にです あなたが構築するためのクールな方法
お互いを使用するコンポーネントは、右？
このカードは、私が公開する可能性が インターネット上でこのCardView、
人々はそれを使用することができるであろう。
したがって、基本的には、のいずれかのようです Cライブラリの標準機能。
>> それはどこ関数です 誰かがそれを書いています。
あなたは、特定の入力を与えます。
これは、特定の出力を生成します。
あなたはそれが内部でどのように動作するか気にしません。
限り、あなたはそれに権利を与えるよう 入力、それは正しい出力を行います。
>> そして、コンポーネントがすることができます 同じように考えます。
このCardViewは次のようです ライブラリ関数。
あなたはそれにいくつかのカードを与えた場合 プロパティとして、それはよ
そのカードの内容をプリントアウトします。
私は私のカードを変更した場合と同様に 代わりに5プラス37であるもののようで、
それに応じて更新されます。
だから入力を変化させることで、 それは一定の出力を取得します。
だから、ほとんどのコンポーネントで考えることができます このように機能するように、これ
あなたが一緒に置くことができます。
このCardViewように、入力を取得 入力として、あなたは出力を得ます。
この場合、出力はHTMLです。
これまでに意味をなさない？
クールなので、もう一度、プロパティがあります その情報を渡す方法
コンポーネントのうち。
>> OK、それでは、これを作ってみよう 事インタラクティブ。
今のところは、退屈のようなものです。
[聞こえない]とは何ですか？
あなたは、いくつかを印刷することができます それはそれを行うことができるすべてです。
>> それでは、に戻ってみましょう ただ今の昔の質問。
[OK]を、ので、今、これらのコンポーネント すべての彼らが行うので退屈しています、
彼らが入力を取得。
彼らは出力、右作りますか？
それは退屈のようなものです。
私たちは持っていたいです コンポーネントが持っていることができるようにします
内部状態のいくつかの種類、 以下のようなものを覚えています。
>> フラッシュカードの場合のために たとえば、どのような状態の種類
あなたがしたいことがあります フラッシュカードのために覚えていますか？
どのような一時的なステータス あなたは覚えておきたいことがあります
フラッシュカードアプリでフラッシュカードのために？
聴衆：それは裏返しされていますかどうか？
ネールMEHTA：ええ、右。
だから、残しておきたいことがあります あなたが表向きかされているのトラック
あなたはカードを下に直面しています。
Facebook上で、例えば、あなたが希望 ニュースフィードにどこ覚えておきたいです
あなたがされているか、またはプロファイルの方が好き あなたが今やっています。
>> メッセンジャー、にどのようなテキストあなたを好き 入力ボックスに入力し、右？
ページを更新する場合、それが表示されなくなります。
しかし、あなたが本当に気にしません。
それはちょうど一時的です。
うん？
>> 聴衆：[聞こえません]
ネールMEHTA：フラッシュのように カード、あなたが見てすることができますように
質問側または回答側？
>> 聴衆：[OK]をクリックします。
>> ネールMEHTA：同様 両面フラッシュカード、右？
ええ、あなたがしたいです 今のこのアイデアを持っています
私は、入力のようなものです特性を有し、 一時的なものであるが、状態、ええと、
あなたは、ページ上で右どこにいるの？
繰り返しますが、私はFacebookの中で述べて メッセンジャー、私は人のように持っています
あなたは、Facebookを見ています 人やプロフィール、右ですか？
>> これは一時的なものです。
これは、ユーザーを表示することが重要です 何が起こっているが、ページを更新しています。
それは本当に問題ではありません。
だから、一時的な状態ですが、 だから我々はすべてそれ状態。
>> だから、再び、状態や小道具があります。
小道具は、入力が与えられています データソースから。
国家はただ、デフォルトのようなものです。
それだけのもののようなものです 事をインタラクティブに。
>> だから、私たちのCardView--でのが持ってみましょう 私たちのCardView--そ​​れはよかったので。
私たちは私たちが行っている、ここでやろうとしています CardViewだけCardViewに触れ。
そして、これを得たので、私の友人、彼ら 任意の違いに気付かないだろう。
彼らは変更する必要はないだろう 独自のコードのいずれか、
しかし、彼らは彼らを参照してくださいね CardViewはアップsoupedました。
それはコンポーネントのいい部分です。
>> [OK]を、私たちのCardViewでので、試してみましょうと 我々はアップフェーズているかどうかを追跡
または下向き。
リアクトでは、最初にすることによってこれを行います 初期状態を指定します。
どこでカードが始まるのでしょうか？
>> だからgetInitialState呼び出される関数であります 機能、我々はオブジェクトを返します。
この目的は、いくつかの状態が含まれ、そして 状態は、単に、キーと値のペアです。
指示のように、キーとしてい 名前が文字列であるような値は、あなたが持っています。
>> この場合、のは、フロントが真であるとしましょう​​。
これは、我々は状態を持っていることを述べています。
状態の一成分 フロントと呼ばれる属性があります。
[聞こえない]、デフォルトではそう、 我々は、カードの前面にいます、
私たちはこれを変更することができます 我々はカードを反転など。
理にかなって？
>> [OK]を、そうで今、私たちがしている、レンダリング 質問と回答を示しました。
今、私たちは何をすべきか 質問を示しています
私たちはそのように、カードの前面にしている場合 答えは、カードの裏面のためのものです。
あなたのすべてが作る理由です カードインタラクティブ。
それでは、ここで試してみて、これにしましょう​​。
まあ、最初だけで変数を作ります。
現在this.state.front求めることができます。
私たちは、同じ私たちを述べるアクセス アクセス小道具、そうthis.state.front。
>> 私たちはフロントであれば、テキスト this.props.card.questionです。
私たちは、目の前にしている場合 カード、我々は試してみて、グラブしようとしています
カードからの質問。
そうでなければ、我々は背中に​​している場合 カードの、私たちは何をしていますか？
>> 聴衆：答え？
>> ネールMEHTA：うん、そうテキスト this.props.card.answer等しいです。
あなたが気づいた場合でも、我々は、使用しています 決定を行う状態
今コンポーネント理由 異なります
これらは、それとの対話方法をオフに基づいて。
だからではなく、これをプリントアウト、 私たちはテキストを出力します。
クール、今、あなたが見るように、 我々は唯一の問題を参照してください。
そして、私は手動でこちらの状態を変更した場合 前に、我々は42を取り戻すfalseです。
>> だから、もう一度、このコンポーネント 自身の状態を有しています。
ボタンのようにするかどうかを知っています それは、押されたかどうかをされています
この事はオンになっているかを知っています 前面または背面にあります。
デフォルトでは、前面のです。
そして、それはフロントにいた場合、 私たちは質問をプリントアウトします。
それは背面にあるなら、私たちはよ 答えをプリントアウトします。
だから、再び、情報 特定のは同じです。
それだけで違って見えます あなたがそれをプログラムする方法に基づいて。
だから、例えば、Facebookのメッセンジャー、 同じデータソースを取得する場合であっても、
それは異なる場合があります 状態が異なるため。
あなたが見ています 別の人のメッセージ。
>> [OK]を、これはすべてが順調であり、 良いが、今実際に何
かどうか、変更することが私たちができる作ります 私たちのカードには、前面と背面です。
私たちは、フリップを追加することによってこれを行うことができます ボタン、そのカードへのボタン
それは[聞こえない]だ場合は、カードを反転します。
それでは、ここでは、これをボタンを追加してみましょう ボタンを押すと、このボタンは、フリップを言うだろう。
>> だから、今、それを 何もしていません。
それはちょうど良さそうに見えます。
私たちにできることは私たちがクリックを追加することができますです ハンドラは、onClickのは、this.flip等しいです
我々は、後にフリップを定義します。
しかし、基本的には、onClickの 関数は、その
ユーザーがそれをクリックしたときに呼び出されます。
>> だから、ボタンが知っているだろう それがクリックされていたとき。
それがクリックされています行ってきました、 それはカードを反転します。
それはあなたのようなのようなものです ピザの配達人。
いつでも誰かがあなたは、すべての権利、似ています 右、私はピザをお届けします、私を呼び出しますか？
>> あなたは、このリスナーを登録します。
あなたがイベントに耳を傾けます。
あなた呼び出される、とするとき イベントは、あなたが何かをする、発生します。
あなたはピザを取得します。
この場合は、ときにしています クリックすると、あなたはカードを反転。
>> そして、私たちは定義する必要があります カードを反転する関数、
私たちはその権利を書きます ここでは、機能を反転させます。
だから、あなたは、フリップは何をするかだと思いますか？
これもまた、ときに呼び出されます 我々はフリップボタンをクリックします。
機能フリップは何をすべきか？
>> 聴衆：変更this.state.front trueからfalse trueに、falseに。
>> ネールMEHTA：うん、そう取るものは何でも this.frontは、フロント状態がis--。
場合、前面の状態を取ります それは偽にする、本当です。
それが偽なら、右、それは本当作りますか？
それでは、これを試してみましょう。
>> あなたは状態を変更することはできません ただthis.stateを実行して。
あなたはこれを行うことはできません。
あなたはそれを行うことはできません。
あなたは、関数を使用する必要があります this.setStateと呼ばれます。
>> だから、this.setStateフロントを言うことができます コロンこの場合は、再び、感嘆
ポイントは、反対のことを意味します。
この場合、私は推測します。 state.front trueの場合、それは偽の電源を入れます。
だから我々は状態を設定します trueからfalseに。
それが偽なら、我々はよ false trueに設定してください。
>> ただ、私たちは少し設定および取得ことに注意してください 異なる、などのこれを試してみましょう。
バダのビングは、これを見て。
フリップボタンは意志 状態を前後に切り替えます。
>> あなたが見る場所とそうここです リアクトのマジックの少し。
我々はそれを言ったことがないようにそれを再描画します。
我々は、それが何かを再描画話したことはありません。
あなたはこれをやっている場合 リアクトすることなく、あなたがしたいです
ときに好きto--持っています フリップボタンがクリックされると、
あなたはそれを伝える必要があるだろう 手動で右、再レンダリング？
>> 反応するあなたならば、その中には本当にクールです それを特定の状態や特性を与えます、
それは常にレンダリングされます まったく同じこと。
そして、私たちが今まで我々が変更されたとき 状態とプロパティ、
ただ全体を再レンダリング反応します。
それがありますことを知っています 1対1対応
状態とパラメータとHTMLの間。
だから、いつでもそれらのいずれかを セット状態を経て変更、
それがどのように変化します 賃金は、再レンダリングされます。
だから基本的に似ているリアクト あなたが変更するのを待ちます。
>> たび、それが何かを変更し、 それは、ページ全体を再レンダリングします。
そして、それは非効率的に聞こえる場合は、 それは次のようになりますので、それはです、
しかし、反応は、ものを使用しています シャドウDOMと呼ばれます。
代わりに、直接ページを描画すること メモリ内の仮想のHTMLツリーを保持します。
>> あなたが知っている、HTMLは木のようなものです、 階層データ構造などがあります。
これは、メモリ内の偽ツリーを保持 あなたがページを更新するたびに、
それは別の偽のを描きます 木、それは計算します
それは作るために必要なものを変更 二つのツリーを等しくするためのページです。
したがって、基本的に、事実上、 多くは、再レンダリングされます。
そして、それだけの変更のような 少しひねり内のページは、必要に応じて、
それは非常に、非常に、非常に効率的です。
>> したがって、基本的に反応します あなたが何かを変更するたびに、
それは事実上のページを再レンダリングします。
それは私がしなければならないのかを把握します 実ページを反映させるように変更
仮想ページは、それはそれを行うだろう。
それは仮想DOMです。
これは最大の一つです 機能が反応します。
>> それは理にかなっていますか？
質問は？
うん？
>> 聴衆：どのように MVCにまだ比較
我々は話をしたことについて などのリソースの前に。
>> ネールMEHTA：ええ、質問 それは、MVCと比べてどのようにでしょうか？
あなたは、リソースについて尋ねました。
さて、それが機能する方法について話しましょう​​。
>> MVCでは、モデルを更新したいです。
このケースでは、カードのモデルを持っていると思います。
ビューには、持っているだろう フリップボタン、および制御
フリップ機能を持っているでしょう。
だから、ビューは言うだろう コントローラは、フリップを反転します。
フリップは言うだろう 変更するためのモデル、右か？
>> だからあなたは、MVCを行う、あなた モデルが変更するために耳を傾け、
そしてそれに応じてビューをレンダリングし直します。
それとも、ただ好きに持っています コントローラを持っています。
その後、モデルが変更するのを待って、 もののようなの一部を選択し、選択
変える。
ここでは、一つのことを持っています、 しかし、大きなアプリで、
あなたは何を覚えて好きに持っています ひとつひとつの場所の変更、
それは少し迷惑なんです。
それでいいですリアクト それは影ドムを持っているので。
それはちょうどに余裕があります 全体のことを書き換えます。
あなたが選択する必要はありません 以下のように更新するかを推測。
>> Facebook上であなたが好きなら MVCで、新しいメッセージを取得するには、
あなたは覚えておく必要があるだろう、 OK、物事を変更
の上部に ページ、メッセージアイコン。
また、一番下に新しいウィンドウを開きます。
また、そのウィンドウで新しいものを作ります。
また、サウンドを再生します。
>> それは多くのものです 同時に外出。
だから、あなたがいない場合 シャドウドム​​を持って、あなたがしたいです
手動で行う必要があるため あなたはページ全体を取り除くことはできません。
あなたが持っているので、あなたは、に余裕がありません 手動で各事を変更するには、
これはMVCで本当に迷惑です。
>> そうであるために 倹約、それらを選択
あるページを更新 効率的なだけでなく、迷惑な。
なぜなら影の、反応させて ドム、あなたは自由のための両方のものを得ます。
それは効率的ですので、 影ドムの。
ボトルネックは、ページを更新しています。
これは、ツリー操作を行っていません。
あなたは、効率を得ます。
また、使いやすさの理由を取得します あなただけのページ全体を書き換える場合、
しかし、あなたはちょうど、すべての権利、物事を知っています ページのどこかにあることを行っています。
それは別の場所にあるかもしれませんが、 それは右、ページ上にあるように起こっているのですか？
だから、あなただけの再レンダリング 事実上、全体のこと、
あなたがカップルになるかもしれません ページ自体への変更。
>> だから、もう一度、MVCあなたの中に 選択する必要があります
利用と効率の容易さとの間に、 あなたは両方を取得し、反応します。
だから、良いです。
理にかなって？
固体。
>> OK、それでは、の話をしましょう​​見てみましょう ステップ4について少し、
どのように我々は部品を埋め込むことができます。
だから我々は今、この権利を持っています。
私たちはクールな小さなボタンがあります。
我々はそれをバック反転することができますし、 など、それはそれがないすべてです。
我々はしたいとしましょう 別のコンポーネントを持っています。
私たちのフラッシュカードアプリがすべきとしましょう すべてのカードのリストが含まれています
あなたが持っているので、それは我々のことを言います 別のコンポーネントを持っている必要があります。
まあ、リストビューを呼び出します。
のは、そのリストのビューを作ってみましょう CardViewと共存、
このリストビューとCardView 一緒に仕事を好きになるでしょう。
そして、あなたはそれらを組み合わせることができます あなたのために我々のアプリを作ります。
>> そこでまずは、作ってみましょう カップルより多くのカードを右。
それでは、言ってみましょう、何のカード？
そして、ちょうどので、私はする必要はありません 、それを入力すると、あなたを産ん
私はここからそれをコピーするつもりです。
そして、私はないつもりです それをただ一枚のカードを与えます。
私はそれをカードの配列を与えるつもりです。
したがって、最初のアプリ 今のところ破るつもり。
すべての権利、私たちはするつもりです このことが、複数のカードを処理します。
したがって、最初に、我々は、それを与えないつもりです ただ一枚のカードが、カードの配列、
カードのリストのように。
この場合、我々はそれらの3つ持っています。
>> すべての権利、アプリがあるので、そう リストカードを取得するつもり、
それは決定するために起こっています CardViewに表示する1。
CardViewができる唯一の 一枚のカードが、アプリをレンダリング
右、すべてのカードのリストを取得しますか？
>> だから、1つを把握するとき CardViewに与えるためにカード、
あなたができる可能性があります推測する方法 どのカードについての決定を行います
表示するには？
あなたにヒントを与えるために、それは一時的です あなたは、特定のカードを表示することがあります。
ページを更新する場合は、よ ちょうど最初のカードに戻ります。
それは一時的だからそれは大丈夫です。
私たちはどのような手法がありますか？
>> 観客は：あなたは、変数を作ることができます あなたは、フロントを持っていただけのよう。
これはあなたが、真の可能性があります 現在のカードが1に等しいですか？
>> ネールMEHTA：ええ、私たち 右、状態を持つようにしたいですか？
あなたは、状態を使用します 把握するコンポーネント
どのカードは、我々が取得したいです。
私たちは、リストを持っているように すべてのカード、我々はよ
把握するために状態を使用します 最初のカードの一つ、
ように2枚目のカード、3枚目のカード、および。
>> だから、このアプリはとてもアプリが取得されます 、getInitialState機能を持っています
getInitialState関数の戻り。
そして、私たちはただactiveIndex 0を言いますよ。
だから今我々のアプリは、それ自身の状態を持っています。
>> そして今に把握するために、レンダリング カードは、ちょうど配列に行ってみよう
そして、そのインデックスのものをつかみます。
カード等しくthis.props.cardsを選択 this.state.activeIndex。
ここで見るように、小道具や 状態は実際に一緒に働きます。
だから今我々はactiveCardを持っていること、 私たちは、それをactiveCard呼ぶことにします
これが動作するかどうかを見てみましょう。
[聞こえません]
>> ああ、それはテキストエラーでした。
ああ。
>> クール、うん、今、私たちは戻りました 我々の前にいたところ、右に？
同じ古いプログラムを除きます 今、私たちはサポートすることができます
カードのリストだけではなく、一枚のカード。
そして今、再び、我々は変更する場合 activeIndexは、我々は、0から1に行くことができます
そして今、第2のカード、 し、我々は0に行ってきました。
だからここに新しいです 高性能になった私たちのバージョンを。
>> [OK]を、ので、今のは、リストビューを持たせること プログラム内のすべてのカードを示し、
私たちは新しい作ってあげます リストビューと呼ばれるコンポーネント。
リストビューがreact.createClassに等しいしてみましょう。
だから我々は、順序なしをレンダリングしたいです すべてのカードのリスト項目をリストします。
そして、私たちはカードの束を持っています。
私たちは、1つのリスト項目をしたいです すべてのカードのために、右？
私たちは、forループを行うことができますか 新しいリストアイテムを作成するもの。
しかし、あなたはそれを行う方法を 反応し、マップと呼ばれるものを使用します。
マップツールか、使用機能です それは、すべての項目について、いくつかの関数を実行し、
戻り値をとり、かつ あなたにそのバックを提供します。
>> 例として、我々は配列を持っているので、 1、2、3.mapのfunction--とこの
略記されます function-- X矢印のx倍のx。
これは、すべての番号を言います 1、2、3で、それを取ります。
それを二乗し、それを返します。
だから、1をどう思いますか、 2、3.map xはx倍に行きます
Xあなたが与えられたバックできます この関数であることを
その配列の各要素で実行されます。
>> 対象：1、4~9？
>> ネールMEHTA：うん、1、4、9 あなたは1回1を実行しているため。
それはあなたに1を与えます。
それは最初の要素です。
>> 2回2は4です。
すなわち、第2の要素です。
3回3は9です。
それは第三の要素です。
理にかなって？
だから、マップは技術を持っています 関数プログラミングで使用し、
の新しいスタイル 何かをするためのプログラミング
リスト内のすべての要素に。
そして、これは聞き覚え。
私たちは、カードのリストを表示しています。
私たちはすべてのためのリスト項目を取得したいです 1、私たちはちょうどここにマップを使用します。
私たちは、リストに等しいせ、言いますよ this.props、カード、地図。
>> そして、私たちがしている、カードを与えられました リスト項目を生成するつもり
それのそのカードの内容側と。
ちょうど私たちが提供したいとしましょう カードはそうcard.questionを疑問視。
したがって、このリストには含まれてい LIのか、リスト項目の配列
ここで、1つのリストがあります すべてのカードのためのアイテム、
それはカードの質問が含まれています。
理にかなって？
>> クール、今してみましょう 実際にそれをプリントアウト。
だから我々は、ULが返されます。
その順不同リストの内側には、 私たちは、リスト全体を貼り付けます
彼らは私たちを与えました。
クール。
>> すべての権利なので、今、この リストビューは、ちょうど見つけるに動作します。
リストビューについてのご質問？
あなたはカードの束を持っています。
あなたはすべてのカードのリスト項目を作ります。
そして、あなたは順不同の内側にそれらを置きます リストには、あなたはそれを返します。
だから今、私たちは埋め込むのは非常に行動しましょう 我々のアプリのこの内側、
私たちは、リストビューをこれを行うことができます。
我々は、ビューのリストを表示するには何の引数渡しますか？
我々はそれをどのような特性を与えますか？
あなたが与える場合には、覚えておいてください そのカードの束、
それがリストを作ってあげます それらのカードのために表示します。
だから我々は何を渡します ここの引数として？
聴衆：カードのリスト？
ネールMEHTA：うん、そうカード 右、this.props.cardsに等しいですか？
そして、これだけの問題 あなたが唯一できることです
、レンダリングに1つのトップレベルの要素になって あなたはdivの中でそれを包むようになってきました。
それは奇妙だ。
だからどうかを見てみましょう。
それは動作しますか？
>> うん、そこに行きます。
だから今、私たちはリストを持っています 一番下のカードの、
し、我々は我々のを持っています 上に自分自身をCardView、
それは間に反転します カードの両側。
今、私はそれをした方法を意味しているしているのでしょうか？
ええ、そう、再び、我々は2つ​​のコンポーネントがあります。
最初のコンポーネントを印刷 うち、リスト内のすべてのカード。
つまり、リストビューです。
そして、第二成分 ちょうどそのカードをプリントアウトします。
あなたはそれを特定のカードを与えると、それはよ そのカードについての情報を印刷
あなたが前後に反転させます。
>> 私たちが望むのであれば、我々は試してみて、話すことができます これにいくつかの新機能を追加する方法について。
それ以外の場合は、もう少し話をすることができます 原子炉の速度について、
または私達は答えることができます あなたが持つかもしれない質問
これらは、コア部品のすべてであるため、 私が話をしたいと反応します。
我々は先に行くことができます。
我々は、質問に答えることができます。
あなたが望むものなら、なんでも。
>> 聴衆：あなたが使用することができます 通常のJavaScriptでJSX？
か、その何かがあること [聞こえない]に来ましたの？
>> ネールMEHTA：質問ができることです あなたは、通常のJavaScriptでJSXを使うのか？
答えはイエスです。
JSXはちょうどそれの方法は、あなたを取るされています その中にHTMLを持っているのJavaScript、
それには、JavaScriptにコンパイルされています その中にHTMLを持っていません。
だからので、ここで気づくthat--気づきます。
あなたはdiv要素のように持っているようにこれが見えます あなたはその中のものを持っています。
>> それはJavaScriptにコンパイルされること 以下のような同じことを生成します。
私は私が言っていることということだと思います それはだようJSXは、単に構文的です
JavaScriptのためのプリプロセッサずっと PHPのようなHTMLのためのプリプロセッサです。
JSCはプリプロセッサです ことができますJavaScriptのための
あなたはJavaScriptの内側にHTMLを置きます。
だから、あなたは右の変圧器を持っている場合 これは[聞こえない]と呼ばれるものです、
これは変換します。
右プリプロセッサ、 それはあなたがそれを行うもらおう。
>> 聴衆：[聞こえません]
ネールMEHTA：通常は必要ありません JavaScriptを内側にHTMLを置くために
あなたのやっていない限り反応します。
しかし、あなたはとにかくそれを行うことができます。
うん？
>> 聴衆：私はあなたを思います リアクト説明していました
機能的なプログラミング言語として。
我々は、CS50にCを学んできました。
Cも関数型言語ですか？
ネールMEHTA：だから質問 機能についてです
呼ばれる別のもの対 命令型あるいは手続き型プログラミング。
人気番組の2種類があります。
一つは、手続き型と呼ばれていました すべてのコマンドを実行するような程度で、
一つは、すべてである、機能的です 機能を有すると持っていることについて
それらの入力と出力。
機能的パラダイムである反応します。
Cは非常に手続きパラダイムです。
>> 一例として、例えばC、 あなたはこの宣言的な方法をしません
プログラムを作る、右？
あなたが言っている、これを印刷します。
このデータ構造を変更します。
これを印刷します。
これは、すべてのコマンドについてです。
>> リアクトで、そこではありません その多くのコマンド。
これは、すべてのことについてです コンポーネントは、あなたが一緒に入れ。
彼らは機能に似ています。
あなたは、関数のように持っています CardViewと呼ばれます、
どの機能であります すなわち、入力、出力を有します
ので、すべてで反応させ、 この理念について
あなたはデータを持っているhaving--の私たち。
あなたはこのを介して渡します アルゴリズム、およびそれよ
出力HTMLます 単にページを印刷し、
ので、あなたがする必要はあり それを少しずつを作成します。
>> だから何に比喩を描画します 私が前に言った、あなたが方法を知っています
Facebookのメッセージを取得する場合、 あなたが部品を更新するために何を選択しますか、
それは、手続きです。
それは右、不可欠ですか？
[OK]を、私はメッセージが表示されました。
のがアカウントを変更してみましょう。
>> それでは、ここでウィンドウをポップアップしてみましょう。
のがアカウントを変更してみましょう。
それでは、ここではこれを描きましょう。
それは手続き的なアプローチです。
>> それは角のような何の事です、 ブースト、バックボーン、他のフレームワークを使用しています。
機能的である反応します。
それは非常に異なる方法です 物事を考えるの。
それはのは、持ってみましょうのこのアイデアを取ります 機能や必要になりますアルゴリズム
それにデータを与えます。
それは何、それを吐き出しますよ コンピュータであり、そしてべきで
秤量の世話をします。
あなたはそれを自分で処理しません。
それは意味の少しを作るでしょうか？
うん？
>> 聴衆：関数型言語では、 すべてが一度になりますか？
>> ネールMEHTA：いいえ、物事がために起こります。
ここのようにまだあります 注文ですが、それはできません
以下のようなのために起こります 、コマンド、コマンドを称賛。
それはのために起こります この関数は、あなたの出力が得られます。
別の関数にそれを置きます。
別のものにそれを入れて 機能、他の機能。
>> あなたはCS51を行う場合は、よ 機能的なプログラムを学びます
この範囲外の少し。
しかし、基本的に、何が 反応クールなだけではありません
一方向のデータフロー 仮想ドム、
しかしのもこのアイデア 関数型プログラミング。
そして、関数型プログラミングは非常に簡単です 構成し、外のクールなものを作るために、
それは考えることは非常に簡単です 約約理由。
だから、リアクトの別の良いドローです。
これ以上の質問？
うん？
>> 聴衆：ええと、なぜだろう VARとは対照的にさせて使用しますか？
>> ネールMEHTA：だから質問です なぜあなたの代わりにVARの聞かせ使用するのですか？
これはというものです ES6やECMAScriptの6。
それには、JavaScriptの新バージョンです。
技術的な理由の束があります、 しかし、letがVARの改良版です​​。
>> それはあなたが変数を宣言方法です。
あなたが聞かせ使用することができます。
あなたはVARを使用することができます。
レッツは、技術の束を持っています あなたがそれらを見ることができますreasons--
それはましだ理由についてlater--アップ。
基本的に、ES6はいくつかの素晴らしいを持っています 新しい構文、いくつかの新機能
古いのJavaScriptの上に。
>> だから我々は5分のように持っています。
私はちょうど約話をしたいです もう一つの実速いです。
ご質問があれば、 それでは、この後にそれについて話しましょう​​。
しかし、単にこれは取得します 私は、カメラに引っ掛かっ
どのようにあなたについて少しお話したいと思います 実際にアプリ内で反応を使用します。
>> あなたはここに行く場合は、 Facebook.GitHub.IO/react、
これが反応のホーム・ページで、 それはあなたが実際に使用する方法を紹介
あなたのページに反応します。
基本的に、それは少しです 複雑なリアクトインストールしようとしています。
それはあなただけのドラッグと同じくらい簡単ではありません そしてそこにはJavaScriptをドロップします。
>> あなたの変圧器を持っている必要があります それは前に行ったように、なる、セットアップ、
あなたのJSXを回します 通常のJavaScriptの。
あなたはそのよ事に持っています あなたが正常にES6コンパイル。
JavaScriptの移動の多くがあります 部品あなたがしなければならないので、事があります
ヨーマン、Yeoman.ioと呼ばれます。
そして、これはコマンドラインツール'LLです あなたが反応アウト足場を助けます
簡単なプロジェクト。
>> だから、このことについて読むことができます 後で、いくつかのツールがあります
ヨーマンが提供しています。
彼らはあなたが反応を作成してみましょうよ に建てられたすべてとアプリ。
それが組み込まれていますよう コンポーネント、中に建てられました。
それはあなたの変圧器が組み込まれています。
彼らはクールなのがたくさんあり​​ます 自動的に建てられたもの
発電機と呼ばれるこれらの事を使用します。
>> あなたが好きなのであれば、これについてお読みください。
ただ、ヨーマン、Y-E-O-M-A-Nに行くと、 あなたは、このような発電機を見つけることができます。
などの発電機と これらの、あなただけのような
カップルのコマンドライン・コマンドです。
これはアウト足場よ 全体はあなたのためのアプリを反応します。
これは、すべてのマニュアルの配管を得るでしょう、 そして、うなり声の仕事はあなたのために行われ、
これはあなただけ集中する理由です ただで書くことに反応します。
>> したがって、基本的に構築 アプリは非自明である反応します。
それはそこにすべて一緒に配線が、です あなたのためにそれをやるのツールがあります。
だからが反応したい場合 アプリは、そのようにやってみてください。
あなただけ試してみたい場合は、 あなたはこのCodePenを使用して試すことができます
このCodePenは持っているので、 すべての配線を反応させます。
私はすでにあなたのためにすべての作業を行ってきました。
>> あなたのようにしたいのであれば アプリを反応させ、解放するために生産、
これらの発電機のいずれかを試してみてください。
あなただけ再生したい場合は 周りには、多くの場合だけで価値があります
以下のような、ここでCodePenに遊んでみてください。
いいね？
クール。
>> だから、私が持っているすべてです。
ここでも、すべてのコードと例があります ここで、このウェブサイト上になるだろう。
だから、もう一度、我々は話をしませんでした 約リアクトの多くの構文、
しかし、これらすべてのを見つけるために 少し構文の詳細、
それは、利用可能なすべてのことになるだろう ここで、このウェブサイト上。
>> だから私は次のようにお勧めします 最初の一歩を踏み出します。
あなたのCodePenにそれを入れてください。
作りに取り組んで試してみてください その第二のステップへ。
ちょうどそこ第四段階だ、と あなたはそこから取得する場所を参照してください。
>> これ以上の質問は、チェック またはそのページから私を電子メールで送信します。
それは私の電子メールです。
しかし、私は、任意のお手伝いをしてみたいです リアクトについてあなたが持つかもしれない質問。
だから、うん、それは私が持っているすべてです。
以下のためにありがとうございました 見たり、出席のため。
そして、私は、任意の質問を取りますよ あなたは今、この後かもしれません。
だから、見てのためのあなたのすべてに感謝します。