1
00:00:00,000 --> 00:00:02,910
>> [音楽再生]

2
00:00:02,910 --> 00:00:04,850

3
00:00:04,850 --> 00:00:07,275
>> ネールMEHTA：ここにそれが行きます。

4
00:00:07,275 --> 00:00:11,070
>> まあ、誰もが、ウェブへの歓迎
将来のアプリが反応します。

5
00:00:11,070 --> 00:00:11,870
これはCS50です。

6
00:00:11,870 --> 00:00:12,930
私の名前はニールです。

7
00:00:12,930 --> 00:00:17,689
私はCS50と二年生のためのTAよ
ハーバード大学で、非常に、非常に

8
00:00:17,689 --> 00:00:18,730
情熱的なウェブ開発者。

9
00:00:18,730 --> 00:00:20,730
だから私は非常にエキサイティングだと
今日はあなたに話してさ、

10
00:00:20,730 --> 00:00:24,550
あなたがここにいるかどうかを自宅で
見て、約再び、である、反応させ、

11
00:00:24,550 --> 00:00:27,270
私は、Webアプリケーションの、未来が言ったように。

12
00:00:27,270 --> 00:00:29,055
>> だから、Webフレームワークである反応します。

13
00:00:29,055 --> 00:00:30,930
そして、私が言ってきたように
ここにいくつかの人々に、

14
00:00:30,930 --> 00:00:33,400
フレームワークはちょうどです
あなたが使用できるツールのセット

15
00:00:33,400 --> 00:00:35,770
あなたのWeb​​アプリケーションを構築し、構築します。

16
00:00:35,770 --> 00:00:39,010
また、Webアプリケーションは、再び、ウェブサイトです
Facebookのようなインタラクティブであること、

17
00:00:39,010 --> 00:00:42,330
Twitter.com、Instagram.com、何でも。

18
00:00:42,330 --> 00:00:45,590
>> だからFacebookはWebフレームワークであります
それはFacebookのによって開発されました

19
00:00:45,590 --> 00:00:48,060
リアクトback--数年です。

20
00:00:48,060 --> 00:00:50,830
それ以来使用されていますで
自分の携帯アプリにFacebookの

21
00:00:50,830 --> 00:00:52,460
ウェブアプリ、Instagramの。

22
00:00:52,460 --> 00:00:56,350
カーンアカデミーは別です
リアクトの顕著な早期導入。

23
00:00:56,350 --> 00:00:58,630
>> それは実際になってきています
非常に人気。

24
00:00:58,630 --> 00:01:03,420
あなたは今までの角のようなものを使用している場合か、
骨格は、これは、同じファミリーであり、

25
00:01:03,420 --> 00:01:05,830
それは遠いので、持っています
彼らの人気を上回ります。

26
00:01:05,830 --> 00:01:06,890
これは、ホットな新のことです。

27
00:01:06,890 --> 00:01:09,590
それは本当に、本当に巨大です。

28
00:01:09,590 --> 00:01:13,470
>> そして、そうではありません同じように良いですリアクト
建物インタフェースのWebフレームワーク。

29
00:01:13,470 --> 00:01:16,020
これは、Webインターフェイスを構築するための良いことです。

30
00:01:16,020 --> 00:01:18,350
事もあります
呼ばれるネイティブ反応します

31
00:01:18,350 --> 00:01:22,200
あなたがインターフェースを構築することができます
AndroidとiOS用

32
00:01:22,200 --> 00:01:26,390
将来的には、おそらく他のプラットフォーム
ちょうど同じJavaScriptコードを使用して。

33
00:01:26,390 --> 00:01:31,130
あなたは正確に同じを使用することができます
JavaScriptコードは、ウェブサイトをレンダリングします

34
00:01:31,130 --> 00:01:33,040
アンドロイドアプリとiOSアプリをレンダリングします。

35
00:01:33,040 --> 00:01:35,000
>> それは非常に、非常にエキサイティングな時間です​​。

36
00:01:35,000 --> 00:01:37,070
それは本当に、本当にクールな機会です。

37
00:01:37,070 --> 00:01:42,020
それは本当に普遍的なウェブです
インタフェース開発ツール、

38
00:01:42,020 --> 00:01:44,420
それは非常に、非常にです
重要なことは知っています。

39
00:01:44,420 --> 00:01:46,949
そして、私は人々が言っ​​ていたとして、
前に、これは、私が思うに、

40
00:01:46,949 --> 00:01:48,990
どのように我々変更する予定です
永遠のWebアプリケーションを構築します。

41
00:01:48,990 --> 00:01:55,820
だから、多分ビット誇張だが、私
それは知っているかなり良いことだと思います。

42
00:01:55,820 --> 00:01:57,580
>> [OK]を、ので、反応させ、何ですか？

43
00:01:57,580 --> 00:02:01,020
反応することができますフレームワークです
インタフェースを構築するために使用します。

44
00:02:01,020 --> 00:02:03,240
インタフェースは、再び、あります
ウェブページ、右？

45
00:02:03,240 --> 00:02:06,340
だからここInstagram.comだ、用途が反応します。

46
00:02:06,340 --> 00:02:08,740
>> 上に構築されて反応します
部品のアイデア。

47
00:02:08,740 --> 00:02:11,900
コンポーネントはHTMLです
ステロイドの要素、

48
00:02:11,900 --> 00:02:14,470
そうHTML要素は、ボタンのようなものです。

49
00:02:14,470 --> 00:02:15,250
これは段落です。

50
00:02:15,250 --> 00:02:17,500
それは右、ヘッダーですか？

51
00:02:17,500 --> 00:02:22,740
そして、Instagramのは、これらを使用しますが、それになります
またリアクトのコンポーネントを使用します。

52
00:02:22,740 --> 00:02:25,740
>> 構成要素である反応
高性能になったHTML要素

53
00:02:25,740 --> 00:02:28,100
それは自身の挙動を有します
それらの中に含まれていました。

54
00:02:28,100 --> 00:02:31,800
そこで、一例として、私たちは持っている可能性が
時間要素、時間成分、

55
00:02:31,800 --> 00:02:34,095
どのように含まれています
タイムスタンプ、あなたが知っています、

56
00:02:34,095 --> 00:02:37,170
プロファイルコンポーネントいます
プロフィール画像が含まれています

57
00:02:37,170 --> 00:02:38,820
そして、人の名前。

58
00:02:38,820 --> 00:02:42,930
それは、のようなカウンタを持つことができます
同類の数のように数えることができます、

59
00:02:42,930 --> 00:02:45,610
あなたがそれをクリックすると、それはよ
同類の数を増やします。

60
00:02:45,610 --> 00:02:48,200
コンポーネントだけです
HTMLコードの束こと

61
00:02:48,200 --> 00:02:50,520
いくつかの機能を持っています
その中に包まれました。

62
00:02:50,520 --> 00:02:53,770
だから、HTML要素のようなものです
ステロイドに、私は前に言ったように。

63
00:02:53,770 --> 00:02:56,270
あなたは、これらのコンポーネントを取ることができ、
あなたはそれらを一緒に置くことができます

64
00:02:56,270 --> 00:02:59,060
で、新しいコンポーネントを作成します
この場合、ポスト成分

65
00:02:59,060 --> 00:03:00,505
これは、すべてこのようなものが含まれています。

66
00:03:00,505 --> 00:03:04,050
それは時間、プロファイルを含んでいるでしょう、
LikeCounter、多分コメント

67
00:03:04,050 --> 00:03:06,100
多分イメージそのもの。

68
00:03:06,100 --> 00:03:10,810
だからウェブアプリはちょうど取ることによって構築されています
コンポーネントと一緒にそれらを置きます。

69
00:03:10,810 --> 00:03:15,620
Instagramのフィードは以外の何ものでもありません
ポストの束を次々、

70
00:03:15,620 --> 00:03:19,032
各ポストは、時間のように含まれています
ように、プロフィールLikeCounter、と。

71
00:03:19,032 --> 00:03:20,490
それは一種の家を建てるようなものです。

72
00:03:20,490 --> 00:03:22,660
あなたはビルドされません。
上から下の家。

73
00:03:22,660 --> 00:03:24,960
あなたはあなたをcomponents--取ります
バスルームのようになります。

74
00:03:24,960 --> 00:03:28,320
あなたがそれらを貼り付けbedroom--を取ります
一緒に、あなたは新しいコンポーネントを持っています。

75
00:03:28,320 --> 00:03:29,760
あなたは家の新しい部分を持っています。

76
00:03:29,760 --> 00:03:32,860
>> したがって、すべての周りに構築されて反応します
そのコンポーネントのこのアイデア

77
00:03:32,860 --> 00:03:36,600
宣言型であること、インタラクティブです。

78
00:03:36,600 --> 00:03:39,650
あなただけのものをAと言うのように
プロファイルがあり、それをレンダリングします。

79
00:03:39,650 --> 00:03:40,600
彼らは、構成可能です。

80
00:03:40,600 --> 00:03:43,880
あなたは入れ、時間とプロファイルを取ることができます
一緒に、より良いものを作ります。

81
00:03:43,880 --> 00:03:47,770
そして、彼らは再利用可能ですので、もしあなた
ポストのソースコードを持って、

82
00:03:47,770 --> 00:03:49,440
あなたはどこにでもを埋め込むことができます。

83
00:03:49,440 --> 00:03:53,160
>> あなたはInstagramのを埋め込むことができます
あなた自身のウェブサイト上での事。

84
00:03:53,160 --> 00:03:56,830
あなたがFacebookの中に埋め込むことができ、例えば、
限り、それが使用するだけでなく反応します。

85
00:03:56,830 --> 00:04:00,360
だから、コンポーネントは、本当に、本当に、本当にあります
ウェブの強力なビルディング・ブロック

86
00:04:00,360 --> 00:04:04,180
それはどこでも使用され、置くことができます
一緒に新しいビルディングブロックを作るために。

87
00:04:04,180 --> 00:04:07,159
それは非常に、非常にです
高レベルの概要。

88
00:04:07,159 --> 00:04:09,200
だから、再び、あなたが持っている場合
任意の点でのご質問

89
00:04:09,200 --> 00:04:14,470
原子炉の哲学について、
私を停止し、私が知っているように、コーディング。

90
00:04:14,470 --> 00:04:18,420
>> [OK]を、ので、それのためのクールな反応であります
見ての別の方法を持っています

91
00:04:18,420 --> 00:04:19,870
あなたがウェブアプリケーションを構築する方法で。

92
00:04:19,870 --> 00:04:23,620
おそらく、MVC、Aの聞きました
モデルあなたはCS50または任意に制御します

93
00:04:23,620 --> 00:04:25,940
あなたが使用する他のプロービングクラス。

94
00:04:25,940 --> 00:04:29,000
そして、ほとんどのフレームワークは、
MVCの考え方を中心に構築。

95
00:04:29,000 --> 00:04:30,410
反応しないです。

96
00:04:30,410 --> 00:04:32,980
アイデアを中心に構築されて反応します
一方向のデータフローの

97
00:04:32,980 --> 00:04:36,510
ここでこのチャートやグラフィックに見られるように。

98
00:04:36,510 --> 00:04:38,260
>> 基本的には、データソースを持っています。

99
00:04:38,260 --> 00:04:42,380
また、データソースが決定します
特定のコンポーネントを配置する方法について説明します。

100
00:04:42,380 --> 00:04:45,452
そして、コンポーネントはなります
その後、彼らが変更されたとき、

101
00:04:45,452 --> 00:04:47,160
彼らが教えてくれます
変更するためのデータソース。

102
00:04:47,160 --> 00:04:49,350
>> Instagramのを使用するには
たとえば、あなたが持つかもしれません

103
00:04:49,350 --> 00:04:52,050
以下のようなポストオブジェクトのリスト
データベースか何かインチ

104
00:04:52,050 --> 00:04:53,310
データそれ。

105
00:04:53,310 --> 00:04:57,600
そして、私達のポストコンポーネント
そのデータがかかります、

106
00:04:57,600 --> 00:05:01,830
およびレンダリングするためにそのデータを使用
画面上のもの。

107
00:05:01,830 --> 00:05:04,300
それは何矢印
データからコンポーネントにあり、

108
00:05:04,300 --> 00:05:07,930
そしてその後、同じデータが使用されていること
部品の束をレンダリングします。

109
00:05:07,930 --> 00:05:10,290
>> Facebookのメッセンジャーでは、のために
リアクトある例、

110
00:05:10,290 --> 00:05:13,410
あなたがリストを持っているかもしれません
データソースとしてのメッセージ。

111
00:05:13,410 --> 00:05:15,927
そして、それはないだろうレンダリング
メッセージのリストのみ

112
00:05:15,927 --> 00:05:17,510
だけでなく、友人のリストあなたが持っています。

113
00:05:17,510 --> 00:05:19,200
あなたは未読数を持っています。

114
00:05:19,200 --> 00:05:23,330
たぶん、またFacebookの事をレンダリング
それは、Facebook.comの下部にあるのです。

115
00:05:23,330 --> 00:05:25,610
同じデータであります
真実の単一のソース

116
00:05:25,610 --> 00:05:28,290
それは、多くの原因となります
コンポーネントがレンダリングされます。

117
00:05:28,290 --> 00:05:30,290
そして、いつでもそれらの1
コンポーネントが変更され、

118
00:05:30,290 --> 00:05:32,320
それが戻って
データソースを変更します。

119
00:05:32,320 --> 00:05:33,460
>> あなたは正しい、メッセージを送信しますか？

120
00:05:33,460 --> 00:05:34,780
つまり、データソースを変更します。

121
00:05:34,780 --> 00:05:39,490
あなたは、あなたのメッセージを読んで、
あなたは0に未読設定します。

122
00:05:39,490 --> 00:05:41,136
つまり、データソースを変更します。

123
00:05:41,136 --> 00:05:44,010
そして、もう一つのこれらのすべてに気付きます
矢印同じデータに戻ります

124
00:05:44,010 --> 00:05:47,662
ソース、あなたが知っているので、
特定のデータセットが与えられ、

125
00:05:47,662 --> 00:05:49,870
あなたが正確に把握
ページは次のようにしようとしています。

126
00:05:49,870 --> 00:05:50,700
それは確定的です。

127
00:05:50,700 --> 00:05:53,451
あなたは、与えられた特定のデータを知って、どのような
ページは次のようにしようとしています。

128
00:05:53,451 --> 00:05:56,158
あなたはそれが起こっているのかを予測することができます
動作し、どのように物事が起こっています

129
00:05:56,158 --> 00:05:57,650
彼らは一緒に入れているときに動作するように。

130
00:05:57,650 --> 00:06:00,410
>> そして、私は百万のコンポーネントを持っていた場合
ここで、それは右、同じように動作しますか？

131
00:06:00,410 --> 00:06:02,290
あなたがいずれかを持っていません
奇妙な相互接続。

132
00:06:02,290 --> 00:06:04,120
一つのデータは、百万のコンポーネントをレンダリング。

133
00:06:04,120 --> 00:06:06,879
百万のコンポーネント可能性
戻ってデータを編集します。

134
00:06:06,879 --> 00:06:07,920
そして、これは非常にいいです。

135
00:06:07,920 --> 00:06:10,870
我々は、構成可能構築しています
簡単にスケーラブルなWebアプリケーション。

136
00:06:10,870 --> 00:06:13,150
>> もし1つのデータソースが、
真理の源。

137
00:06:13,150 --> 00:06:15,790
それはあなたのコンポーネントを通知します
どのようにページをレイアウトするために、

138
00:06:15,790 --> 00:06:18,190
コンポーネントはなります
相互作用を扱います。

139
00:06:18,190 --> 00:06:20,150
そして、彼らは変更する場合
物事は、ちょうど戻って

140
00:06:20,150 --> 00:06:21,750
そして、変更するには、データソースを教えてください。

141
00:06:21,750 --> 00:06:22,850
理にかなって？

142
00:06:22,850 --> 00:06:26,010
したがって、すべての理解についてですリアクト
どのコンポーネントを構築するために

143
00:06:26,010 --> 00:06:29,540
およびコンポーネントを作成する方法
外の世界と対話します。

144
00:06:29,540 --> 00:06:31,850
>> コンポーネントの相互作用を作ります
外の世界との

145
00:06:31,850 --> 00:06:34,490
別の技術を使用しています
これは、フラックスと呼ばれます

146
00:06:34,490 --> 00:06:36,872
あるフレームワークです
リアクトの上に追加されました。

147
00:06:36,872 --> 00:06:38,330
我々はそれについて話をするつもりはありません。

148
00:06:38,330 --> 00:06:42,990
私たちは与えられた、についてもっと話をするつもりです
データは、どのようにコンポーネントをレンダリングすることができますか？

149
00:06:42,990 --> 00:06:47,010
>> だから、あなたのための本当にクールで反応させ、
あなたが望む任意のバックエンドでそれを使用することができます。

150
00:06:47,010 --> 00:06:50,480
あなたは、Pythonバックエンドのようにしている場合、
あなたのPythonはいくつかのデータを吐き出すことができれば、

151
00:06:50,480 --> 00:06:51,610
それをレンダリングすることができます反応します。

152
00:06:51,610 --> 00:06:54,700
あなたには、JS出力されていない場合
データのために、それをレンダリング反応します。

153
00:06:54,700 --> 00:06:56,890
Rubyはとアップレール
データは、それをレンダリング反応します。

154
00:06:56,890 --> 00:07:01,860
>> したがって、基本的にウェブで反応させ、
コンポーネントとフロントエンドをview--

155
00:07:01,860 --> 00:07:03,910
いかなるデータソースの。

156
00:07:03,910 --> 00:07:07,145
だから、データソースからに行きます
コンポーネントを反応させることは非常に簡単です。

157
00:07:07,145 --> 00:07:08,770
他の方法で行くことは少し難しいです。

158
00:07:08,770 --> 00:07:10,462
私は前に述べたようにそれはフラックスを使用しています。

159
00:07:10,462 --> 00:07:11,420
私たちは、その中に取得することはできません。

160
00:07:11,420 --> 00:07:13,740
私たちは、上より焦点を当てます
データ - 部品面。

161
00:07:13,740 --> 00:07:15,880
あなたが作るこ​​とができますこの方法で
クール、楽しいウェブアプリ。

162
00:07:15,880 --> 00:07:19,870
それは外の世界には影響しません
今のところ、それはまた別の話です。

163
00:07:19,870 --> 00:07:22,210
>> [OK]を、ので、もしあなたがここにいました
私の最後のセミナー

164
00:07:22,210 --> 00:07:26,610
あなたがのためにコードのすべてを知っていますよ
今日の話は、次のURLであることを行っています

165
00:07:26,610 --> 00:07:29,320
ここで、申し訳ありませんが、ここではこのURL。

166
00:07:29,320 --> 00:07:32,730
そして、基本的に私達は行くつもりです
多分4つのステップ、5を経て、

167
00:07:32,730 --> 00:07:33,510
おそらくない5。

168
00:07:33,510 --> 00:07:37,300
私たちは4つのステップを移動します
サンプルをビルドのアプリを反応します。

169
00:07:37,300 --> 00:07:39,550
そして、そのようにすべてのソースコード
方法のあらゆるステップのための

170
00:07:39,550 --> 00:07:42,216
ので、もし、ここで右になるだろう
あなたは、自宅で一緒にフォローしています

171
00:07:42,216 --> 00:07:43,991
このコードを熟読すること自由に感じ。

172
00:07:43,991 --> 00:07:46,740
あなたはここに沿って、以下の場合は、
私たちは、画面上に表示されます

173
00:07:46,740 --> 00:07:47,739
それについては心配しないでください。

174
00:07:47,739 --> 00:07:50,930
しかし、あなたが自宅にいる場合は、感じます
このウェブサイトを訪問すること自由に。

175
00:07:50,930 --> 00:07:56,400
そして、ええ、あなたが得ることができる必要があります
あなたがここに必要があると思い、すべてのコード。

176
00:07:56,400 --> 00:08:01,380
だから、同様に良好なチートシートです
あなたの将来の冒険のために反応します。

177
00:08:01,380 --> 00:08:04,490
クール、もしそうであればここに誰もが、
あなたが自宅にいる場合であっても、

178
00:08:04,490 --> 00:08:11,580
is.gd/cs50react、このウェブサイトをプルアップし、
何の資本なし、アンダースコア、ない何もありません。

179
00:08:11,580 --> 00:08:15,849
>> あなたが見えるページが表示されます
このような少し。

180
00:08:15,849 --> 00:08:17,140
これはCodePenというものです。

181
00:08:17,140 --> 00:08:20,030
CodePenは、共同で
コー​​ディング環境

182
00:08:20,030 --> 00:08:23,364
私はここでコードを書くことができたとし、
それが自動的に送信されます。

183
00:08:23,364 --> 00:08:24,780
そして、このように、私はコードを書くことができます。

184
00:08:24,780 --> 00:08:26,920
私はここでコードを実行することができます。

185
00:08:26,920 --> 00:08:33,470
>> example--については、それが参照reloads--場合、
私は、ページ上のJavaScriptコードを実行していますよ

186
00:08:33,470 --> 00:08:36,390
右ここで、それはよ
ウェブページを自動的にレンダリングします

187
00:08:36,390 --> 00:08:37,980
このJavaScriptコードで。

188
00:08:37,980 --> 00:08:40,039
そして、これは方法です
私たちはコードを試してみるために

189
00:08:40,039 --> 00:08:43,089
使用することなく、本当に迅速な
私たちのIDや地元のマシンを使用

190
00:08:43,089 --> 00:08:44,290
または何でも。

191
00:08:44,290 --> 00:08:47,670
それはあなたがモックアップするための非常に簡単な方法です
コー​​ドの種類を試します。

192
00:08:47,670 --> 00:08:50,560
>> だから私は、服用するつもりです
コー​​ド例、ここでそれを置きます。

193
00:08:50,560 --> 00:08:52,374
私たちは、それを介して作業することになるだろう。

194
00:08:52,374 --> 00:08:54,540
そして、あなたは自宅にいるなら、あなた
同様にこれをプルアップすることができます。

195
00:08:54,540 --> 00:08:57,530
そして、私はすでにインストールしています
ここで反応するので、あなただけのことができます

196
00:08:57,530 --> 00:09:00,770
ここに独自のコードを書き、
あなた自身の遊び場としてそれを試してみてください。

197
00:09:00,770 --> 00:09:04,940
>> うん、誰もがする​​場合
ここでこのリンクを開きます。

198
00:09:04,940 --> 00:09:08,080
私に親指を与えてください
あなたはそれが開いていたらアップ。

199
00:09:08,080 --> 00:09:10,960

200
00:09:10,960 --> 00:09:13,770
クールクールクール。

201
00:09:13,770 --> 00:09:16,914
何も、今のところここにありませんが、
我々は非常にすぐにそれを変更します。

202
00:09:16,914 --> 00:09:21,250
>> [OK]を、ので、JavaScriptのですリアクト
ライブラリ、およびなど、

203
00:09:21,250 --> 00:09:24,480
JavaScriptの知識を必要とします
これは、ウェブプログラミング言語です。

204
00:09:24,480 --> 00:09:27,660
そして、それは他のもののために使われています
今あまりにしかし、主にWebを開発

205
00:09:27,660 --> 00:09:32,040
言語、あなたがに慣れていない場合ので、
それは、JSforCats.comというサイトをお読みください。

206
00:09:32,040 --> 00:09:32,700
それは素晴らしいです。

207
00:09:32,700 --> 00:09:34,240
あなたは、JavaScriptを学ぶことができます
時間半インチ

208
00:09:34,240 --> 00:09:34,990
それは信じられないです。

209
00:09:34,990 --> 00:09:36,420
>> だから、それを読み取りを与えます。

210
00:09:36,420 --> 00:09:39,960
また、こちらのHTMLがたくさんあり​​ます
我々はもちろん、Webページを設計しています。

211
00:09:39,960 --> 00:09:43,890
だから、あなたがに慣れていないなら
HTMLは、HTMLdog.comをチェックしてください。

212
00:09:43,890 --> 00:09:46,520
私が反応されている学習と思います
万回容易すでに場合

213
00:09:46,520 --> 00:09:47,892
ビルディングブロックを知っています。

214
00:09:47,892 --> 00:09:50,600
あなたがコンポーネントを持っている場合、それはです
大きな部品を作るのは簡単。

215
00:09:50,600 --> 00:09:51,860
それはあなたの言語に反応です。

216
00:09:51,860 --> 00:09:54,270
>> だから先に行くと与えます
これらの事のリード。

217
00:09:54,270 --> 00:09:55,070
このビデオを一時停止します。

218
00:09:55,070 --> 00:09:57,440
あなたがいる場合はそれを読み取りを与えます
自宅であなたがいない場合

219
00:09:57,440 --> 00:10:00,794
HTMLやJavaScriptに精通しています

220
00:10:00,794 --> 00:10:02,960
[OK]を、私たちはするつもりだもの
行うには、我々はするつもりですさ

221
00:10:02,960 --> 00:10:06,470
リアクト使用して、非常に基本的なフラッシュカードアプリ。

222
00:10:06,470 --> 00:10:08,210
我々は、フラッシュカードを持っているつもりです。

223
00:10:08,210 --> 00:10:09,880
あなたは、カードを前後に反転させることができます。

224
00:10:09,880 --> 00:10:12,399
そして、我々はまたのリストを持っています
我々が持っているすべてのカード、

225
00:10:12,399 --> 00:10:14,190
そして、私たちは感じている場合
野心的な、我々は次のようになります

226
00:10:14,190 --> 00:10:17,060
切り替えることができます
それらをクリックして車。

227
00:10:17,060 --> 00:10:20,360
>> しかし、これはあなたの裸のうち、
骨は、非常にシンプルなアプリを反応します。

228
00:10:20,360 --> 00:10:22,560
そして、これは実際にあります
実装するのは簡単ではありません、

229
00:10:22,560 --> 00:10:26,030
しかし、我々はあなたがしなければ、それを表示しようとしています
これは、それを拡張するために非常に、非常に簡単です

230
00:10:26,030 --> 00:10:27,680
他の人々はそれのお手伝いをする場合。

231
00:10:27,680 --> 00:10:33,750
だから我々は、4つの手順を実行するつもりです
これを構築するためにゼロから始めます。

232
00:10:33,750 --> 00:10:36,740
>> [OK]を、ので、4つのステップは、我々はよ
最初のステップで始めます。

233
00:10:36,740 --> 00:10:39,790
最初のステップは、あることを行っています
あなたの最初のコンポーネントを構築します。

234
00:10:39,790 --> 00:10:44,830
私が前に言ったように、中の成分が反応
ステロイドだけでHTML要素です。

235
00:10:44,830 --> 00:10:49,660
これは、HTMLを指定します
いくつかの動作、およびそれ

236
00:10:49,660 --> 00:10:52,600
どのように人々を指定します
どのようにそれと対話することができます

237
00:10:52,600 --> 00:10:54,270
それは、内部​​状態を有するであろう。

238
00:10:54,270 --> 00:10:57,630
ボタンがどのように多くのように知ることができますように
時間それは、例えば、クリックされています、

239
00:10:57,630 --> 00:11:01,010
そして、それは自分自身をレイアウトする方法を知っています。

240
00:11:01,010 --> 00:11:04,430
>> それでは、先に行くと、私たちを作成してみましょう
JavaScriptを使用して最初のコンポーネント。

241
00:11:04,430 --> 00:11:09,711
構文は奇妙に見えるのであれば、
それは一種のだからです。

242
00:11:09,711 --> 00:11:11,710
だから、もう一度、我々はつもりです
変数を作ります

243
00:11:11,710 --> 00:11:14,580
アプリキーワードを使用してみましょう、
どの変数になり、

244
00:11:14,580 --> 00:11:18,210
アプリ同等React.createClassしましょう​​。

245
00:11:18,210 --> 00:11:22,609
>> 反応は、ライブラリで、持っています
クラスの関数を作成します。

246
00:11:22,609 --> 00:11:24,400
そして、この関数であります
そのあなたのコードのビット

247
00:11:24,400 --> 00:11:29,090
新しいを作成するために使用することができます
リアクトコンポーネントのタイプ。

248
00:11:29,090 --> 00:11:32,780
そしてそうReact.createClass
コンポーネントを行い、

249
00:11:32,780 --> 00:11:35,270
このコンポーネントはなります
ものを行うことができます。

250
00:11:35,270 --> 00:11:40,460
それが行うことができます主なものはレンダリングです
何か、関数としてレンダリングされます。

251
00:11:40,460 --> 00:11:44,500
>> 繰り返しますが、このインデックスはには明らかでない場合
あなたは、私はあなたの猫のためのJSに行くお勧めします

252
00:11:44,500 --> 00:11:45,682
そしてそれをチェックアウト。

253
00:11:45,682 --> 00:11:47,710
十分にズームインことですか？

254
00:11:47,710 --> 00:11:48,490
クール。

255
00:11:48,490 --> 00:11:50,670
>> だから、すべてのコンポーネントのニーズ
レンダリング機能を持っています。

256
00:11:50,670 --> 00:11:53,010
レンダリング機能は言います、
私は、画面上に何を印刷するのですか？

257
00:11:53,010 --> 00:11:54,760
しかし、コンポーネントがあります
そうでない場合には役に立ちません

258
00:11:54,760 --> 00:11:58,060
画面上に印刷するものを知っているので、
あなたは、レンダリング機能を持っている必要があります。

259
00:11:58,060 --> 00:12:01,904
>> あなたは、レンダリング事でそう
ただ、いくつかのHTMLを返す必要があります。

260
00:12:01,904 --> 00:12:03,820
そして、何クールなのはということです
ものがあります

261
00:12:03,820 --> 00:12:08,660
の拡張であるJSX、
反応によって使用されるJavaScript。

262
00:12:08,660 --> 00:12:11,845
それはあなたの中にHTMLを記述してみましょう
JavaScriptのの、どの

263
00:12:11,845 --> 00:12:13,970
種類の奇妙なときに聞こえます
あなたが最初にそれについて考え、

264
00:12:13,970 --> 00:12:15,553
それは、その後多くの意味になります。

265
00:12:15,553 --> 00:12:17,430
だから我々はこれを行うことができます。

266
00:12:17,430 --> 00:12:21,360
あなたはHTMLに精通している場合、私は知っています
我々は一般的な目的でのdivを持っています

267
00:12:21,360 --> 00:12:22,790
もののための容器。

268
00:12:22,790 --> 00:12:26,380
私たちは、内部のdivを返す、とすることができます
このdivが、私たちはものを置くことができます。

269
00:12:26,380 --> 00:12:32,390
>> それでは、私たちはレンダリングしたいとしましょう
今のストレートアップフラッシュカード。

270
00:12:32,390 --> 00:12:34,890
フラッシュカード、私は言うだろう、
質問と答えを持っています。

271
00:12:34,890 --> 00:12:37,530
したがって、このdivの内側に、してみましょう
段落を印刷

272
00:12:37,530 --> 00:12:42,155
つまり何question--言います
生活に究極の答えは、宇宙？

273
00:12:42,155 --> 00:12:47,640

274
00:12:47,640 --> 00:12:50,345
そして、答えは
もちろん、42、になるだろう。

275
00:12:50,345 --> 00:12:56,880

276
00:12:56,880 --> 00:12:59,730
>> それはすべてで十分に確立されませんでした。

277
00:12:59,730 --> 00:13:04,164
うん、だから基本的にはあなたは本当にすることができます
JavaScriptの内部HTMLを記述します。

278
00:13:04,164 --> 00:13:06,330
そして、これはあることを行っています
画面にプリントアウト。

279
00:13:06,330 --> 00:13:08,250
それでは、それを試してみましょう。

280
00:13:08,250 --> 00:13:09,520
>> だから我々は我々のコンポーネントを持っています。

281
00:13:09,520 --> 00:13:12,210
私たちは置くに反応指示する必要があります
画面上のコンポーネント

282
00:13:12,210 --> 00:13:18,990
そうReact.renderは、その結果、私たちに気付きます
他の要素のようなアプリを扱います。

283
00:13:18,990 --> 00:13:21,010
それはHTML要素だったとして我々はそれを書きます。

284
00:13:21,010 --> 00:13:25,100
同様の代わりにIMGのように言って
段落のイメージまたはpの、

285
00:13:25,100 --> 00:13:28,120
アプリケーションがあるので、あなたは、アプリケーションを書きます
HTML要素のように扱わ。

286
00:13:28,120 --> 00:13:30,380
私が前に言ったように、それはです
ステロイドの要素。

287
00:13:30,380 --> 00:13:32,870
>> だから、アプリケーションをレンダリングし、あなた
それにそれを置くための場所を与えます。

288
00:13:32,870 --> 00:13:37,170
そして、これはどのようにすることができますです
どこにそれを置くためにそれを伝えます。

289
00:13:37,170 --> 00:13:46,200
私は上の単純なdiv要素を作成しました
ページのIDと呼ばれるページ、

290
00:13:46,200 --> 00:13:48,300
それはどこです
要素は行くつもりです。

291
00:13:48,300 --> 00:13:49,841
>> そして、我々は、HTMLを使用して実行するつもりはありません。

292
00:13:49,841 --> 00:13:53,145
基本的にこれが取得する予定です
このページ要素の内側に置きます

293
00:13:53,145 --> 00:13:54,270
私たちは、画面上に持っていること。

294
00:13:54,270 --> 00:13:59,210
だから、このコードを実行され、これを描きます
画面上のものなので、ここではあります。

295
00:13:59,210 --> 00:14:01,770
私たちは私たちの最初の反応させ、コンポーネントを行いました。

296
00:14:01,770 --> 00:14:08,000
>> だから復習として、私たちは静かに行われ
コンポーネントの新しいタイプの、右？

297
00:14:08,000 --> 00:14:10,145
それは何React.createClassです。

298
00:14:10,145 --> 00:14:12,680
そして、そのコンポーネントでは、我々
それは何をすべきか、それを語りました。

299
00:14:12,680 --> 00:14:15,590
このコンポーネントは、あるときはいつでも
スクリーン上に印刷され、

300
00:14:15,590 --> 00:14:19,300
それはdiv要素でプリントアウトされます
その中の2段落。

301
00:14:19,300 --> 00:14:24,460
>> そして、私たちが何をしたか、我々は新しいアプリを作りました
アングルブラケットアプリの表記を使用して。

302
00:14:24,460 --> 00:14:27,160
私たちはそれを置くためにそれを言いました
ページ要素の内部。

303
00:14:27,160 --> 00:14:29,867
そして、私がやったこと、それが作成されました
そのテンプレートから新しいアプリ。

304
00:14:29,867 --> 00:14:31,200
そして、私はそれをレンダリングすることを告げました。

305
00:14:31,200 --> 00:14:33,680
だから、[OK]を、アプリ、言いました、
私は何を印刷すべきか？

306
00:14:33,680 --> 00:14:36,970
アプリケーションは、div要素をプリントアウト行く、と言います
その中の2段落で。

307
00:14:36,970 --> 00:14:40,420
出来上がり、とのdivがあります
その中の2段落。

308
00:14:40,420 --> 00:14:43,180
これまでに意味をなさない？

309
00:14:43,180 --> 00:14:46,690
>> だから、もう一度、全体の課題が反応
単にコンポーネントを作成する方法を知っています。

310
00:14:46,690 --> 00:14:48,500
する方法
コンポーネントが連携して動作します。

311
00:14:48,500 --> 00:14:51,780
今、私たちは私たちの最初を作ったこと
コンポーネント、のに戻ってみましょう

312
00:14:51,780 --> 00:14:54,284
およびコンポーネントがカスタマイズ可能にします。

313
00:14:54,284 --> 00:14:56,700
だから、HTMLでどのように知っているあなた
あなたのボタンクラスを与えることができますか？

314
00:14:56,700 --> 00:14:59,146
あなたのアンカーのhrefを与えることができます。

315
00:14:59,146 --> 00:15:00,770
あなたは正しい、あなたの入力タイプを与えることができますか？

316
00:15:00,770 --> 00:15:04,740
あなたはより多くのカスタムを与えることができます
あなたのすべての要素にプロパティ

317
00:15:04,740 --> 00:15:06,490
それをより面白くするために。

318
00:15:06,490 --> 00:15:09,030
そして、我々は実際に行うことができます
まったく同じこと。

319
00:15:09,030 --> 00:15:17,500
>> それでは、私たちがしたいとしましょう
アプリは、任意のカードをレンダリング行きます。

320
00:15:17,500 --> 00:15:19,630
今、私たちだけ
ハードコードされたカードをレンダリング。

321
00:15:19,630 --> 00:15:22,530
私たちは、1つがあります知っています
カードは、それが行うことができますので、私たちはしています

322
00:15:22,530 --> 00:15:25,960
試してみて、今これを変更するつもり
私たちはそれにいくつかのカードを与えることができます。

323
00:15:25,960 --> 00:15:27,410
これは、カードを印刷します。

324
00:15:27,410 --> 00:15:29,380
>> あなたは試してみて、あなたの作るべきです
コンポーネントは非常に汎用。

325
00:15:29,380 --> 00:15:31,654
私は電子メールで送信できたので、この方法
この私の友人とのようで、

326
00:15:31,654 --> 00:15:33,820
あなたが持っているどのようなフラッシュカード、
ちょうどここにそれを送り、

327
00:15:33,820 --> 00:15:35,290
そして、それはそれ自体でそれをやります。

328
00:15:35,290 --> 00:15:37,650
あなたは他の置くことができます
独自のアプリで物事。

329
00:15:37,650 --> 00:15:40,600
>> しかし、最初のは、これを破るしましょう
二つの成分にアップし、

330
00:15:40,600 --> 00:15:44,500
しかし、我々はカードを分けたいです
実際のアプリの一部から印刷部。

331
00:15:44,500 --> 00:15:46,660
だから我々は何ができるか、私たちはあります
アプリケーションからこれを変更することができます

332
00:15:46,660 --> 00:15:51,300
CardViewに、ちょうど
アプリの新しい名前、

333
00:15:51,300 --> 00:15:54,450
私たちは、新しいことができます
コンポーネントは、アプリケーションと呼ばれ

334
00:15:54,450 --> 00:15:56,336
古いアプリケーションと混同しないように。

335
00:15:56,336 --> 00:16:00,730
我々はcreateClassを持っています、
HTMLのように、

336
00:16:00,730 --> 00:16:03,590
あなたがコンポーネントを入れ子に反応することができます
互いの内部。

337
00:16:03,590 --> 00:16:16,430
>> したがって、この中で機能をレンダリング、
関数の戻りCardView、

338
00:16:16,430 --> 00:16:18,234
これはまったく同じものです。

339
00:16:18,234 --> 00:16:19,400
それは同じことだなぜか？

340
00:16:19,400 --> 00:16:22,590
その代わりに、単にアプリをレンダリングします
それの内側のdivとペアリングを持って、

341
00:16:22,590 --> 00:16:26,194
アプリはCardViewをレンダリングし、
CardViewはdiv要素や段落をレンダリングします。

342
00:16:26,194 --> 00:16:29,110
だから、これは私たちの最初の例であります
互いの内部にネスト要素。

343
00:16:29,110 --> 00:16:32,177
それは理にかなっていますか？

344
00:16:32,177 --> 00:16:33,760
だから、もう一度、我々はCardView要素を持っています。

345
00:16:33,760 --> 00:16:37,250
私たちは、アプリの要素を持っています
それはより大きいということ。

346
00:16:37,250 --> 00:16:40,990
>> [OK]を、私たちはあなたの場合は、当社CardView--をしたいです
良いCardViewに特定のカードを与え、

347
00:16:40,990 --> 00:16:43,370
それは右、あなたのためにプリントアウトよ？

348
00:16:43,370 --> 00:16:48,050
したがって、最初に、我々はカードを作る必要があり、
それでは、カードオブジェクトを作成してみましょう。

349
00:16:48,050 --> 00:17:02,930
だから私のカードをさせequal--
あなたはすべて精通している場合は、

350
00:17:02,930 --> 00:17:05,260
これは単に記法作りです
JavaScriptでのオブジェクト。

351
00:17:05,260 --> 00:17:09,280
それは一種の構造体のようなものです
C言語で、私たちは、カードを作りました

352
00:17:09,280 --> 00:17:15,920
そして今、我々は、このカードを渡すことができます
プロパティまたはHTML内の属性として

353
00:17:15,920 --> 00:17:17,290
我々のアプリに専門用語。

354
00:17:17,290 --> 00:17:20,210
だから我々は、アプリを起動するこれを行うことができます
カードするMyCardに等しいです。

355
00:17:20,210 --> 00:17:23,200
>> あなたは、あなたがどの​​ように入力で、知っています
入力タイプは、テキストやボタンに等しいです

356
00:17:23,200 --> 00:17:25,240
クラスは、ブートストラップ用のBTNに等しい,?

357
00:17:25,240 --> 00:17:29,500
同じ考え、アプリケーションのカードequals--
あなたがブレースを入れて持ってhere--

358
00:17:29,500 --> 00:17:33,830
アプリケーションカードするMyCardに等しいので、この
私たちはこのカードオブジェクトを持っていると言います。

359
00:17:33,830 --> 00:17:39,149
私はとして渡すつもりです
アプリのコンポーネントにプロパティを設定します。

360
00:17:39,149 --> 00:17:41,440
そして、このアプリのコンポーネントはなります
それにアクセスすることができると行います

361
00:17:41,440 --> 00:17:43,580
それで面白いです。

362
00:17:43,580 --> 00:17:47,650
>> だから、我々のアプリがあることを行っています
今のように、カードを与えられ、

363
00:17:47,650 --> 00:17:49,980
ただ与えるのアプリを持ってみましょう
CardViewにカード

364
00:17:49,980 --> 00:17:53,110
自身アプリのようではありませんので、
それをどのように処理するかを知っているだろう、

365
00:17:53,110 --> 00:17:54,850
私たちはただCardViewにそれを与えるでしょう。

366
00:17:54,850 --> 00:18:00,050
だから我々はそれを渡します
同じように、カードイコール、

367
00:18:00,050 --> 00:18:05,426
そのため、各コンポーネントにアクセスすることができます
それに与えられているもの。

368
00:18:05,426 --> 00:18:07,800
彼らは、プロパティにアクセスすることができます
それに与えられていること

369
00:18:07,800 --> 00:18:09,470
this.props.card、この構文を使用して。

370
00:18:09,470 --> 00:18:12,010

371
00:18:12,010 --> 00:18:14,920
>> それでは、ここでされて起こります
あなたするMyCardオブジェクトを持っています。

372
00:18:14,920 --> 00:18:18,250
あなたはアプリにそれを渡します
アプリケーションカードを使用してmyCardに等しいです。

373
00:18:18,250 --> 00:18:21,420
そのカードオブジェクトは、あなたのアプリケーションに与えられています。

374
00:18:21,420 --> 00:18:24,400
アプリはそれにアクセスすることができます
this.props.cardとして。

375
00:18:24,400 --> 00:18:28,780
それは一種の画像のようなものです
それのソースが何であるかを知っています。

376
00:18:28,780 --> 00:18:31,972
>> このアプリは、それは、カードのことを知っています
であり、それはそれで何かを行うことができます。

377
00:18:31,972 --> 00:18:32,930
これは、計算を行うことができます。

378
00:18:32,930 --> 00:18:35,290
それはそれのオフに基づいて意思決定を行うことができます。

379
00:18:35,290 --> 00:18:39,950
>> 今のところ、私は渡すつもりでした
CardViewにthis.props.card。

380
00:18:39,950 --> 00:18:43,420
これまでに意味をなさない？

381
00:18:43,420 --> 00:18:45,210
今ではより多くの意味を行います。

382
00:18:45,210 --> 00:18:46,990
>> [OK]を、今、私たちはCardViewにいます。

383
00:18:46,990 --> 00:18:51,719
カード与えられた私たちのCardView、必要があります
その質問と回答を印刷。

384
00:18:51,719 --> 00:18:54,510
今私たちはいくつかをプリントアウト
ハードコードされた質問と回答。

385
00:18:54,510 --> 00:18:57,720
我々は必要out--把握する必要があります
彼らは私たちを与えたカードを依頼します

386
00:18:57,720 --> 00:19:01,360
質問と回答は、何で、
その後、スクリーンにこれをプリントアウト。

387
00:19:01,360 --> 00:19:02,470
>> だから我々は、ここでこれを行うことができます。

388
00:19:02,470 --> 00:19:06,135
で最初に等しい行うbegin--レンダリングします。

389
00:19:06,135 --> 00:19:08,710

390
00:19:08,710 --> 00:19:13,050
それでは、私たちがここでやっていることは私達がことを知っています
カードは、プロパティに私たちを与えています

391
00:19:13,050 --> 00:19:13,580
右？

392
00:19:13,580 --> 00:19:15,930
これは、入力として私たちに与えられています。

393
00:19:15,930 --> 00:19:19,440
それはほとんどのようだよう
関数への引数。

394
00:19:19,440 --> 00:19:22,810
カードは、引数であります
ほとんどこのCardViewに。

395
00:19:22,810 --> 00:19:25,239
>> 我々はそれを抽出し、あげますよ
それを変数に疑問。

396
00:19:25,239 --> 00:19:27,280
答えは行ったことを確認してください
変数answerに。

397
00:19:27,280 --> 00:19:31,130
カードが応答することを要求します。

398
00:19:31,130 --> 00:19:35,072
そして今、我々はこれらを持っていること、
代わりにそのテキストを印刷します、

399
00:19:35,072 --> 00:19:37,030
私たちは、プリントアウトするつもりです
何でも彼らは私たちを与えました。

400
00:19:37,030 --> 00:19:43,580
>> だから、これは私たちが行っていますstuff--
質問回答を出します。

401
00:19:43,580 --> 00:19:46,380
これが動作するかどうかを見てみましょう。

402
00:19:46,380 --> 00:19:52,800
クール、それでは、それをステップ実行しましょう
念のためにもう一回。

403
00:19:52,800 --> 00:20:00,470
>> だから私のカードは、カードオブジェクトであり、我々
アプリにそのカードを与えています。

404
00:20:00,470 --> 00:20:04,790
そして、アプリは取るために起こっています
カードとCardViewにそれを与えます。

405
00:20:04,790 --> 00:20:09,190
そして、このCardViewはあなたの場合、言います
私は任意のフラッシュカードのオブジェクトを与え、

406
00:20:09,190 --> 00:20:11,920
私はその質問をプリントアウトします
その答えは、右？

407
00:20:11,920 --> 00:20:14,590
>> だから私は何ができるか私ができることです
まず、このコードを送信

408
00:20:14,590 --> 00:20:16,580
私のコードの10行のように、私の友人に。

409
00:20:16,580 --> 00:20:18,820
彼はそれを埋め込むことができます
彼自身のアプリケーション。

410
00:20:18,820 --> 00:20:27,200
そして彼は同じことをした限り、
CardViewカードのようにこれを等しくなり、

411
00:20:27,200 --> 00:20:30,580
彼はCardViewを作成している限り、
それに右の情報を与え、

412
00:20:30,580 --> 00:20:31,987
彼は自分のカードをレンダリングすることができます。

413
00:20:31,987 --> 00:20:34,320
だからこの方法は、それは本当にです
あなたが構築するためのクールな方法

414
00:20:34,320 --> 00:20:35,906
お互いを使用するコンポーネントは、右？

415
00:20:35,906 --> 00:20:38,280
このカードは、私が公開する可能性が
インターネット上でこのCardView、

416
00:20:38,280 --> 00:20:39,790
人々はそれを使用することができるであろう。

417
00:20:39,790 --> 00:20:45,070
したがって、基本的には、のいずれかのようです
Cライブラリの標準機能。

418
00:20:45,070 --> 00:20:47,280
>> それはどこ関数です
誰かがそれを書いています。

419
00:20:47,280 --> 00:20:48,419
あなたは、特定の入力を与えます。

420
00:20:48,419 --> 00:20:49,710
これは、特定の出力を生成します。

421
00:20:49,710 --> 00:20:50,890
あなたはそれが内部でどのように動作するか気にしません。

422
00:20:50,890 --> 00:20:53,790
限り、あなたはそれに権利を与えるよう
入力、それは正しい出力を行います。

423
00:20:53,790 --> 00:20:57,850
>> そして、コンポーネントがすることができます
同じように考えます。

424
00:20:57,850 --> 00:21:00,280
このCardViewは次のようです
ライブラリ関数。

425
00:21:00,280 --> 00:21:03,400
あなたはそれにいくつかのカードを与えた場合
プロパティとして、それはよ

426
00:21:03,400 --> 00:21:05,095
そのカードの内容をプリントアウトします。

427
00:21:05,095 --> 00:21:16,820
私は私のカードを変更した場合と同様に
代わりに5プラス37であるもののようで、

428
00:21:16,820 --> 00:21:19,210
それに応じて更新されます。

429
00:21:19,210 --> 00:21:21,955
だから入力を変化させることで、
それは一定の出力を取得します。

430
00:21:21,955 --> 00:21:24,830
だから、ほとんどのコンポーネントで考えることができます
このように機能するように、これ

431
00:21:24,830 --> 00:21:25,920
あなたが一緒に置くことができます。

432
00:21:25,920 --> 00:21:29,440
このCardViewように、入力を取得
入力として、あなたは出力を得ます。

433
00:21:29,440 --> 00:21:31,900
この場合、出力はHTMLです。

434
00:21:31,900 --> 00:21:34,404
これまでに意味をなさない？

435
00:21:34,404 --> 00:21:36,890
クールなので、もう一度、プロパティがあります
その情報を渡す方法

436
00:21:36,890 --> 00:21:40,900
コンポーネントのうち。

437
00:21:40,900 --> 00:21:42,740
>> OK、それでは、これを作ってみよう
事インタラクティブ。

438
00:21:42,740 --> 00:21:44,450
今のところは、退屈のようなものです。

439
00:21:44,450 --> 00:21:45,520
[聞こえない]とは何ですか？

440
00:21:45,520 --> 00:21:48,210
あなたは、いくつかを印刷することができます
それはそれを行うことができるすべてです。

441
00:21:48,210 --> 00:21:51,550
>> それでは、に戻ってみましょう
ただ今の昔の質問。

442
00:21:51,550 --> 00:21:54,405
[OK]を、ので、今、これらのコンポーネント
すべての彼らが行うので退屈しています、

443
00:21:54,405 --> 00:21:55,030
彼らが入力を取得。

444
00:21:55,030 --> 00:21:56,100
彼らは出力、右作りますか？

445
00:21:56,100 --> 00:21:57,049
それは退屈のようなものです。

446
00:21:57,049 --> 00:21:59,090
私たちは持っていたいです
コンポーネントが持っていることができるようにします

447
00:21:59,090 --> 00:22:02,150
内部状態のいくつかの種類、
以下のようなものを覚えています。

448
00:22:02,150 --> 00:22:05,320
>> フラッシュカードの場合のために
たとえば、どのような状態の種類

449
00:22:05,320 --> 00:22:07,550
あなたがしたいことがあります
フラッシュカードのために覚えていますか？

450
00:22:07,550 --> 00:22:09,740
どのような一時的なステータス
あなたは覚えておきたいことがあります

451
00:22:09,740 --> 00:22:12,491
フラッシュカードアプリでフラッシュカードのために？

452
00:22:12,491 --> 00:22:13,990
聴衆：それは裏返しされていますかどうか？

453
00:22:13,990 --> 00:22:14,990
ネールMEHTA：ええ、右。

454
00:22:14,990 --> 00:22:17,665
だから、残しておきたいことがあります
あなたが表向きかされているのトラック

455
00:22:17,665 --> 00:22:19,100
あなたはカードを下に直面しています。

456
00:22:19,100 --> 00:22:23,420
Facebook上で、例えば、あなたが希望
ニュースフィードにどこ覚えておきたいです

457
00:22:23,420 --> 00:22:25,870
あなたがされているか、またはプロファイルの方が好き
あなたが今やっています。

458
00:22:25,870 --> 00:22:30,127
>> メッセンジャー、にどのようなテキストあなたを好き
入力ボックスに入力し、右？

459
00:22:30,127 --> 00:22:31,710
ページを更新する場合、それが表示されなくなります。

460
00:22:31,710 --> 00:22:32,793
しかし、あなたが本当に気にしません。

461
00:22:32,793 --> 00:22:33,770
それはちょうど一時的です。

462
00:22:33,770 --> 00:22:34,548
うん？

463
00:22:34,548 --> 00:22:36,152
>> 聴衆：[聞こえません]

464
00:22:36,152 --> 00:22:38,360
ネールMEHTA：フラッシュのように
カード、あなたが見てすることができますように

465
00:22:38,360 --> 00:22:40,290
質問側または回答側？

466
00:22:40,290 --> 00:22:41,070
>> 聴衆：[OK]をクリックします。

467
00:22:41,070 --> 00:22:43,270
>> ネールMEHTA：同様
両面フラッシュカード、右？

468
00:22:43,270 --> 00:22:46,370
ええ、あなたがしたいです
今のこのアイデアを持っています

469
00:22:46,370 --> 00:22:50,370
私は、入力のようなものです特性を有し、
一時的なものであるが、状態、ええと、

470
00:22:50,370 --> 00:22:51,839
あなたは、ページ上で右どこにいるの？

471
00:22:51,839 --> 00:22:54,380
繰り返しますが、私はFacebookの中で述べて
メッセンジャー、私は人のように持っています

472
00:22:54,380 --> 00:22:56,550
あなたは、Facebookを見ています
人やプロフィール、右ですか？

473
00:22:56,550 --> 00:22:58,030
>> これは一時的なものです。

474
00:22:58,030 --> 00:23:01,200
これは、ユーザーを表示することが重要です
何が起こっているが、ページを更新しています。

475
00:23:01,200 --> 00:23:02,250
それは本当に問題ではありません。

476
00:23:02,250 --> 00:23:04,530
だから、一時的な状態ですが、
だから我々はすべてそれ状態。

477
00:23:04,530 --> 00:23:06,250
>> だから、再び、状態や小道具があります。

478
00:23:06,250 --> 00:23:09,084
小道具は、入力が与えられています
データソースから。

479
00:23:09,084 --> 00:23:10,250
国家はただ、デフォルトのようなものです。

480
00:23:10,250 --> 00:23:13,700
それだけのもののようなものです
事をインタラクティブに。

481
00:23:13,700 --> 00:23:17,720
>> だから、私たちのCardView--でのが持ってみましょう
私たちのCardView--そ​​れはよかったので。

482
00:23:17,720 --> 00:23:21,420
私たちは私たちが行っている、ここでやろうとしています
CardViewだけCardViewに触れ。

483
00:23:21,420 --> 00:23:25,105
そして、これを得たので、私の友人、彼ら
任意の違いに気付かないだろう。

484
00:23:25,105 --> 00:23:27,230
彼らは変更する必要はないだろう
独自のコードのいずれか、

485
00:23:27,230 --> 00:23:29,410
しかし、彼らは彼らを参照してくださいね
CardViewはアップsoupedました。

486
00:23:29,410 --> 00:23:31,270
それはコンポーネントのいい部分です。

487
00:23:31,270 --> 00:23:35,290
>> [OK]を、私たちのCardViewでので、試してみましょうと
我々はアップフェーズているかどうかを追跡

488
00:23:35,290 --> 00:23:36,560
または下向き。

489
00:23:36,560 --> 00:23:40,480
リアクトでは、最初にすることによってこれを行います
初期状態を指定します。

490
00:23:40,480 --> 00:23:42,070
どこでカードが始まるのでしょうか？

491
00:23:42,070 --> 00:23:48,480
>> だからgetInitialState呼び出される関数であります
機能、我々はオブジェクトを返します。

492
00:23:48,480 --> 00:23:53,310
この目的は、いくつかの状態が含まれ、そして
状態は、単に、キーと値のペアです。

493
00:23:53,310 --> 00:23:56,950
指示のように、キーとしてい
名前が文字列であるような値は、あなたが持っています。

494
00:23:56,950 --> 00:24:01,410
>> この場合、のは、フロントが真であるとしましょう​​。

495
00:24:01,410 --> 00:24:03,760
これは、我々は状態を持っていることを述べています。

496
00:24:03,760 --> 00:24:06,570
状態の一成分
フロントと呼ばれる属性があります。

497
00:24:06,570 --> 00:24:09,649
[聞こえない]、デフォルトではそう、
我々は、カードの前面にいます、

498
00:24:09,649 --> 00:24:11,440
私たちはこれを変更することができます
我々はカードを反転など。

499
00:24:11,440 --> 00:24:13,380
理にかなって？

500
00:24:13,380 --> 00:24:18,190
>> [OK]を、そうで今、私たちがしている、レンダリング
質問と回答を示しました。

501
00:24:18,190 --> 00:24:20,860
今、私たちは何をすべきか
質問を示しています

502
00:24:20,860 --> 00:24:24,370
私たちはそのように、カードの前面にしている場合
答えは、カードの裏面のためのものです。

503
00:24:24,370 --> 00:24:26,850
あなたのすべてが作る理由です
カードインタラクティブ。

504
00:24:26,850 --> 00:24:28,100
それでは、ここで試してみて、これにしましょう​​。

505
00:24:28,100 --> 00:24:31,600

506
00:24:31,600 --> 00:24:33,620
まあ、最初だけで変数を作ります。

507
00:24:33,620 --> 00:24:37,790
現在this.state.front求めることができます。

508
00:24:37,790 --> 00:24:42,010
私たちは、同じ私たちを述べるアクセス
アクセス小道具、そうthis.state.front。

509
00:24:42,010 --> 00:24:45,870
>> 私たちはフロントであれば、テキスト
this.props.card.questionです。

510
00:24:45,870 --> 00:24:48,777

511
00:24:48,777 --> 00:24:51,360
私たちは、目の前にしている場合
カード、我々は試してみて、グラブしようとしています

512
00:24:51,360 --> 00:24:52,485
カードからの質問。

513
00:24:52,485 --> 00:24:54,782

514
00:24:54,782 --> 00:24:57,240
そうでなければ、我々は背中に​​している場合
カードの、私たちは何をしていますか？

515
00:24:57,240 --> 00:25:01,830

516
00:25:01,830 --> 00:25:02,750
>> 聴衆：答え？

517
00:25:02,750 --> 00:25:05,041
>> ネールMEHTA：うん、そうテキスト
this.props.card.answer等しいです。

518
00:25:05,041 --> 00:25:08,472

519
00:25:08,472 --> 00:25:10,930
あなたが気づいた場合でも、我々は、使用しています
決定を行う状態

520
00:25:10,930 --> 00:25:14,420
今コンポーネント理由
異なります

521
00:25:14,420 --> 00:25:16,710
これらは、それとの対話方法をオフに基づいて。

522
00:25:16,710 --> 00:25:20,355
だからではなく、これをプリントアウト、
私たちはテキストを出力します。

523
00:25:20,355 --> 00:25:25,270

524
00:25:25,270 --> 00:25:28,650
クール、今、あなたが見るように、
我々は唯一の問題を参照してください。

525
00:25:28,650 --> 00:25:37,720
そして、私は手動でこちらの状態を変更した場合
前に、我々は42を取り戻すfalseです。

526
00:25:37,720 --> 00:25:39,720
>> だから、もう一度、このコンポーネント
自身の状態を有しています。

527
00:25:39,720 --> 00:25:43,440
ボタンのようにするかどうかを知っています
それは、押されたかどうかをされています

528
00:25:43,440 --> 00:25:46,080
この事はオンになっているかを知っています
前面または背面にあります。

529
00:25:46,080 --> 00:25:48,320
デフォルトでは、前面のです。

530
00:25:48,320 --> 00:25:50,840
そして、それはフロントにいた場合、
私たちは質問をプリントアウトします。

531
00:25:50,840 --> 00:25:53,106
それは背面にあるなら、私たちはよ
答えをプリントアウトします。

532
00:25:53,106 --> 00:25:54,980
だから、再び、情報
特定のは同じです。

533
00:25:54,980 --> 00:25:59,090
それだけで違って見えます
あなたがそれをプログラムする方法に基づいて。

534
00:25:59,090 --> 00:26:02,670
だから、例えば、Facebookのメッセンジャー、
同じデータソースを取得する場合であっても、

535
00:26:02,670 --> 00:26:05,170
それは異なる場合があります
状態が異なるため。

536
00:26:05,170 --> 00:26:08,421
あなたが見ています
別の人のメッセージ。

537
00:26:08,421 --> 00:26:10,930
>> [OK]を、これはすべてが順調であり、
良いが、今実際に何

538
00:26:10,930 --> 00:26:15,940
かどうか、変更することが私たちができる作ります
私たちのカードには、前面と背面です。

539
00:26:15,940 --> 00:26:19,010
私たちは、フリップを追加することによってこれを行うことができます
ボタン、そのカードへのボタン

540
00:26:19,010 --> 00:26:22,950
それは[聞こえない]だ場合は、カードを反転します。

541
00:26:22,950 --> 00:26:31,770
それでは、ここでは、これをボタンを追加してみましょう
ボタンを押すと、このボタンは、フリップを言うだろう。

542
00:26:31,770 --> 00:26:35,650
>> だから、今、それを
何もしていません。

543
00:26:35,650 --> 00:26:37,075
それはちょうど良さそうに見えます。

544
00:26:37,075 --> 00:26:43,650
私たちにできることは私たちがクリックを追加することができますです
ハンドラは、onClickのは、this.flip等しいです

545
00:26:43,650 --> 00:26:44,820
我々は、後にフリップを定義します。

546
00:26:44,820 --> 00:26:47,120
しかし、基本的には、onClickの
関数は、その

547
00:26:47,120 --> 00:26:48,675
ユーザーがそれをクリックしたときに呼び出されます。

548
00:26:48,675 --> 00:26:52,330
>> だから、ボタンが知っているだろう
それがクリックされていたとき。

549
00:26:52,330 --> 00:26:54,750
それがクリックされています行ってきました、
それはカードを反転します。

550
00:26:54,750 --> 00:26:58,382
それはあなたのようなのようなものです
ピザの配達人。

551
00:26:58,382 --> 00:27:01,590
いつでも誰かがあなたは、すべての権利、似ています
右、私はピザをお届けします、私を呼び出しますか？

552
00:27:01,590 --> 00:27:03,420
>> あなたは、このリスナーを登録します。

553
00:27:03,420 --> 00:27:04,530
あなたがイベントに耳を傾けます。

554
00:27:04,530 --> 00:27:07,657
あなた呼び出される、とするとき
イベントは、あなたが何かをする、発生します。

555
00:27:07,657 --> 00:27:08,240
あなたはピザを取得します。

556
00:27:08,240 --> 00:27:11,480
この場合は、ときにしています
クリックすると、あなたはカードを反転。

557
00:27:11,480 --> 00:27:14,560
>> そして、私たちは定義する必要があります
カードを反転する関数、

558
00:27:14,560 --> 00:27:17,930
私たちはその権利を書きます
ここでは、機能を反転させます。

559
00:27:17,930 --> 00:27:20,850

560
00:27:20,850 --> 00:27:23,680
だから、あなたは、フリップは何をするかだと思いますか？

561
00:27:23,680 --> 00:27:27,180
これもまた、ときに呼び出されます
我々はフリップボタンをクリックします。

562
00:27:27,180 --> 00:27:29,406
機能フリップは何をすべきか？

563
00:27:29,406 --> 00:27:34,136
>> 聴衆：変更this.state.front
trueからfalse trueに、falseに。

564
00:27:34,136 --> 00:27:38,420
>> ネールMEHTA：うん、そう取るものは何でも
this.frontは、フロント状態がis--。

565
00:27:38,420 --> 00:27:40,930
場合、前面の状態を取ります
それは偽にする、本当です。

566
00:27:40,930 --> 00:27:42,530
それが偽なら、右、それは本当作りますか？

567
00:27:42,530 --> 00:27:45,330
それでは、これを試してみましょう。

568
00:27:45,330 --> 00:27:48,240
>> あなたは状態を変更することはできません
ただthis.stateを実行して。

569
00:27:48,240 --> 00:27:50,380
あなたはこれを行うことはできません。

570
00:27:50,380 --> 00:27:52,030
あなたはそれを行うことはできません。

571
00:27:52,030 --> 00:27:55,810
あなたは、関数を使用する必要があります
this.setStateと呼ばれます。

572
00:27:55,810 --> 00:28:03,230
>> だから、this.setStateフロントを言うことができます
コロンこの場合は、再び、感嘆

573
00:28:03,230 --> 00:28:04,330
ポイントは、反対のことを意味します。

574
00:28:04,330 --> 00:28:07,420
この場合、私は推測します。 state.front
trueの場合、それは偽の電源を入れます。

575
00:28:07,420 --> 00:28:09,170
だから我々は状態を設定します
trueからfalseに。

576
00:28:09,170 --> 00:28:11,430
それが偽なら、我々はよ
false trueに設定してください。

577
00:28:11,430 --> 00:28:17,210
>> ただ、私たちは少し設定および取得ことに注意してください
異なる、などのこれを試してみましょう。

578
00:28:17,210 --> 00:28:18,675
バダのビングは、これを見て。

579
00:28:18,675 --> 00:28:21,810
フリップボタンは意志
状態を前後に切り替えます。

580
00:28:21,810 --> 00:28:24,990
>> あなたが見る場所とそうここです
リアクトのマジックの少し。

581
00:28:24,990 --> 00:28:28,420
我々はそれを言ったことがないようにそれを再描画します。

582
00:28:28,420 --> 00:28:30,910
我々は、それが何かを再描画話したことはありません。

583
00:28:30,910 --> 00:28:32,630
あなたはこれをやっている場合
リアクトすることなく、あなたがしたいです

584
00:28:32,630 --> 00:28:34,588
ときに好きto--持っています
フリップボタンがクリックされると、

585
00:28:34,588 --> 00:28:37,290
あなたはそれを伝える必要があるだろう
手動で右、再レンダリング？

586
00:28:37,290 --> 00:28:43,050
>> 反応するあなたならば、その中には本当にクールです
それを特定の状態や特性を与えます、

587
00:28:43,050 --> 00:28:45,760
それは常にレンダリングされます
まったく同じこと。

588
00:28:45,760 --> 00:28:48,690
そして、私たちが今まで我々が変更されたとき
状態とプロパティ、

589
00:28:48,690 --> 00:28:50,819
ただ全体を再レンダリング反応します。

590
00:28:50,819 --> 00:28:52,860
それがありますことを知っています
1対1対応

591
00:28:52,860 --> 00:28:57,270
状態とパラメータとHTMLの間。

592
00:28:57,270 --> 00:29:00,110
だから、いつでもそれらのいずれかを
セット状態を経て変更、

593
00:29:00,110 --> 00:29:03,750
それがどのように変化します
賃金は、再レンダリングされます。

594
00:29:03,750 --> 00:29:06,650
だから基本的に似ているリアクト
あなたが変更するのを待ちます。

595
00:29:06,650 --> 00:29:09,870
>> たび、それが何かを変更し、
それは、ページ全体を再レンダリングします。

596
00:29:09,870 --> 00:29:12,480
そして、それは非効率的に聞こえる場合は、
それは次のようになりますので、それはです、

597
00:29:12,480 --> 00:29:15,050
しかし、反応は、ものを使用しています
シャドウDOMと呼ばれます。

598
00:29:15,050 --> 00:29:19,950
代わりに、直接ページを描画すること
メモリ内の仮想のHTMLツリーを保持します。

599
00:29:19,950 --> 00:29:23,620
>> あなたが知っている、HTMLは木のようなものです、
階層データ構造などがあります。

600
00:29:23,620 --> 00:29:28,990
これは、メモリ内の偽ツリーを保持
あなたがページを更新するたびに、

601
00:29:28,990 --> 00:29:31,940
それは別の偽のを描きます
木、それは計算します

602
00:29:31,940 --> 00:29:35,120
それは作るために必要なものを変更
二つのツリーを等しくするためのページです。

603
00:29:35,120 --> 00:29:38,540
したがって、基本的に、事実上、
多くは、再レンダリングされます。

604
00:29:38,540 --> 00:29:41,540
そして、それだけの変更のような
少しひねり内のページは、必要に応じて、

605
00:29:41,540 --> 00:29:44,240
それは非常に、非常に、非常に効率的です。

606
00:29:44,240 --> 00:29:46,970
>> したがって、基本的に反応します
あなたが何かを変更するたびに、

607
00:29:46,970 --> 00:29:49,010
それは事実上のページを再レンダリングします。

608
00:29:49,010 --> 00:29:52,830
それは私がしなければならないのかを把握します
実ページを反映させるように変更

609
00:29:52,830 --> 00:29:55,602
仮想ページは、それはそれを行うだろう。

610
00:29:55,602 --> 00:29:56,560
それは仮想DOMです。

611
00:29:56,560 --> 00:29:59,350
これは最大の一つです
機能が反応します。

612
00:29:59,350 --> 00:30:00,880
>> それは理にかなっていますか？

613
00:30:00,880 --> 00:30:01,540
質問は？

614
00:30:01,540 --> 00:30:02,040
うん？

615
00:30:02,040 --> 00:30:05,568

616
00:30:05,568 --> 00:30:08,969
>> 聴衆：どのように
MVCにまだ比較

617
00:30:08,969 --> 00:30:10,760
我々は話をしたことについて
などのリソースの前に。

618
00:30:10,760 --> 00:30:13,527
>> ネールMEHTA：ええ、質問
それは、MVCと比べてどのようにでしょうか？

619
00:30:13,527 --> 00:30:14,610
あなたは、リソースについて尋ねました。

620
00:30:14,610 --> 00:30:16,445
さて、それが機能する方法について話しましょう​​。

621
00:30:16,445 --> 00:30:18,190
>> MVCでは、モデルを更新したいです。

622
00:30:18,190 --> 00:30:20,560
このケースでは、カードのモデルを持っていると思います。

623
00:30:20,560 --> 00:30:24,540
ビューには、持っているだろう
フリップボタン、および制御

624
00:30:24,540 --> 00:30:26,310
フリップ機能を持っているでしょう。

625
00:30:26,310 --> 00:30:28,450
だから、ビューは言うだろう
コントローラは、フリップを反転します。

626
00:30:28,450 --> 00:30:30,370
フリップは言うだろう
変更するためのモデル、右か？

627
00:30:30,370 --> 00:30:33,915
>> だからあなたは、MVCを行う、あなた
モデルが変更するために耳を傾け、

628
00:30:33,915 --> 00:30:37,150
そしてそれに応じてビューをレンダリングし直します。

629
00:30:37,150 --> 00:30:39,210
それとも、ただ好きに持っています
コントローラを持っています。

630
00:30:39,210 --> 00:30:42,418
その後、モデルが変更するのを待って、
もののようなの一部を選択し、選択

631
00:30:42,418 --> 00:30:44,032
変える。

632
00:30:44,032 --> 00:30:45,740
ここでは、一つのことを持っています、
しかし、大きなアプリで、

633
00:30:45,740 --> 00:30:48,510
あなたは何を覚えて好きに持っています
ひとつひとつの場所の変更、

634
00:30:48,510 --> 00:30:50,290
それは少し迷惑なんです。

635
00:30:50,290 --> 00:30:53,670
それでいいですリアクト
それは影ドムを持っているので。

636
00:30:53,670 --> 00:30:56,040
それはちょうどに余裕があります
全体のことを書き換えます。

637
00:30:56,040 --> 00:30:58,680
あなたが選択する必要はありません
以下のように更新するかを推測。

638
00:30:58,680 --> 00:31:02,186
>> Facebook上であなたが好きなら
MVCで、新しいメッセージを取得するには、

639
00:31:02,186 --> 00:31:04,060
あなたは覚えておく必要があるだろう、
OK、物事を変更

640
00:31:04,060 --> 00:31:06,260
の上部に
ページ、メッセージアイコン。

641
00:31:06,260 --> 00:31:08,290
また、一番下に新しいウィンドウを開きます。

642
00:31:08,290 --> 00:31:10,070
また、そのウィンドウで新しいものを作ります。

643
00:31:10,070 --> 00:31:11,060
また、サウンドを再生します。

644
00:31:11,060 --> 00:31:13,150
>> それは多くのものです
同時に外出。

645
00:31:13,150 --> 00:31:15,320
だから、あなたがいない場合
シャドウドム​​を持って、あなたがしたいです

646
00:31:15,320 --> 00:31:18,740
手動で行う必要があるため
あなたはページ全体を取り除くことはできません。

647
00:31:18,740 --> 00:31:21,430
あなたが持っているので、あなたは、に余裕がありません
手動で各事を変更するには、

648
00:31:21,430 --> 00:31:23,990
これはMVCで本当に迷惑です。

649
00:31:23,990 --> 00:31:27,640
>> そうであるために
倹約、それらを選択

650
00:31:27,640 --> 00:31:30,750
あるページを更新
効率的なだけでなく、迷惑な。

651
00:31:30,750 --> 00:31:34,002
なぜなら影の、反応させて
ドム、あなたは自由のための両方のものを得ます。

652
00:31:34,002 --> 00:31:35,710
それは効率的ですので、
影ドムの。

653
00:31:35,710 --> 00:31:37,210
ボトルネックは、ページを更新しています。

654
00:31:37,210 --> 00:31:40,292
これは、ツリー操作を行っていません。

655
00:31:40,292 --> 00:31:41,250
あなたは、効率を得ます。

656
00:31:41,250 --> 00:31:45,420
また、使いやすさの理由を取得します
あなただけのページ全体を書き換える場合、

657
00:31:45,420 --> 00:31:48,970
しかし、あなたはちょうど、すべての権利、物事を知っています
ページのどこかにあることを行っています。

658
00:31:48,970 --> 00:31:51,180
それは別の場所にあるかもしれませんが、
それは右、ページ上にあるように起こっているのですか？

659
00:31:51,180 --> 00:31:52,860
だから、あなただけの再レンダリング
事実上、全体のこと、

660
00:31:52,860 --> 00:31:55,540
あなたがカップルになるかもしれません
ページ自体への変更。

661
00:31:55,540 --> 00:31:57,850
>> だから、もう一度、MVCあなたの中に
選択する必要があります

662
00:31:57,850 --> 00:32:01,840
利用と効率の容易さとの間に、
あなたは両方を取得し、反応します。

663
00:32:01,840 --> 00:32:04,020
だから、良いです。

664
00:32:04,020 --> 00:32:05,220
理にかなって？

665
00:32:05,220 --> 00:32:06,676
固体。

666
00:32:06,676 --> 00:32:12,080
>> OK、それでは、の話をしましょう​​見てみましょう
ステップ4について少し、

667
00:32:12,080 --> 00:32:14,740
どのように我々は部品を埋め込むことができます。

668
00:32:14,740 --> 00:32:16,260
だから我々は今、この権利を持っています。

669
00:32:16,260 --> 00:32:19,420
私たちはクールな小さなボタンがあります。

670
00:32:19,420 --> 00:32:23,157
我々はそれをバック反転することができますし、
など、それはそれがないすべてです。

671
00:32:23,157 --> 00:32:24,990
我々はしたいとしましょう
別のコンポーネントを持っています。

672
00:32:24,990 --> 00:32:28,730
私たちのフラッシュカードアプリがすべきとしましょう
すべてのカードのリストが含まれています

673
00:32:28,730 --> 00:32:31,520
あなたが持っているので、それは我々のことを言います
別のコンポーネントを持っている必要があります。

674
00:32:31,520 --> 00:32:32,970
まあ、リストビューを呼び出します。

675
00:32:32,970 --> 00:32:36,200
のは、そのリストのビューを作ってみましょう
CardViewと共存、

676
00:32:36,200 --> 00:32:39,680
このリストビューとCardView
一緒に仕事を好きになるでしょう。

677
00:32:39,680 --> 00:32:43,190
そして、あなたはそれらを組み合わせることができます
あなたのために我々のアプリを作ります。

678
00:32:43,190 --> 00:32:45,160
>> そこでまずは、作ってみましょう
カップルより多くのカードを右。

679
00:32:45,160 --> 00:32:46,370
それでは、言ってみましょう、何のカード？

680
00:32:46,370 --> 00:32:49,619

681
00:32:49,619 --> 00:32:51,910
そして、ちょうどので、私はする必要はありません
、それを入力すると、あなたを産ん

682
00:32:51,910 --> 00:32:53,410
私はここからそれをコピーするつもりです。

683
00:32:53,410 --> 00:33:01,664

684
00:33:01,664 --> 00:33:03,580
そして、私はないつもりです
それをただ一枚のカードを与えます。

685
00:33:03,580 --> 00:33:06,910
私はそれをカードの配列を与えるつもりです。

686
00:33:06,910 --> 00:33:10,240
したがって、最初のアプリ
今のところ破るつもり。

687
00:33:10,240 --> 00:33:14,717
すべての権利、私たちはするつもりです
このことが、複数のカードを処理します。

688
00:33:14,717 --> 00:33:17,800
したがって、最初に、我々は、それを与えないつもりです
ただ一枚のカードが、カードの配列、

689
00:33:17,800 --> 00:33:18,700
カードのリストのように。

690
00:33:18,700 --> 00:33:20,980
この場合、我々はそれらの3つ持っています。

691
00:33:20,980 --> 00:33:27,280
>> すべての権利、アプリがあるので、そう
リストカードを取得するつもり、

692
00:33:27,280 --> 00:33:29,870
それは決定するために起こっています
CardViewに表示する1。

693
00:33:29,870 --> 00:33:33,740
CardViewができる唯一の
一枚のカードが、アプリをレンダリング

694
00:33:33,740 --> 00:33:37,610
右、すべてのカードのリストを取得しますか？

695
00:33:37,610 --> 00:33:40,820
>> だから、1つを把握するとき
CardViewに与えるためにカード、

696
00:33:40,820 --> 00:33:44,660
あなたができる可能性があります推測する方法
どのカードについての決定を行います

697
00:33:44,660 --> 00:33:47,064
表示するには？

698
00:33:47,064 --> 00:33:49,980
あなたにヒントを与えるために、それは一時的です
あなたは、特定のカードを表示することがあります。

699
00:33:49,980 --> 00:33:53,260
ページを更新する場合は、よ
ちょうど最初のカードに戻ります。

700
00:33:53,260 --> 00:33:55,464
それは一時的だからそれは大丈夫です。

701
00:33:55,464 --> 00:33:56,630
私たちはどのような手法がありますか？

702
00:33:56,630 --> 00:34:02,534

703
00:34:02,534 --> 00:34:08,760
>> 観客は：あなたは、変数を作ることができます
あなたは、フロントを持っていただけのよう。

704
00:34:08,760 --> 00:34:11,989
これはあなたが、真の可能性があります
現在のカードが1に等しいですか？

705
00:34:11,989 --> 00:34:14,150
>> ネールMEHTA：ええ、私たち
右、状態を持つようにしたいですか？

706
00:34:14,150 --> 00:34:16,080
あなたは、状態を使用します
把握するコンポーネント

707
00:34:16,080 --> 00:34:17,288
どのカードは、我々が取得したいです。

708
00:34:17,288 --> 00:34:19,290
私たちは、リストを持っているように
すべてのカード、我々はよ

709
00:34:19,290 --> 00:34:21,630
把握するために状態を使用します
最初のカードの一つ、

710
00:34:21,630 --> 00:34:23,710
ように2枚目のカード、3枚目のカード、および。

711
00:34:23,710 --> 00:34:28,760
>> だから、このアプリはとてもアプリが取得されます
、getInitialState機能を持っています

712
00:34:28,760 --> 00:34:35,020
getInitialState関数の戻り。

713
00:34:35,020 --> 00:34:39,929
そして、私たちはただactiveIndex 0を言いますよ。

714
00:34:39,929 --> 00:34:42,889
だから今我々のアプリは、それ自身の状態を持っています。

715
00:34:42,889 --> 00:34:47,179
>> そして今に把握するために、レンダリング
カードは、ちょうど配列に行ってみよう

716
00:34:47,179 --> 00:34:49,969
そして、そのインデックスのものをつかみます。

717
00:34:49,969 --> 00:34:53,580
カード等しくthis.props.cardsを選択
this.state.activeIndex。

718
00:34:53,580 --> 00:34:56,469

719
00:34:56,469 --> 00:35:00,162
ここで見るように、小道具や
状態は実際に一緒に働きます。

720
00:35:00,162 --> 00:35:08,990
だから今我々はactiveCardを持っていること、
私たちは、それをactiveCard呼ぶことにします

721
00:35:08,990 --> 00:35:10,470
これが動作するかどうかを見てみましょう。

722
00:35:10,470 --> 00:35:20,320

723
00:35:20,320 --> 00:35:20,820
[聞こえません]

724
00:35:20,820 --> 00:35:41,504

725
00:35:41,504 --> 00:35:44,900
>> ああ、それはテキストエラーでした。

726
00:35:44,900 --> 00:35:45,400
ああ。

727
00:35:45,400 --> 00:35:51,420

728
00:35:51,420 --> 00:35:54,840
>> クール、うん、今、私たちは戻りました
我々の前にいたところ、右に？

729
00:35:54,840 --> 00:35:57,100
同じ古いプログラムを除きます
今、私たちはサポートすることができます

730
00:35:57,100 --> 00:35:59,390
カードのリストだけではなく、一枚のカード。

731
00:35:59,390 --> 00:36:04,130
そして今、再び、我々は変更する場合
activeIndexは、我々は、0から1に行くことができます

732
00:36:04,130 --> 00:36:07,330
そして今、第2のカード、
し、我々は0に行ってきました。

733
00:36:07,330 --> 00:36:10,390
だからここに新しいです
高性能になった私たちのバージョンを。

734
00:36:10,390 --> 00:36:16,000
>> [OK]を、ので、今のは、リストビューを持たせること
プログラム内のすべてのカードを示し、

735
00:36:16,000 --> 00:36:19,980
私たちは新しい作ってあげます
リストビューと呼ばれるコンポーネント。

736
00:36:19,980 --> 00:36:22,155
リストビューがreact.createClassに等しいしてみましょう。

737
00:36:22,155 --> 00:36:32,890

738
00:36:32,890 --> 00:36:38,800
だから我々は、順序なしをレンダリングしたいです
すべてのカードのリスト項目をリストします。

739
00:36:38,800 --> 00:36:41,490
そして、私たちはカードの束を持っています。

740
00:36:41,490 --> 00:36:44,990
私たちは、1つのリスト項目をしたいです
すべてのカードのために、右？

741
00:36:44,990 --> 00:36:47,490
私たちは、forループを行うことができますか
新しいリストアイテムを作成するもの。

742
00:36:47,490 --> 00:36:50,522
しかし、あなたはそれを行う方法を
反応し、マップと呼ばれるものを使用します。

743
00:36:50,522 --> 00:36:57,150
マップツールか、使用機能です
それは、すべての項目について、いくつかの関数を実行し、

744
00:36:57,150 --> 00:36:59,510
戻り値をとり、かつ
あなたにそのバックを提供します。

745
00:36:59,510 --> 00:37:06,310
>> 例として、我々は配列を持っているので、
1、2、3.mapのfunction--とこの

746
00:37:06,310 --> 00:37:12,120
略記されます
function-- X矢印のx倍のx。

747
00:37:12,120 --> 00:37:16,110
これは、すべての番号を言います
1、2、3で、それを取ります。

748
00:37:16,110 --> 00:37:17,800
それを二乗し、それを返します。

749
00:37:17,800 --> 00:37:22,090
だから、1をどう思いますか、
2、3.map xはx倍に行きます

750
00:37:22,090 --> 00:37:25,480
Xあなたが与えられたバックできます
この関数であることを

751
00:37:25,480 --> 00:37:27,680
その配列の各要素で実行されます。

752
00:37:27,680 --> 00:37:30,837

753
00:37:30,837 --> 00:37:32,190
>> 対象：1、4~9？

754
00:37:32,190 --> 00:37:35,709
>> ネールMEHTA：うん、1、4、9
あなたは1回1を実行しているため。

755
00:37:35,709 --> 00:37:36,500
それはあなたに1を与えます。

756
00:37:36,500 --> 00:37:37,690
それは最初の要素です。

757
00:37:37,690 --> 00:37:38,530
>> 2回2は4です。

758
00:37:38,530 --> 00:37:39,570
すなわち、第2の要素です。

759
00:37:39,570 --> 00:37:40,310
3回3は9です。

760
00:37:40,310 --> 00:37:41,540
それは第三の要素です。

761
00:37:41,540 --> 00:37:42,640
理にかなって？

762
00:37:42,640 --> 00:37:45,015
だから、マップは技術を持っています
関数プログラミングで使用し、

763
00:37:45,015 --> 00:37:48,090
の新しいスタイル
何かをするためのプログラミング

764
00:37:48,090 --> 00:37:50,500
リスト内のすべての要素に。

765
00:37:50,500 --> 00:37:51,970
そして、これは聞き覚え。

766
00:37:51,970 --> 00:37:53,370
私たちは、カードのリストを表示しています。

767
00:37:53,370 --> 00:37:56,860
私たちはすべてのためのリスト項目を取得したいです
1、私たちはちょうどここにマップを使用します。

768
00:37:56,860 --> 00:38:00,250
私たちは、リストに等しいせ、言いますよ
this.props、カード、地図。

769
00:38:00,250 --> 00:38:10,580

770
00:38:10,580 --> 00:38:15,070
>> そして、私たちがしている、カードを与えられました
リスト項目を生成するつもり

771
00:38:15,070 --> 00:38:17,580
それのそのカードの内容側と。

772
00:38:17,580 --> 00:38:20,660
ちょうど私たちが提供したいとしましょう
カードはそうcard.questionを疑問視。

773
00:38:20,660 --> 00:38:24,990

774
00:38:24,990 --> 00:38:30,649
したがって、このリストには含まれてい
LIのか、リスト項目の配列

775
00:38:30,649 --> 00:38:32,440
ここで、1つのリストがあります
すべてのカードのためのアイテム、

776
00:38:32,440 --> 00:38:35,150
それはカードの質問が含まれています。

777
00:38:35,150 --> 00:38:37,640
理にかなって？

778
00:38:37,640 --> 00:38:39,450
>> クール、今してみましょう
実際にそれをプリントアウト。

779
00:38:39,450 --> 00:38:46,521
だから我々は、ULが返されます。

780
00:38:46,521 --> 00:38:49,020
その順不同リストの内側には、
私たちは、リスト全体を貼り付けます

781
00:38:49,020 --> 00:38:49,890
彼らは私たちを与えました。

782
00:38:49,890 --> 00:38:52,851

783
00:38:52,851 --> 00:38:53,350
クール。

784
00:38:53,350 --> 00:38:56,060
>> すべての権利なので、今、この
リストビューは、ちょうど見つけるに動作します。

785
00:38:56,060 --> 00:38:59,842
リストビューについてのご質問？

786
00:38:59,842 --> 00:39:01,270
あなたはカードの束を持っています。

787
00:39:01,270 --> 00:39:02,800
あなたはすべてのカードのリスト項目を作ります。

788
00:39:02,800 --> 00:39:05,466
そして、あなたは順不同の内側にそれらを置きます
リストには、あなたはそれを返します。

789
00:39:05,466 --> 00:39:09,410
だから今、私たちは埋め込むのは非常に行動しましょう
我々のアプリのこの内側、

790
00:39:09,410 --> 00:39:14,310
私たちは、リストビューをこれを行うことができます。

791
00:39:14,310 --> 00:39:17,070
我々は、ビューのリストを表示するには何の引数渡しますか？

792
00:39:17,070 --> 00:39:18,320
我々はそれをどのような特性を与えますか？

793
00:39:18,320 --> 00:39:25,111

794
00:39:25,111 --> 00:39:26,860
あなたが与える場合には、覚えておいてください
そのカードの束、

795
00:39:26,860 --> 00:39:29,590
それがリストを作ってあげます
それらのカードのために表示します。

796
00:39:29,590 --> 00:39:32,267
だから我々は何を渡します
ここの引数として？

797
00:39:32,267 --> 00:39:33,350
聴衆：カードのリスト？

798
00:39:33,350 --> 00:39:37,130
ネールMEHTA：うん、そうカード
右、this.props.cardsに等しいですか？

799
00:39:37,130 --> 00:39:39,850

800
00:39:39,850 --> 00:39:44,370
そして、これだけの問題
あなたが唯一できることです

801
00:39:44,370 --> 00:39:48,600
、レンダリングに1つのトップレベルの要素になって
あなたはdivの中でそれを包むようになってきました。

802
00:39:48,600 --> 00:39:49,100
それは奇妙だ。

803
00:39:49,100 --> 00:39:56,190

804
00:39:56,190 --> 00:39:57,530
だからどうかを見てみましょう。

805
00:39:57,530 --> 00:40:09,790

806
00:40:09,790 --> 00:40:10,560
それは動作しますか？

807
00:40:10,560 --> 00:40:29,774

808
00:40:29,774 --> 00:40:31,030
>> うん、そこに行きます。

809
00:40:31,030 --> 00:40:33,700
だから今、私たちはリストを持っています
一番下のカードの、

810
00:40:33,700 --> 00:40:36,180
し、我々は我々のを持っています
上に自分自身をCardView、

811
00:40:36,180 --> 00:40:40,486
それは間に反転します
カードの両側。

812
00:40:40,486 --> 00:40:42,610
今、私はそれをした方法を意味しているしているのでしょうか？

813
00:40:42,610 --> 00:40:45,165

814
00:40:45,165 --> 00:40:46,790
ええ、そう、再び、我々は2つ​​のコンポーネントがあります。

815
00:40:46,790 --> 00:40:49,666
最初のコンポーネントを印刷
うち、リスト内のすべてのカード。

816
00:40:49,666 --> 00:40:50,540
つまり、リストビューです。

817
00:40:50,540 --> 00:40:54,770
そして、第二成分
ちょうどそのカードをプリントアウトします。

818
00:40:54,770 --> 00:40:58,840
あなたはそれを特定のカードを与えると、それはよ
そのカードについての情報を印刷

819
00:40:58,840 --> 00:41:01,870
あなたが前後に反転させます。

820
00:41:01,870 --> 00:41:05,850
>> 私たちが望むのであれば、我々は試してみて、話すことができます
これにいくつかの新機能を追加する方法について。

821
00:41:05,850 --> 00:41:09,482
それ以外の場合は、もう少し話をすることができます
原子炉の速度について、

822
00:41:09,482 --> 00:41:11,190
または私達は答えることができます
あなたが持つかもしれない質問

823
00:41:11,190 --> 00:41:15,050
これらは、コア部品のすべてであるため、
私が話をしたいと反応します。

824
00:41:15,050 --> 00:41:16,540
我々は先に行くことができます。

825
00:41:16,540 --> 00:41:17,590
我々は、質問に答えることができます。

826
00:41:17,590 --> 00:41:18,560
あなたが望むものなら、なんでも。

827
00:41:18,560 --> 00:41:21,694

828
00:41:21,694 --> 00:41:24,205
>> 聴衆：あなたが使用することができます
通常のJavaScriptでJSX？

829
00:41:24,205 --> 00:41:27,150
か、その何かがあること
[聞こえない]に来ましたの？

830
00:41:27,150 --> 00:41:30,760
>> ネールMEHTA：質問ができることです
あなたは、通常のJavaScriptでJSXを使うのか？

831
00:41:30,760 --> 00:41:32,620
答えはイエスです。

832
00:41:32,620 --> 00:41:41,070
JSXはちょうどそれの方法は、あなたを取るされています
その中にHTMLを持っているのJavaScript、

833
00:41:41,070 --> 00:41:44,215
それには、JavaScriptにコンパイルされています
その中にHTMLを持っていません。

834
00:41:44,215 --> 00:41:47,880
だからので、ここで気づくthat--気づきます。

835
00:41:47,880 --> 00:41:50,820
あなたはdiv要素のように持っているようにこれが見えます
あなたはその中のものを持っています。

836
00:41:50,820 --> 00:41:54,970
>> それはJavaScriptにコンパイルされること
以下のような同じことを生成します。

837
00:41:54,970 --> 00:41:59,590
私は私が言っていることということだと思います
それはだようJSXは、単に構文的です

838
00:41:59,590 --> 00:42:03,530
JavaScriptのためのプリプロセッサずっと
PHPのようなHTMLのためのプリプロセッサです。

839
00:42:03,530 --> 00:42:05,490
JSCはプリプロセッサです
ことができますJavaScriptのための

840
00:42:05,490 --> 00:42:12,970
あなたはJavaScriptの内側にHTMLを置きます。

841
00:42:12,970 --> 00:42:16,425
だから、あなたは右の変圧器を持っている場合
これは[聞こえない]と呼ばれるものです、

842
00:42:16,425 --> 00:42:17,300
これは変換します。

843
00:42:17,300 --> 00:42:19,360
右プリプロセッサ、
それはあなたがそれを行うもらおう。

844
00:42:19,360 --> 00:42:20,235
>> 聴衆：[聞こえません]

845
00:42:20,235 --> 00:42:23,026
ネールMEHTA：通常は必要ありません
JavaScriptを内側にHTMLを置くために

846
00:42:23,026 --> 00:42:24,110
あなたのやっていない限り反応します。

847
00:42:24,110 --> 00:42:27,146
しかし、あなたはとにかくそれを行うことができます。

848
00:42:27,146 --> 00:42:27,645
うん？

849
00:42:27,645 --> 00:42:29,353
>> 聴衆：私はあなたを思います
リアクト説明していました

850
00:42:29,353 --> 00:42:31,970
機能的なプログラミング言語として。

851
00:42:31,970 --> 00:42:35,646
我々は、CS50にCを学んできました。

852
00:42:35,646 --> 00:42:38,032
Cも関数型言語ですか？

853
00:42:38,032 --> 00:42:39,990
ネールMEHTA：だから質問
機能についてです

854
00:42:39,990 --> 00:42:43,010
呼ばれる別のもの対
命令型あるいは手続き型プログラミング。

855
00:42:43,010 --> 00:42:44,820
人気番組の2種類があります。

856
00:42:44,820 --> 00:42:48,550
一つは、手続き型と呼ばれていました
すべてのコマンドを実行するような程度で、

857
00:42:48,550 --> 00:42:51,510
一つは、すべてである、機能的です
機能を有すると持っていることについて

858
00:42:51,510 --> 00:42:52,930
それらの入力と出力。

859
00:42:52,930 --> 00:42:55,930
機能的パラダイムである反応します。

860
00:42:55,930 --> 00:42:58,010
Cは非常に手続きパラダイムです。

861
00:42:58,010 --> 00:43:02,360
>> 一例として、例えばC、
あなたはこの宣言的な方法をしません

862
00:43:02,360 --> 00:43:04,390
プログラムを作る、右？

863
00:43:04,390 --> 00:43:06,826
あなたが言っている、これを印刷します。

864
00:43:06,826 --> 00:43:07,950
このデータ構造を変更します。

865
00:43:07,950 --> 00:43:08,530
これを印刷します。

866
00:43:08,530 --> 00:43:10,160
これは、すべてのコマンドについてです。

867
00:43:10,160 --> 00:43:12,640
>> リアクトで、そこではありません
その多くのコマンド。

868
00:43:12,640 --> 00:43:15,145
これは、すべてのことについてです
コンポーネントは、あなたが一緒に入れ。

869
00:43:15,145 --> 00:43:16,300
彼らは機能に似ています。

870
00:43:16,300 --> 00:43:26,360
あなたは、関数のように持っています
CardViewと呼ばれます、

871
00:43:26,360 --> 00:43:28,680
どの機能であります
すなわち、入力、出力を有します

872
00:43:28,680 --> 00:43:30,660
ので、すべてで反応させ、
この理念について

873
00:43:30,660 --> 00:43:32,700
あなたはデータを持っているhaving--の私たち。

874
00:43:32,700 --> 00:43:34,910
あなたはこのを介して渡します
アルゴリズム、およびそれよ

875
00:43:34,910 --> 00:43:36,800
出力HTMLます
単にページを印刷し、

876
00:43:36,800 --> 00:43:39,180
ので、あなたがする必要はあり
それを少しずつを作成します。

877
00:43:39,180 --> 00:43:42,800
>> だから何に比喩を描画します
私が前に言った、あなたが方法を知っています

878
00:43:42,800 --> 00:43:47,050
Facebookのメッセージを取得する場合、
あなたが部品を更新するために何を選択しますか、

879
00:43:47,050 --> 00:43:47,882
それは、手続きです。

880
00:43:47,882 --> 00:43:48,840
それは右、不可欠ですか？

881
00:43:48,840 --> 00:43:49,806
[OK]を、私はメッセージが表示されました。

882
00:43:49,806 --> 00:43:50,930
のがアカウントを変更してみましょう。

883
00:43:50,930 --> 00:43:52,110
>> それでは、ここでウィンドウをポップアップしてみましょう。

884
00:43:52,110 --> 00:43:52,780
のがアカウントを変更してみましょう。

885
00:43:52,780 --> 00:43:53,700
それでは、ここではこれを描きましょう。

886
00:43:53,700 --> 00:43:55,220
それは手続き的なアプローチです。

887
00:43:55,220 --> 00:44:00,240
>> それは角のような何の事です、
ブースト、バックボーン、他のフレームワークを使用しています。

888
00:44:00,240 --> 00:44:01,200
機能的である反応します。

889
00:44:01,200 --> 00:44:03,324
それは非常に異なる方法です
物事を考えるの。

890
00:44:03,324 --> 00:44:07,950
それはのは、持ってみましょうのこのアイデアを取ります
機能や必要になりますアルゴリズム

891
00:44:07,950 --> 00:44:08,800
それにデータを与えます。

892
00:44:08,800 --> 00:44:11,820
それは何、それを吐き出しますよ
コンピュータであり、そしてべきで

893
00:44:11,820 --> 00:44:13,490
秤量の世話をします。

894
00:44:13,490 --> 00:44:15,890
あなたはそれを自分で処理しません。

895
00:44:15,890 --> 00:44:18,470
それは意味の少しを作るでしょうか？

896
00:44:18,470 --> 00:44:18,970
うん？

897
00:44:18,970 --> 00:44:24,180
>> 聴衆：関数型言語では、
すべてが一度になりますか？

898
00:44:24,180 --> 00:44:26,800
>> ネールMEHTA：いいえ、物事がために起こります。

899
00:44:26,800 --> 00:44:29,320
ここのようにまだあります
注文ですが、それはできません

900
00:44:29,320 --> 00:44:32,390
以下のようなのために起こります
、コマンド、コマンドを称賛。

901
00:44:32,390 --> 00:44:36,459
それはのために起こります
この関数は、あなたの出力が得られます。

902
00:44:36,459 --> 00:44:37,750
別の関数にそれを置きます。

903
00:44:37,750 --> 00:44:39,550
別のものにそれを入れて
機能、他の機能。

904
00:44:39,550 --> 00:44:41,470
>> あなたはCS51を行う場合は、よ
機能的なプログラムを学びます

905
00:44:41,470 --> 00:44:42,886
この範囲外の少し。

906
00:44:42,886 --> 00:44:45,090
しかし、基本的に、何が
反応クールなだけではありません

907
00:44:45,090 --> 00:44:46,840
一方向のデータフロー
仮想ドム、

908
00:44:46,840 --> 00:44:48,700
しかしのもこのアイデア
関数型プログラミング。

909
00:44:48,700 --> 00:44:51,720
そして、関数型プログラミングは非常に簡単です
構成し、外のクールなものを作るために、

910
00:44:51,720 --> 00:44:53,844
それは考えることは非常に簡単です
約約理由。

911
00:44:53,844 --> 00:44:55,450
だから、リアクトの別の良いドローです。

912
00:44:55,450 --> 00:44:58,489

913
00:44:58,489 --> 00:44:59,280
これ以上の質問？

914
00:44:59,280 --> 00:45:02,650

915
00:45:02,650 --> 00:45:03,150
うん？

916
00:45:03,150 --> 00:45:06,840
>> 聴衆：ええと、なぜだろう
VARとは対照的にさせて使用しますか？

917
00:45:06,840 --> 00:45:10,450
>> ネールMEHTA：だから質問です
なぜあなたの代わりにVARの聞かせ使用するのですか？

918
00:45:10,450 --> 00:45:13,220
これはというものです
ES6やECMAScriptの6。

919
00:45:13,220 --> 00:45:15,820
それには、JavaScriptの新バージョンです。

920
00:45:15,820 --> 00:45:19,050
技術的な理由の束があります、
しかし、letがVARの改良版です​​。

921
00:45:19,050 --> 00:45:20,724
>> それはあなたが変数を宣言方法です。

922
00:45:20,724 --> 00:45:21,390
あなたが聞かせ使用することができます。

923
00:45:21,390 --> 00:45:22,140
あなたはVARを使用することができます。

924
00:45:22,140 --> 00:45:23,825
レッツは、技術の束を持っています
あなたがそれらを見ることができますreasons--

925
00:45:23,825 --> 00:45:25,610
それはましだ理由についてlater--アップ。

926
00:45:25,610 --> 00:45:28,780
基本的に、ES6はいくつかの素晴らしいを持っています
新しい構文、いくつかの新機能

927
00:45:28,780 --> 00:45:30,720
古いのJavaScriptの上に。

928
00:45:30,720 --> 00:45:32,782
>> だから我々は5分のように持っています。

929
00:45:32,782 --> 00:45:34,990
私はちょうど約話をしたいです
もう一つの実速いです。

930
00:45:34,990 --> 00:45:36,450
ご質問があれば、
それでは、この後にそれについて話しましょう​​。

931
00:45:36,450 --> 00:45:38,366
しかし、単にこれは取得します
私は、カメラに引っ掛かっ

932
00:45:38,366 --> 00:45:41,550
どのようにあなたについて少しお話したいと思います
実際にアプリ内で反応を使用します。

933
00:45:41,550 --> 00:45:47,220

934
00:45:47,220 --> 00:45:58,640
>> あなたはここに行く場合は、
Facebook.GitHub.IO/react、

935
00:45:58,640 --> 00:46:03,320
これが反応のホーム・ページで、
それはあなたが実際に使用する方法を紹介

936
00:46:03,320 --> 00:46:05,320
あなたのページに反応します。

937
00:46:05,320 --> 00:46:08,845
基本的に、それは少しです
複雑なリアクトインストールしようとしています。

938
00:46:08,845 --> 00:46:12,300
それはあなただけのドラッグと同じくらい簡単ではありません
そしてそこにはJavaScriptをドロップします。

939
00:46:12,300 --> 00:46:15,890
>> あなたの変圧器を持っている必要があります
それは前に行ったように、なる、セットアップ、

940
00:46:15,890 --> 00:46:18,120
あなたのJSXを回します
通常のJavaScriptの。

941
00:46:18,120 --> 00:46:21,030
あなたはそのよ事に持っています
あなたが正常にES6コンパイル。

942
00:46:21,030 --> 00:46:24,720
JavaScriptの移動の多くがあります
部品あなたがしなければならないので、事があります

943
00:46:24,720 --> 00:46:27,200
ヨーマン、Yeoman.ioと呼ばれます。

944
00:46:27,200 --> 00:46:31,110
そして、これはコマンドラインツール'LLです
あなたが反応アウト足場を助けます

945
00:46:31,110 --> 00:46:32,380
簡単なプロジェクト。

946
00:46:32,380 --> 00:46:38,660
>> だから、このことについて読むことができます
後で、いくつかのツールがあります

947
00:46:38,660 --> 00:46:40,160
ヨーマンが提供しています。

948
00:46:40,160 --> 00:46:43,280
彼らはあなたが反応を作成してみましょうよ
に建てられたすべてとアプリ。

949
00:46:43,280 --> 00:46:46,030
それが組み込まれていますよう
コンポーネント、中に建てられました。

950
00:46:46,030 --> 00:46:47,880
それはあなたの変圧器が組み込まれています。

951
00:46:47,880 --> 00:46:50,699
彼らはクールなのがたくさんあり​​ます
自動的に建てられたもの

952
00:46:50,699 --> 00:46:52,240
発電機と呼ばれるこれらの事を使用します。

953
00:46:52,240 --> 00:46:54,620
>> あなたが好きなのであれば、これについてお読みください。

954
00:46:54,620 --> 00:46:59,110
ただ、ヨーマン、Y-E-O-M-A-Nに行くと、
あなたは、このような発電機を見つけることができます。

955
00:46:59,110 --> 00:47:01,263
などの発電機と
これらの、あなただけのような

956
00:47:01,263 --> 00:47:03,010
カップルのコマンドライン・コマンドです。

957
00:47:03,010 --> 00:47:05,530
これはアウト足場よ
全体はあなたのためのアプリを反応します。

958
00:47:05,530 --> 00:47:10,470
これは、すべてのマニュアルの配管を得るでしょう、
そして、うなり声の仕事はあなたのために行われ、

959
00:47:10,470 --> 00:47:13,010
これはあなただけ集中する理由です
ただで書くことに反応します。

960
00:47:13,010 --> 00:47:16,739
>> したがって、基本的に構築
アプリは非自明である反応します。

961
00:47:16,739 --> 00:47:19,530
それはそこにすべて一緒に配線が、です
あなたのためにそれをやるのツールがあります。

962
00:47:19,530 --> 00:47:23,070
だからが反応したい場合
アプリは、そのようにやってみてください。

963
00:47:23,070 --> 00:47:26,360
あなただけ試してみたい場合は、
あなたはこのCodePenを使用して試すことができます

964
00:47:26,360 --> 00:47:28,550
このCodePenは持っているので、
すべての配線を反応させます。

965
00:47:28,550 --> 00:47:30,240
私はすでにあなたのためにすべての作業を行ってきました。

966
00:47:30,240 --> 00:47:34,610
>> あなたのようにしたいのであれば
アプリを反応させ、解放するために生産、

967
00:47:34,610 --> 00:47:37,220
これらの発電機のいずれかを試してみてください。

968
00:47:37,220 --> 00:47:40,240
あなただけ再生したい場合は
周りには、多くの場合だけで価値があります

969
00:47:40,240 --> 00:47:44,490
以下のような、ここでCodePenに遊んでみてください。

970
00:47:44,490 --> 00:47:45,470
いいね？

971
00:47:45,470 --> 00:47:45,970
クール。

972
00:47:45,970 --> 00:47:47,890
>> だから、私が持っているすべてです。

973
00:47:47,890 --> 00:47:52,470
ここでも、すべてのコードと例があります
ここで、このウェブサイト上になるだろう。

974
00:47:52,470 --> 00:47:55,509
だから、もう一度、我々は話をしませんでした
約リアクトの多くの構文、

975
00:47:55,509 --> 00:47:57,550
しかし、これらすべてのを見つけるために
少し構文の詳細、

976
00:47:57,550 --> 00:48:00,320
それは、利用可能なすべてのことになるだろう
ここで、このウェブサイト上。

977
00:48:00,320 --> 00:48:02,660
>> だから私は次のようにお勧めします
最初の一歩を踏み出します。

978
00:48:02,660 --> 00:48:06,277
あなたのCodePenにそれを入れてください。

979
00:48:06,277 --> 00:48:08,110
作りに取り組んで試してみてください
その第二のステップへ。

980
00:48:08,110 --> 00:48:11,310
ちょうどそこ第四段階だ、と
あなたはそこから取得する場所を参照してください。

981
00:48:11,310 --> 00:48:14,840
>> これ以上の質問は、チェック
またはそのページから私を電子メールで送信します。

982
00:48:14,840 --> 00:48:16,490
それは私の電子メールです。

983
00:48:16,490 --> 00:48:19,885
しかし、私は、任意のお手伝いをしてみたいです
リアクトについてあなたが持つかもしれない質問。

984
00:48:19,885 --> 00:48:21,010
だから、うん、それは私が持っているすべてです。

985
00:48:21,010 --> 00:48:23,410
以下のためにありがとうございました
見たり、出席のため。

986
00:48:23,410 --> 00:48:26,820
そして、私は、任意の質問を取りますよ
あなたは今、この後かもしれません。

987
00:48:26,820 --> 00:48:29,140
だから、見てのためのあなたのすべてに感謝します。

988
00:48:29,140 --> 00:48:31,270