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
>> नील मेहता: यहाँ यह जाता है।

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 और एक sophomore के लिए एक प्रादेशिक सेना में हूँ
हार्वर्ड कॉलेज और एक बहुत, बहुत कम

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
मैं वेब क्षुधा की, भविष्य के रूप में कहा।

12
00:00:27,270 --> 00:00:29,055
>> तो प्रतिक्रिया एक वेब रूपरेखा है।

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
संरचना और अपने वेब एप्लिकेशन का निर्माण करने के लिए।

16
00:00:35,770 --> 00:00:39,010
और वेब क्षुधा, फिर से, वेबसाइटें हैं
फेसबुक जैसी इंटरैक्टिव कि कर रहे हैं,

17
00:00:39,010 --> 00:00:42,330
Twitter.com, Instagram.com, जो भी हो।

18
00:00:42,330 --> 00:00:45,590
>> तो फेसबुक एक वेब रूपरेखा है
कि फेसबुक द्वारा विकसित किया गया था

19
00:00:45,590 --> 00:00:48,060
प्रतिक्रिया back-- एक दो साल है।

20
00:00:48,060 --> 00:00:50,830
इसके बाद से में इस्तेमाल किया गया है
उनके मोबाइल एप्लिकेशन पर फेसबुक

21
00:00:50,830 --> 00:00:52,460
और वेब अनुप्रयोग, इंस्टाग्राम।

22
00:00:52,460 --> 00:00:56,350
खान अकादमी एक और है
प्रतिक्रिया की प्रमुख प्रारंभिक adopter।

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
>> और तो प्रतिक्रिया के रूप में ही नहीं, अच्छा है
इमारत इंटरफेस के लिए वेब रूपरेखा।

29
00:01:13,470 --> 00:01:16,020
यह वेब इंटरफेस के निर्माण के लिए अच्छा है।

30
00:01:16,020 --> 00:01:18,350
एक बात भी नहीं है
कहा जाता मूल निवासी प्रतिक्रिया जो

31
00:01:18,350 --> 00:01:22,200
आप इंटरफेस निर्माण करने देता है
एंड्रॉयड और आईओएस के लिए

32
00:01:22,200 --> 00:01:26,390
भविष्य में और शायद अन्य प्लेटफार्मों
सिर्फ एक ही जावा स्क्रिप्ट कोड का उपयोग कर।

33
00:01:26,390 --> 00:01:31,130
आप ठीक उसी इस्तेमाल कर सकते हैं
जावा स्क्रिप्ट कोड, वेबसाइटों के लिए प्रस्तुत करना

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
हम कैसे बदलने जा रहा है
हमेशा के लिए वेब क्षुधा का निर्माण।

41
00:01:48,990 --> 00:01:55,820
तो यह शायद थोड़ा अतिशयोक्ति है, लेकिन मैं
यह पता करने के लिए एक बहुत अच्छी बात है।

42
00:01:55,820 --> 00:01:57,580
>> ठीक है, तो प्रतिक्रिया क्या है?

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
>> घटक हैं प्रतिक्रिया
souped अप 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
एक घटक सिर्फ एक है
एचटीएमएल कोड का गुच्छा कि

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
क्या एक तुम बस कहना है की तरह
प्रोफ़ाइल है, और यह प्रदान करता है।

79
00:03:39,650 --> 00:03:40,600
वे composable हैं।

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
आप फेसबुक में एम्बेड कर सकते हैं, उदाहरण के लिए,
जब तक यह का उपयोग करता है के रूप में के रूप में अच्छी तरह से प्रतिक्रिया।

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
>> ठीक है, तो इसकी वजह यह शांत प्रतिक्रिया है
देखने का एक अलग तरीका है

91
00:04:18,420 --> 00:04:19,870
आप वेब क्षुधा का निर्माण कैसे पर।

92
00:04:19,870 --> 00:04:23,620
तुम्हें शायद MVC, एक के बारे में सुना है
मॉडल आप 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
>> इंस्टाग्राम का उपयोग करने के लिए
उदाहरण के लिए, हो सकता है आप

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
>> फेसबुक मैसेंजर में, के लिए
प्रतिक्रिया है, जो उदाहरण,

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.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
और जब भी उन में से एक
घटकों बदल गया है,

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
आप किसी भी नहीं होता
अजीब interconnections।

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
हम composable निर्माण कर रहे हैं
आसानी से स्केलेबल वेब क्षुधा।

136
00:06:10,870 --> 00:06:13,150
>> आप एक डेटा स्रोत है,
सत्य का स्रोत है।

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
आप एक अजगर वापस अंत की तरह है,
अपने अजगर कुछ डेटा थूक कर सकते हैं, तो

151
00:06:50,480 --> 00:06:51,610
इसे प्रस्तुत कर सकते हैं प्रतिक्रिया।

152
00:06:51,610 --> 00:06:54,700
आप कोई जेएस outputs हैं तो
डेटा की प्रतिक्रिया यह प्रदान करता है।

153
00:06:54,700 --> 00:06:56,890
रूबी के साथ रेल
डेटा प्रतिक्रिया यह प्रदान करता है।

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
>> ठीक है, यदि ऐसा है तो तुम यहाँ रहे थे
मेरे पिछले संगोष्ठी के लिए

164
00:07:22,210 --> 00:07:26,610
आप के लिए कोड की है कि सब पता चल जाएगा
आज की बात इस URL पर होने जा रहा है

165
00:07:26,610 --> 00:07:29,320
यहाँ, माफ करना, यहां इस यूआरएल।

166
00:07:29,320 --> 00:07:32,730
और मूल रूप से हम जाने के लिए जा रहे हैं
शायद चार चरणों, पांच के माध्यम से,

167
00:07:32,730 --> 00:07:33,510
शायद नहीं पाँच।

168
00:07:33,510 --> 00:07:37,300
हम चार चरणों के माध्यम से कदम होगा
एक नमूना निर्माण के एप्लिकेशन प्रतिक्रिया।

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
यह जावा स्क्रिप्ट कोड के साथ।

188
00:08:37,980 --> 00:08:40,039
और इसलिए यह एक तरीका है
हमें कोड बाहर की कोशिश करने के लिए

189
00:08:40,039 --> 00:08:43,089
का उपयोग करने के लिए बिना बहुत जल्दी
हमारे आईडी या हमारे स्थानीय मशीन का उपयोग

190
00:08:43,089 --> 00:08:44,290
जो कुछ भी।

191
00:08:44,290 --> 00:08:47,670
यह आप mockup करने के लिए एक बहुत ही त्वरित तरीका है
और कोड के विभिन्न प्रकार के बाहर का परीक्षण।

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
>> ठीक है, तो एक जावास्क्रिप्ट है प्रतिक्रिया
पुस्तकालय, और जैसे,

203
00:09:21,250 --> 00:09:24,480
, जावास्क्रिप्ट के ज्ञान की आवश्यकता
जो वेब प्रोग्रामिंग भाषा है।

204
00:09:24,480 --> 00:09:27,660
और यह अन्य बातों के लिए इस्तेमाल किया जा रहा है
अब भी है, लेकिन मुख्य रूप से वेब का विकास

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
जावास्क्रिप्ट सीख सकते हैं
आधे घटें में।

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
हम भी यहां क्योंकि एचटीएमएल का एक बहुत है
हम निश्चित रूप से वेब पेज डिजाइन कर रहे हैं।

211
00:09:39,960 --> 00:09:43,890
आप के साथ अपरिचित हैं तो
एचटीएमएल, 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 या जावास्क्रिप्ट के साथ परिचित

220
00:10:00,794 --> 00:10:02,960
ठीक है, तो हम करने जा रहे हैं
ऐसा हम बनाने जा रहे है

221
00:10:02,960 --> 00:10:06,470
प्रतिक्रिया का उपयोग करते हुए एक बहुत ही बुनियादी flashcard अनुप्रयोग।

222
00:10:06,470 --> 00:10:08,210
हम एक flashcard लिए जा रहे हैं।

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
इसलिए हम चार चरणों के माध्यम से जाने के लिए जा रहे हैं
खरोंच से शुरू इस का निर्माण करने के लिए।

232
00:10:33,750 --> 00:10:36,740
>> ठीक है, तो चार कदम, हम करेंगे
पहले कदम के साथ शुरू।

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
>> तो चलो आगे जाना है और निर्माण करते हैं हमारे
जावास्क्रिप्ट का उपयोग पहले घटक।

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
>> फिर, यह सूचकांक करने के लिए स्पष्ट नहीं है तो
तुम, मैं आप बिल्लियों के लिए जे एस पर जाने की सिफारिश

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,
द्वारा प्रयोग किया जाता है कि जावास्क्रिप्ट प्रतिक्रिया।

262
00:12:08,660 --> 00:12:11,845
यह आप के अंदर HTML लिखने चलो
अपने जावास्क्रिप्ट, की जो

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
>> तो चलो हम सिर्फ प्रस्तुत करना चाहते हैं, हम कहते हैं
अब के लिए एक सीधे-अप flashcard।

270
00:12:32,390 --> 00:12:34,890
flashcard, मैं कहना चाहूँगा
एक सवाल और जवाब देना होगा।

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
हाँ, तो मूल रूप से आप वास्तव में कर सकते हैं
अपने जावास्क्रिप्ट अंदर एचटीएमएल लिखें।

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
बजाय आइएमजी की तरह कह की तरह
पैरा के लिए छवि या पी के लिए,

285
00:13:25,100 --> 00:13:28,120
अनुप्रयोग है, ताकि आप app लिखने
एक 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 बनाया है
पेज के एक आईडी के साथ बुलाया पेज,

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 के साथ बाहर प्रिंट होगा
इसके अंदर दो पैराग्राफ।

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
और इसलिए मैंने क्या किया, यह बनाया
कि टेम्पलेट से एक नया app।

304
00:14:29,867 --> 00:14:31,200
और फिर मैं इसे प्रस्तुत करने के लिए कहा था।

305
00:14:31,200 --> 00:14:33,680
इसलिए यह कहा ठीक है, अनुप्रयोग,
मैं क्या बाहर प्रिंट करना चाहिए?

306
00:14:33,680 --> 00:14:36,970
अनुप्रयोग, एक div बाहर प्रिंट जाना कहते
इसके अंदर दो पैराग्राफ के साथ।

307
00:14:36,970 --> 00:14:40,420
और देखा, साथ हमारे div वहाँ
इसके अंदर दो पैराग्राफ।

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
हम केवल एक ही पता है वहाँ
कार्ड यह कर सकते हैं, तो हम कर रहे हैं

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
आप जो कुछ भी flashcard,
बस यहाँ में फ़ीड,

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
तो हम क्या कर सकते हैं हम है
App से इसे बदल सकते हैं

332
00:15:46,660 --> 00:15:51,300
CardView करने के लिए सिर्फ एक
अनुप्रयोग के लिए नया नाम,

333
00:15:51,300 --> 00:15:54,450
और हम एक नया बना सकते हैं
घटक, app बुलाया

334
00:15:54,450 --> 00:15:56,336
पुराने app के साथ भ्रमित नहीं होना चाहिए।

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 renders, और
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
हम app तत्व है
यह से भी बड़ा है कि।

346
00:16:37,250 --> 00:16:40,990
>> ठीक है, तो हम चाहते हैं कि हमारे 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
यह सिर्फ संकेतन बनाने है
जावास्क्रिप्ट में वस्तु।

351
00:17:05,260 --> 00:17:09,280
यह एक संरचना की तरह की तरह है
सी में है, इसलिए हम एक कार्ड बनाया

352
00:17:09,280 --> 00:17:15,920
और इसलिए अब हम के रूप में इस कार्ड पारित कर सकते हैं
एक संपत्ति या HTML में एक विशेषता के रूप में

353
00:17:15,920 --> 00:17:17,290
हमारे app करने के लिए शब्दावली।

354
00:17:17,290 --> 00:17:20,210
इसलिए हम इस, app कर सकते हैं
कार्ड 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
एक ही विचार है, अनुप्रयोग कार्ड बराबर होती
आप ब्रेसिज़ डाल करने के लिए मिल गया है 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
खुद को app नहीं है क्योंकि जैसा
इसके साथ क्या करना है पता करने के लिए जा रहा है,

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
उस कार्ड वस्तु अपने app करने के लिए दिया जाता है।

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
>> ठीक है, तो अब हम 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
यकीन है कि इस सवाल का जवाब चला गया बनाओ
चर जवाब देने के लिए।

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 अगर आप कहते हैं,
मुझे किसी भी flashcard वस्तु देना

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
तो बुनियादी तौर पर, इसमें से एक की तरह है
सी पुस्तकालय में मानक कार्य करता है।

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
>> ठीक है, तो चलो इस बनाते हैं
बात इंटरैक्टिव।

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
ठीक है, तो ठीक है अब इन घटकों
सभी वे करते हैं क्योंकि बोरिंग कर रहे हैं,

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
>> एक flashcard के लिए, के लिए
राज्य के उदाहरण, किस तरह

449
00:22:05,320 --> 00:22:07,550
आप चाहते हो सकता है
एक flashcard के लिए याद है?

450
00:22:07,550 --> 00:22:09,740
क्या अस्थायी स्थिति
आप को याद करने के लिए चाहते हो सकता है

451
00:22:09,740 --> 00:22:12,491
एक flashcard अनुप्रयोग में एक flashcard के लिए?

452
00:22:12,491 --> 00:22:13,990
दर्शकों: यह फ़्लिप किया गया है या नहीं?

453
00:22:13,990 --> 00:22:14,990
नील मेहता: हाँ, सही।

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
फेसबुक पर, उदाहरण के लिए, तुम होगा
समाचार फ़ीड में जहां याद रखना चाहते हैं

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
नील मेहता: एक फ्लैश की तरह
कार्ड, आप देख जा सकता है जैसे

465
00:22:38,360 --> 00:22:40,290
सवाल पक्ष या उत्तर की ओर?

466
00:22:40,290 --> 00:22:41,070
>> दर्शकों: ठीक है।

467
00:22:41,070 --> 00:22:43,270
>> नील मेहता: की तरह एक
ठीक है, flashcard दो तरफा?

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
फिर, मैं फेसबुक में कहा
मैसेंजर, मैं जो व्यक्ति की तरह है

472
00:22:54,380 --> 00:22:56,550
आप फेसबुक देख रहे हैं
या कौन सही, प्रोफ़ाइल है?

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
>> ठीक है, हमारे 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
>> ठीक है, तो में अब ठीक है, हम कर रहे हैं, प्रस्तुत करना
सवाल और जवाब दिखा।

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
>> नील मेहता: हाँ, तो पाठ
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 वापस मिलता है।

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
तो, उदाहरण के लिए, फेसबुक मैसेंजर,
आप एक ही डेटा स्रोत हो, भले

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
>> ठीक है, तो यह सब कुछ ठीक है और
अच्छा है, लेकिन अब क्या वास्तव में है

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
सच से सच करने के लिए झूठा, गलत करने के लिए।

564
00:27:34,136 --> 00:27:38,420
>> नील मेहता: हाँ, तो ले जो कुछ भी
this.front सामने राज्य है है-।

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
सच है, यह गलत बदल देंगे।

575
00:28:07,420 --> 00:28:09,170
इसलिए हम राज्य स्थापित करेंगे
सच से गलत करने के लिए।

576
00:28:09,170 --> 00:28:11,430
यह गलत है, तो हम करेंगे
सच करने के लिए यह गलत निर्धारित किया है।

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
हम इसे कुछ भी redraw कभी नहीं बताया।

583
00:28:30,910 --> 00:28:32,630
आप यह कर रहे हैं
प्रतिक्रिया के बिना, आप चाहते हैं

584
00:28:32,630 --> 00:28:34,588
जब है-- पसंद है
फ्लिप बटन, क्लिक किया जाता है

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
यह एक है कि वहाँ जानता है
प्रत्येक से अलग पत्राचार

591
00:28:52,860 --> 00:28:57,270
राज्य और पैरामीटर और एचटीएमएल के बीच।

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
लेकिन प्रतिक्रिया एक बात का उपयोग करता है
एक छाया डोम बुलाया।

598
00:29:15,050 --> 00:29:19,950
इसके बजाय सीधे पेज ड्राइंग का, यह
स्मृति में आभासी एचटीएमएल पेड़ रहता है।

599
00:29:19,950 --> 00:29:23,620
>> तुम्हें पता है, एचटीएमएल एक पेड़ की तरह है,
एक श्रेणीबद्ध डेटा संरचना की तरह।

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
और फिर यह केवल तरह परिवर्तन
छोटे tweaks में पेज जरूरत के रूप में,

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
यही कारण है कि आभासी डोम है।

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
>> नील मेहता: हाँ, सवाल
यह 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
>> फेसबुक पर अगर आप की तरह
MVC में एक नया संदेश मिलता है,

639
00:31:02,186 --> 00:31:04,060
आपको याद करने के लिए होगा
ठीक है, चीजों को बदलने

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
>> ठीक है, तो चलो बात करते हैं, देखते हैं
चरण 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
चलो हमारे flashcard एप्लिकेशन चाहिए हम कहते हैं
सभी कार्ड की एक सूची शामिल

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 साथ coexists,

676
00:32:36,200 --> 00:32:39,680
और इस सूची को देखने और CardView
एक साथ काम करना पसंद करेंगे।

677
00:32:39,680 --> 00:32:43,190
और आप उन्हें गठबंधन कर सकते हैं
आप के लिए हमारे app बनाने के लिए।

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
और इस मामले में, हम उनमें से तीन लोगों की है।

691
00:33:20,980 --> 00:33:27,280
>> ठीक है, app है इतना तो
एक सूची कार्ड पाने के लिए जा रहा है,

692
00:33:27,280 --> 00:33:29,870
और यह तय करने के लिए हो रहा है, जो
एक CardView को दिखाने के लिए।

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
>> तो अगर आप एक बाहर निकालने के लिए जब
कार्ड, 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
>> नील मेहता: हाँ, हम तो
ठीक है, राज्य के लिए करना चाहते हैं?

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
इतने पर दूसरा कार्ड, तीसरे कार्ड, और।

711
00:34:23,710 --> 00:34:28,760
>> तो एक app तो एक बॉक्स में एक मिल जाएगा
, 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
तो अब हमारे app यह है खुद के राज्य है।

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
और अब लगता है कि दूसरा कार्ड,
और फिर हम 0 करने के लिए चला गया।

733
00:36:07,330 --> 00:36:10,390
तो यहाँ एक नया है
souped अप हमारे के संस्करण।

734
00:36:10,390 --> 00:36:16,000
>> ठीक है, तो अब की एक सूची दृष्टि से देखते हैं कि चलो
अपने कार्यक्रम में सभी कार्ड से पता चलता है

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
इसलिए हम एक unordered प्रस्तुत करना चाहते हैं
हर कार्ड के लिए एक सूची आइटम के साथ सूची।

739
00:36:38,800 --> 00:36:41,490
और इसलिए हम ताश के पत्तों की एक गुच्छा है।

740
00:36:41,490 --> 00:36:44,990
हम एक सूची आइटम चाहते हैं
हर कार्ड के लिए, है ना?

741
00:36:44,990 --> 00:36:47,490
हम एक पाश के लिए कर सकता है या
कुछ एक नई सूची आइटम बनाने के लिए।

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-- एक्स तीर एक्स बार एक्स।

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
तो अगर आप एक क्या लगता है,
2, 3.map एक्स एक्स बार करने के लिए चला जाता है

750
00:37:22,090 --> 00:37:25,480
एक्स आप वापस दे दिया देता है
इस समारोह है कि

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
>> नील मेहता: हाँ, 1, 4, 9
आप एक बार 1 करते हैं।

755
00:37:35,709 --> 00:37:36,500
यही कारण है कि आप एक देता है।

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
यही कारण है कि एक दूसरा तत्व है।

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
हम हर एक के लिए एक सूची आइटम प्राप्त करना चाहते हैं
एक है, तो हम यहाँ सिर्फ नक्शे का उपयोग करेंगे।

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
तो इस सूची में शामिल है एक
ली की या सूची आइटम की सरणी

775
00:38:30,649 --> 00:38:32,440
जहां एक सूची है
हर कार्ड के लिए आइटम,

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
तो हम एक उल वापस आ जाएगी।

780
00:38:46,521 --> 00:38:49,020
कि unordered सूची के अंदर,
हम अभी पूरी सूची रहना होगा

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
और अगर आप एक unordered अंदर डाल
सूची, और आप इसे वापस दे।

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
नील मेहता: हाँ, कार्ड, इसलिए
ठीक है, 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
प्रस्तुत करना, में एक शीर्ष स्तर तत्व निष्क्रिय
इसलिए यदि आप एक 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
हाँ, तो फिर, हम दो घटक है।

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
>> दर्शकों: आप उपयोग कर सकते हैं
सामान्य जावास्क्रिप्ट में JSX?

829
00:41:24,205 --> 00:41:27,150
या कि कुछ है कि
[अश्राव्य] के साथ आया था?

830
00:41:27,150 --> 00:41:30,760
>> नील मेहता: सवाल कर सकते है
आप सामान्य जावास्क्रिप्ट के साथ JSX का उपयोग करें?

831
00:41:30,760 --> 00:41:32,620
इसका जवाब है हाँ।

832
00:41:32,620 --> 00:41:41,070
JSX बस के एक तरीका है अपने लेता है
इसके अंदर एचटीएमएल है कि जावास्क्रिप्ट,

833
00:41:41,070 --> 00:41:44,215
और यह जावास्क्रिप्ट में संकलित है कि
इसके अंदर एचटीएमएल के पास नहीं है।

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
>> यही कारण है कि जावास्क्रिप्ट को संकलित है कि
जैसे एक ही बात को उत्पन्न करता है।

837
00:41:54,970 --> 00:41:59,590
मैं क्या मैं कह रहा हूँ कि लगता है
यह है की तरह JSX, बस एक वाक्यात्मक है

838
00:41:59,590 --> 00:42:03,530
जावास्क्रिप्ट के लिए एक पूर्वप्रक्रमक ज्यादा
PHP जैसे HTML के लिए एक पूर्वप्रक्रमक है।

839
00:42:03,530 --> 00:42:05,490
जेएससी एक पूर्वप्रक्रमक है
जावास्क्रिप्ट के लिए कि सुविधा देता है

840
00:42:05,490 --> 00:42:12,970
आप अपने जावास्क्रिप्ट के अंदर एचटीएमएल डाल दिया।

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
नील मेहता: आमतौर पर आप की जरूरत नहीं
जावास्क्रिप्ट के अंदर एचटीएमएल डाल करने के लिए

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 में सी सीख रहा हूँ।

852
00:42:35,646 --> 00:42:38,032
सी भी एक कार्यात्मक भाषा है?

853
00:42:38,032 --> 00:42:39,990
नील मेहता: तो सवाल
कार्यात्मक के बारे में है

854
00:42:39,990 --> 00:42:43,010
नामक एक और बात यह है कि बनाम
जरूरी या प्रक्रियात्मक प्रोग्रामिंग।

855
00:42:43,010 --> 00:42:44,820
लोकप्रिय कार्यक्रमों में से दो प्रकार के होते है।

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
सी एक बहुत प्रक्रियात्मक प्रतिमान है।

861
00:42:58,010 --> 00:43:02,360
>> और एक उदाहरण के रूप में, उदाहरण के लिए सी,
आप इस कथात्मक रास्ता नहीं करते

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
फेसबुक पर आप एक संदेश मिलता है
और आप को अद्यतन करने के लिए क्या भागों का चयन,

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
ठीक है, मैं एक संदेश मिला है।

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
>> नील मेहता: नहीं, बातें क्रम में होता है।

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
>> दर्शकों: उम, तुम क्यों करेगा
वर के लिए विरोध के रूप में जाने का उपयोग करें?

917
00:45:06,840 --> 00:45:10,450
>> नील मेहता: तो सवाल यह है
यही कारण है कि आप के बजाय वर की जाने उपयोग करते हैं?

918
00:45:10,450 --> 00:45:13,220
यह कहा जाता है एक बात है
ES6 या एकमा स्क्रिप्ट 6।

919
00:45:13,220 --> 00:45:15,820
यह जावास्क्रिप्ट का नया संस्करण है।

920
00:45:15,820 --> 00:45:19,050
तकनीकी कारणों की एक गुच्छा है,
लेकिन ऐसा वर का एक बेहतर संस्करण है।

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
आप वर का उपयोग कर सकते हैं।

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
पुरानी जावास्क्रिप्ट के शीर्ष पर।

928
00:45:30,720 --> 00:45:32,782
>> तो हम पांच मिनट की तरह है।

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
आप बस खींचें के रूप में यह उतना आसान नहीं है
और वहाँ में एक जावास्क्रिप्ट ड्रॉप।

939
00:46:12,300 --> 00:46:15,890
>> आप अपने ट्रांसफार्मर के लिए किया है
यह पहले किया था, जो होगा, सेट अप

940
00:46:15,890 --> 00:46:18,120
में अपने JSX बारी
सामान्य जावास्क्रिप्ट।

941
00:46:18,120 --> 00:46:21,030
तुम्हें पता है कि हूँ बात करने के लिए है
आप सामान्य करने के लिए ES6 संकलन।

942
00:46:21,030 --> 00:46:24,720
जावास्क्रिप्ट चलती का एक बहुत कुछ है
भागों तुम्हें क्या करना है, तो एक चीज नहीं है

943
00:46:24,720 --> 00:46:27,200
फ़र्मर, Yeoman.io बुलाया।

944
00:46:27,200 --> 00:46:31,110
और यह एक कमांड लाइन उपकरण है कि करेंगे
आप अपनी प्रतिक्रिया बाहर पाड़ मदद

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
बस फ़र्मर, वाई-ई-ओ-एम-ए-एन, और पर जाना
आप इस तरह के जनरेटर पा सकते हैं।

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
यह एक बाहर पाड़ करेंगे
पूरे आपके लिए app प्रतिक्रिया।

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
>> तो बुनियादी तौर पर इमारत एक
एप्लिकेशन nontrivial है प्रतिक्रिया।

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