[संगीत बजाना] 

नील मेहता: यहाँ यह जाता है। 

खैर, हर कोई, वेब करने का स्वागत साथ भविष्य की क्षुधा प्रतिक्रिया। इस CS50 है। मेरा नाम नील है। मैं CS50 और एक sophomore के लिए एक प्रादेशिक सेना में हूँ हार्वर्ड कॉलेज और एक बहुत, बहुत कम भावुक वेब डेवलपर। तो मैं करने के लिए बहुत ही रोमांचक रहा हूँ आज आप के लिए बात कर रही हो, आप यहाँ या घर पर कर रहे हैं कि क्या देख रहा है, के बारे में फिर से है, जो प्रतिक्रिया मैं वेब क्षुधा की, भविष्य के रूप में कहा। 

तो प्रतिक्रिया एक वेब रूपरेखा है। मैं गया है और जैसा कह रही यहां कुछ लोगों के लिए, एक रूपरेखा सिर्फ एक है आप उपयोग कर सकते हैं उपकरणों का सेट संरचना और अपने वेब एप्लिकेशन का निर्माण करने के लिए। और वेब क्षुधा, फिर से, वेबसाइटें हैं फेसबुक जैसी इंटरैक्टिव कि कर रहे हैं, Twitter.com, Instagram.com, जो भी हो। 

तो फेसबुक एक वेब रूपरेखा है कि फेसबुक द्वारा विकसित किया गया था प्रतिक्रिया back-- एक दो साल है। इसके बाद से में इस्तेमाल किया गया है उनके मोबाइल एप्लिकेशन पर फेसबुक और वेब अनुप्रयोग, इंस्टाग्राम। खान अकादमी एक और है प्रतिक्रिया की प्रमुख प्रारंभिक adopter। 

यह वास्तव में मिल रहा है अत्यंत लोकप्रिय है। क्या आपने कभी कोणीय या की तरह चीजों का उपयोग करते हैं रीढ़ की हड्डी, यह एक ही परिवार के है, लेकिन इसके बाद से अब तक किया गया है उनकी लोकप्रियता को पीछे छोड़ दिया। यह गर्म नई बात है। यह वास्तव में, वास्तव में बहुत बड़ा है। 

और तो प्रतिक्रिया के रूप में ही नहीं, अच्छा है इमारत इंटरफेस के लिए वेब रूपरेखा। यह वेब इंटरफेस के निर्माण के लिए अच्छा है। एक बात भी नहीं है कहा जाता मूल निवासी प्रतिक्रिया जो आप इंटरफेस निर्माण करने देता है एंड्रॉयड और आईओएस के लिए भविष्य में और शायद अन्य प्लेटफार्मों सिर्फ एक ही जावा स्क्रिप्ट कोड का उपयोग कर। आप ठीक उसी इस्तेमाल कर सकते हैं जावा स्क्रिप्ट कोड, वेबसाइटों के लिए प्रस्तुत करना एंड्रॉयड क्षुधा और IOS क्षुधा प्रस्तुत करने के लिए। 

यह एक बहुत, बहुत ही रोमांचक समय है। यह एक सच में, वास्तव में अच्छा अवसर है। यह वास्तव में एक सार्वभौमिक वेब है इंटरफेस विकास उपकरण, इसलिए यह एक बहुत, बहुत है महत्वपूर्ण बात को जानते हैं। और, मैं लोगों को बता रहा था के रूप में इससे पहले, यह मुझे लगता है, हम कैसे बदलने जा रहा है हमेशा के लिए वेब क्षुधा का निर्माण। तो यह शायद थोड़ा अतिशयोक्ति है, लेकिन मैं यह पता करने के लिए एक बहुत अच्छी बात है। 

ठीक है, तो प्रतिक्रिया क्या है? प्रतिक्रिया एक रूपरेखा आप कर सकते है इंटरफेस के निर्माण के लिए इस्तेमाल करते हैं। एक इंटरफेस, फिर से, सही एक वेब पेज,? तो यहाँ Instagram.com है, का उपयोग करता है प्रतिक्रिया। 

पर बनाया गया है प्रतिक्रिया घटकों का विचार है। एक घटक एक HTML है स्टेरॉयड पर तत्व, इसलिए एक HTML तत्व एक बटन की तरह है। यह एक पैरा है। यह ठीक है, एक हैडर है? और Instagram इन का उपयोग करें, लेकिन यह होगा यह भी प्रतिक्रिया के घटकों का उपयोग करेगा। 

घटक हैं प्रतिक्रिया souped अप HTML तत्वों अपने स्वयं के व्यवहार किया है कि उनके भीतर निहित। तो, एक उदाहरण के रूप में, हम कर सकते एक समय तत्व, एक समय घटक, जो की तरह शामिल होंगे समय टिकट, आप जानते हैं, एक प्रोफाइल घटक जो प्रोफ़ाइल छवि में शामिल होंगे और व्यक्ति का नाम है। यह एक तरह काउंटर, जो हो सकता है पसंद की संख्या की तरह भरोसा कर सकते हैं, आप उस पर क्लिक करते हैं, तो यह हूँ पसंद की संख्या में वृद्धि। एक घटक सिर्फ एक है एचटीएमएल कोड का गुच्छा कि कुछ कार्यक्षमता है इसके अंदर लपेटा। तो यह एक HTML तत्व की तरह है स्टेरॉयड पर, जैसा कि मैंने पहले कहा है। आप इन घटकों ले जा सकते हैं, और आप उन्हें एक साथ रख सकते हैं में, नए घटकों बनाने के लिए इस मामले में, एक के बाद घटक, जो यह सब सामान शामिल हैं। यह प्रोफाइल समय शामिल होगा, LikeCounter, शायद टिप्पणी और शायद छवि ही। और तो वेब ऐप्लिकेशन सिर्फ लेने के द्वारा निर्मित कर रहे हैं घटकों और उन्हें एक साथ रख। एक Instagram फ़ीड की तुलना में अधिक कुछ भी नहीं है पदों का एक गुच्छा एक के बाद एक, हर पोस्ट, समय की तरह होता है इतने पर, LikeCounter प्रोफ़ाइल, और। यह एक तरह से एक घर के निर्माण की तरह है। आप का निर्माण नहीं है ऊपर से नीचे घर। आप components-- लेने के लिए बाथरूम की तरह लेते हैं। आप उन्हें छड़ी bedroom-- लेने के लिए एक साथ, और आप एक नया घटक है। आप घर का एक नया हिस्सा है। 

इतना सब आसपास बनाया गया है प्रतिक्रिया घटकों का यह विचार है कि कथात्मक हैं कि, बातचीत कर रहे हैं। क्या एक तुम बस कहना है की तरह प्रोफ़ाइल है, और यह प्रदान करता है। वे composable हैं। आप एक समय और एक प्रोफ़ाइल ले जा सकते हैं, डाल उन्हें एक साथ, कुछ बेहतर बनाते हैं। और वे यदि हां, तो पुन: प्रयोज्य हैं आप एक पद के लिए स्रोत कोड है, आपको लगता है कि कहीं भी एम्बेड कर सकता है। 

आप एक Instagram एम्बेड कर सकते हैं अपनी खुद की वेबसाइट पर बात। आप फेसबुक में एम्बेड कर सकते हैं, उदाहरण के लिए, जब तक यह का उपयोग करता है के रूप में के रूप में अच्छी तरह से प्रतिक्रिया। तो घटकों वास्तव में, वास्तव में, वास्तव में कर रहे हैं वेब के शक्तिशाली इमारत ब्लॉकों कि कहीं भी इस्तेमाल किया और रखा जा सकता है एक साथ नए भवन ब्लॉक बनाने के लिए। यही कारण है कि बहुत, बहुत है उच्च स्तरीय सिंहावलोकन। तो, फिर से, अगर आपके पास किसी भी बिंदु पर किसी भी सवाल रिएक्टर के दर्शन के बारे में कोडिंग, मुझे रोकने के लिए, और मुझे पता है। 

ठीक है, तो इसकी वजह यह शांत प्रतिक्रिया है देखने का एक अलग तरीका है आप वेब क्षुधा का निर्माण कैसे पर। तुम्हें शायद MVC, एक के बारे में सुना है मॉडल आप CS50 या जो कुछ में नियंत्रण आप का उपयोग की जांच कर रही कक्षाओं अन्य। और सबसे व्यवस्थाएं हैं MVC के विचार के आसपास का निर्माण किया। कोई प्रतिक्रिया नहीं है। विचार के आसपास बनाया गया है प्रतिक्रिया दिशाहीन डाटा प्रवाह की यहां इस चार्ट या ग्राफिक के रूप में देखा। 

असल में, आप एक डेटा स्रोत है। और डेटा स्रोत तय करेगा कैसे कुछ घटकों को बाहर करना। और घटकों होगा तब, जब वे बदल जाते, वे बता देंगे डेटा स्रोत बदलने के लिए। 

इंस्टाग्राम का उपयोग करने के लिए उदाहरण के लिए, हो सकता है आप जैसे पद वस्तुओं की एक सूची एक डेटाबेस या कुछ में। डेटा कि। और फिर हमारे पद घटकों कि डेटा ले जाएगा, और प्रस्तुत करने के लिए उस डेटा का उपयोग स्क्रीन पर एक बात है। यही कारण है कि क्या तीर , घटक है करने के लिए डेटा से और फिर एक ही है कि डेटा का उपयोग किया जाता है, घटकों का एक गुच्छा के लिए प्रस्तुत करना। 

फेसबुक मैसेंजर में, के लिए प्रतिक्रिया है, जो उदाहरण, आप की एक सूची हो सकता है आपके डेटा स्रोत के रूप में संदेश। और कहा कि नहीं प्रस्तुत करना होगा संदेशों के केवल सूची लेकिन यह भी दोस्तों की सूची तुम्हारे पास है। आप अपठित गिनती है। शायद भी फेसबुक बात प्रस्तुत करना कि Facebook.com के नीचे स्थित है। एक ही डेटा है एक सत्य का ही स्रोत और इस बात का एक बहुत का कारण बनता घटकों गाया जाना। और जब भी उन में से एक घटकों बदल गया है, इसे वापस चला जाता है और डेटा स्रोत बदलता है। 

तुम सही हो, एक संदेश भेजने के? यही कारण है कि डेटा स्रोत बदलता है। आप अपने संदेशों को पढ़ा, इसलिए यदि आप 0 के लिए अपठित निर्धारित किया है। यही कारण है कि डेटा स्रोत बदलता है। और एक की इन की है कि सभी को नोटिस तीर ही डेटा के लिए वापस जा रहा स्रोत, तो आप जानते हैं, एक निश्चित डेटा सेट दिया, आप बिल्कुल पता है क्या पेज की तरह लग रहा है। यह निर्धारक है। आप देखते हुए कुछ डेटा पता है, क्या पेज की तरह लग रहा है। आप यह कैसे हो रहा है भविष्यवाणी कर सकते हैं व्यवहार करते हैं और कैसे चीजें जा रहे हैं वे एक साथ डाल रहे हैं जब काम करने के लिए। 

और मैं एक लाख घटकों था कि अगर यहाँ, यह सही है, वही व्यवहार करेगा? आप किसी भी नहीं होता अजीब interconnections। एक डेटा एक लाख घटकों गाया। एक लाख घटकों सकता है वापस जाने के लिए और डेटा को संपादित करें। और तो यह बहुत अच्छा है। हम composable निर्माण कर रहे हैं आसानी से स्केलेबल वेब क्षुधा। 

आप एक डेटा स्रोत है, सत्य का स्रोत है। यही कारण है कि अपने घटकों बताता है कैसे पेज को बाहर करना, और घटकों होगा बातचीत संभाल। और वे बदलना चाहते हैं बातें, अभी वापस जाओ और डेटा स्रोत बदलने के लिए बताओ। सही बात? तो प्रतिक्रिया सब समझ के बारे में है कैसे एक घटक के निर्माण के लिए और अपने घटक बनाने के लिए कैसे बाहर की दुनिया के साथ बातचीत। 

घटक बातचीत कर रही है बाहर की दुनिया से एक और प्रौद्योगिकी का उपयोग करता है कहा जाता फ्लक्स, जो है कि एक रूपरेखा है प्रतिक्रिया के शीर्ष पर जोड़ा। हम इस बारे में बात करने के लिए नहीं जा रहे हैं। हम दिया, के बारे में अधिक बात करने के लिए जा रहे हैं डेटा, तुम कैसे एक घटक प्रदान कर सकते हैं? 

और इसलिए तुम क्योंकि वास्तव में अच्छा है प्रतिक्रिया आप चाहते हैं किसी भी पीछे के अंत के साथ इसका इस्तेमाल कर सकते हैं। आप एक अजगर वापस अंत की तरह है, अपने अजगर कुछ डेटा थूक कर सकते हैं, तो इसे प्रस्तुत कर सकते हैं प्रतिक्रिया। आप कोई जेएस outputs हैं तो डेटा की प्रतिक्रिया यह प्रदान करता है। रूबी के साथ रेल डेटा प्रतिक्रिया यह प्रदान करता है। 

तो प्रतिक्रिया मूल रूप से एक वेब है घटकों के साथ एक सामने अंत view-- किसी भी डेटा स्रोत के लिए। और इसलिए डेटा स्रोत से करने जा रहा घटकों प्रतिक्रिया बहुत आसान है। अन्य रास्ते पर जा रही एक थोड़ा कठिन है। जैसा कि मैंने पहले उल्लेख किया है कि फ्लक्स उपयोग करता है। हम उस में नहीं मिलेगा। हम पर अधिक ध्यान केंद्रित करेंगे डेटा-से-घटक की ओर। आप कर सकते हैं इस तरह शांत, मज़ा वेब क्षुधा। इसे बाहर की दुनिया को प्रभावित नहीं करेगा अब के लिए, लेकिन यह एक और कहानी है। 

ठीक है, यदि ऐसा है तो तुम यहाँ रहे थे मेरे पिछले संगोष्ठी के लिए आप के लिए कोड की है कि सब पता चल जाएगा आज की बात इस URL पर होने जा रहा है यहाँ, माफ करना, यहां इस यूआरएल। और मूल रूप से हम जाने के लिए जा रहे हैं शायद चार चरणों, पांच के माध्यम से, शायद नहीं पाँच। हम चार चरणों के माध्यम से कदम होगा एक नमूना निर्माण के एप्लिकेशन प्रतिक्रिया। और तो सभी स्रोत कोड हर तरह के कदम के लिए यदि हां, तो यहीं होने जा रहा है यदि आप घर पर साथ पीछा कर रहे हैं इस कोड को सोचना करने के लिए स्वतंत्र महसूस हो रहा है। आप यहाँ के साथ पीछा कर रहे हैं, हम स्क्रीन पर दिखा सकता हूँ इसलिए इसके बारे में चिंता मत करो। लेकिन अगर आप घर पर कर रहे हैं, तो लग रहा है इस वेबसाइट पर जाएँ मुक्त। और, हाँ, आप प्राप्त करने में सक्षम होना चाहिए आप कभी यहाँ की जरूरत थी सभी कोड। तो यह एक अच्छा धोखा शीट के रूप में अच्छी तरह से है के साथ अपने भविष्य रोमांच के लिए प्रतिक्रिया। कूल, यदि ऐसा है तो यहाँ है जो हर किसी के, और आप घर पर कर रहे हैं, भले ही is.gd/cs50react, इस वेबसाइट को ऊपर खींचने, कोई पूंजी नहीं, कोई अंडरस्कोर, कोई कुछ नहीं। 

आपको लगता है कि एक पृष्ठ दिखाई देगा इस तरह से एक छोटा सा। इस CodePen नामक एक बात है। CodePen एक सहयोगी है कोडिंग पर्यावरण जिसके साथ मैं यहाँ कोड लिख सकते हैं, और यह स्वचालित रूप से आप के लिए भेजा जाएगा। और इस तरह से करने के लिए, मैं कोड लिख सकते हैं। मैं यहाँ कोड चला सकते हैं। 

Example-- के लिए और इसे देख reloads-- हैं, मैं पृष्ठ पर JavaScript कोड चल रहा हूँ यहीं है, और यह हूँ स्वचालित रूप से एक वेब पेज रेंडर यह जावा स्क्रिप्ट कोड के साथ। और इसलिए यह एक तरीका है हमें कोड बाहर की कोशिश करने के लिए का उपयोग करने के लिए बिना बहुत जल्दी हमारे आईडी या हमारे स्थानीय मशीन का उपयोग जो कुछ भी। यह आप mockup करने के लिए एक बहुत ही त्वरित तरीका है और कोड के विभिन्न प्रकार के बाहर का परीक्षण। 

तो मैं ले जा रहा हूँ उदाहरण कोड, इसे यहाँ रख रहा है। हम इसके माध्यम से काम करने के लिए जा रहे हैं। और अगर आप घर पर कर रहे हैं, तो आप के रूप में अच्छी तरह से इस खींच सकते हैं। और मैं पहले से ही स्थापित किया है यहाँ प्रतिक्रिया है, तो आप सिर्फ यह कर सकते हैं अपने खुद के कोड लिखने, और अपने खुद के खेल का मैदान के रूप में यह कोशिश करते हैं। 

हाँ, हर किसी के लिए है, तो यहाँ इस लिंक पर खुला। मुझे एक अंगूठे दे दीजिए आप यह खुला है एक बार। कूल, शांत शांत। कुछ भी नहीं है, अब के लिए यहां नहीं है लेकिन हम बहुत जल्द ही वह बदल जाएगा। 

ठीक है, तो एक जावास्क्रिप्ट है प्रतिक्रिया पुस्तकालय, और जैसे, , जावास्क्रिप्ट के ज्ञान की आवश्यकता जो वेब प्रोग्रामिंग भाषा है। और यह अन्य बातों के लिए इस्तेमाल किया जा रहा है अब भी है, लेकिन मुख्य रूप से वेब का विकास भाषा, आप के साथ अपरिचित हैं, इसलिए यदि कि, JSforCats.com नामक एक साइट पढ़ें। यह अद्भुत है। जावास्क्रिप्ट सीख सकते हैं आधे घटें में। यह अविश्वसनीय है। 

तो यह एक पढ़ा दे। हम भी यहां क्योंकि एचटीएमएल का एक बहुत है हम निश्चित रूप से वेब पेज डिजाइन कर रहे हैं। आप के साथ अपरिचित हैं तो एचटीएमएल, HTMLdog.com की जाँच करें। मैं प्रतिक्रिया एक है सीखने लगता है लाख बार आसान पहले से ही आप यदि इमारत ब्लॉकों में पता है। आप घटक है, यह है आसान एक बड़ा घटक बनाने के लिए। यही कारण है कि आप के लिए भाषा प्रतिक्रिया है। 

तो आगे जाकर देना इन बातों को एक पढ़ा। इस वीडियो को रोकें। आप कर रहे हैं, तो यह एक पढ़ा दे आप घर पर नहीं हैं, तो HTML या जावास्क्रिप्ट के साथ परिचित ठीक है, तो हम करने जा रहे हैं ऐसा हम बनाने जा रहे है प्रतिक्रिया का उपयोग करते हुए एक बहुत ही बुनियादी flashcard अनुप्रयोग। हम एक flashcard लिए जा रहे हैं। आप आगे और पीछे कार्ड फ्लिप कर सकते हैं। और हम भी की एक सूची होगा हम है कि सभी कार्ड, और हम महसूस कर रहे हैं महत्वाकांक्षी, हम हो सकता है के बीच स्विच करने में सक्षम उन पर क्लिक करके कारों। 

लेकिन यह अपने नंगे की है, हड्डियों, एक बहुत ही सरल अनुप्रयोग प्रतिक्रिया। और इसलिए यह वास्तव में है को लागू करने के लिए तुच्छ नहीं, लेकिन हम यदि आप करते हैं, कि दिखाने के लिए जा रहे हैं यही नहीं, यह है कि यह विस्तार करने के लिए बहुत, बहुत आसान है अन्य लोगों को आप के साथ मदद करता है, तो। इसलिए हम चार चरणों के माध्यम से जाने के लिए जा रहे हैं खरोंच से शुरू इस का निर्माण करने के लिए। 

ठीक है, तो चार कदम, हम करेंगे पहले कदम के साथ शुरू। पहले कदम के लिए होने जा रहा है अपना पहला घटक निर्माण। जैसा कि मैंने पहले कहा, एक घटक में प्रतिक्रिया स्टेरॉयड पर सिर्फ एक HTML तत्व है। यह HTML निर्दिष्ट करता है और कुछ व्यवहार, और यह कैसे लोगों को निर्दिष्ट करेगा यह कैसे के साथ बातचीत कर सकते हैं यह आंतरिक स्थिति के लिए होता है। एक बटन कितने तरह पता चल जाएगा की तरह कई बार यह उदाहरण के लिए क्लिक किया गया है, और वह खुद को बाहर रखना करने के लिए कैसे पता चल जाएगा। 

तो चलो आगे जाना है और निर्माण करते हैं हमारे जावास्क्रिप्ट का उपयोग पहले घटक। वाक्य रचना अजीब लग रहा है तो, अगर यह एक तरह से है कि क्योंकि। तो, फिर से, हम जा रहे हैं कहा जाता है एक चर बनाने के लिए एप्लिकेशन कीवर्ड जाने का उपयोग कर, जो एक चर बनाता है, अनुप्रयोग बराबर React.createClass करते हैं। 

प्रतिक्रिया एक पुस्तकालय है और है कक्षा समारोह बनाएँ। और इस समारोह है कोड का एक सा है कि आप एक नया बनाने के लिए उपयोग कर सकते हैं घटक प्रतिक्रिया के प्रकार के। और तो React.createClass एक घटक है, और इस घटक होगा सामान करना करने में सक्षम हो। यह कर सकते हैं मुख्य बात यह है कि प्रस्तुत करना है कुछ है, एक समारोह के रूप में प्रस्तुत करना। 

फिर, यह सूचकांक करने के लिए स्पष्ट नहीं है तो तुम, मैं आप बिल्लियों के लिए जे एस पर जाने की सिफारिश और इसे बाहर की जाँच करें। कि काफी अच्छी तरह से में तेजी से बढ़ी है? कूल। 

इसलिए हर घटक की जरूरत एक प्रस्तुत करना समारोह है। रेंडर समारोह का कहना है, मैं स्क्रीन पर क्या प्रिंट करूं? लेकिन घटक है यदि ऐसा नहीं होता है, तो बेकार इसलिए, स्क्रीन पर क्या मुद्रित करने के लिए पता आप एक प्रस्तुत करना समारोह की आवश्यकता है। 

, आप बात रेंडर में तो बस कुछ HTML लौटने की जरूरत है। और क्या अच्छा है यह है कि कहा जाता है एक बात है का एक विस्तार है जो JSX, द्वारा प्रयोग किया जाता है कि जावास्क्रिप्ट प्रतिक्रिया। यह आप के अंदर HTML लिखने चलो अपने जावास्क्रिप्ट, की जो जब अजीब की तरह लगता है जब आप पहली बार इसके बारे में सोचना, लेकिन यह बाद में भावना का एक बहुत बनाता है। इसलिए हम यह कर सकते हैं। आप HTML के साथ परिचित हैं, तो मुझे पता है हम एक सामान्य उद्देश्य के साथ एक div है सामान के लिए कंटेनर। हम अंदर एक div लौटने के लिए, और कर सकते हैं इस div, हम सामान रख सकते हैं। 

तो चलो हम सिर्फ प्रस्तुत करना चाहते हैं, हम कहते हैं अब के लिए एक सीधे-अप flashcard। flashcard, मैं कहना चाहूँगा एक सवाल और जवाब देना होगा। इसलिए इस div के अंदर, चलो एक पैरा बाहर प्रिंट वह यह है कि क्या question-- कहते हैं जीवन के लिए परम जवाब है, ब्रह्मांड? और फिर जवाब है 42, ज़ाहिर है, होने जा रहा। 

यही कारण है कि सभी में अच्छी तरह से नहीं आया था। हाँ, तो मूल रूप से आप वास्तव में कर सकते हैं अपने जावास्क्रिप्ट अंदर एचटीएमएल लिखें। और यह होने जा रहा है स्क्रीन में बाहर मुद्रित। तो चलो इसे बाहर की कोशिश करते हैं। 

इसलिए हम अपने घटक है। हम डाल करने के लिए प्रतिक्रिया बताने की जरूरत स्क्रीन पर घटक इसलिए React.render, इसलिए सूचना है कि हम किसी भी अन्य तत्व जैसे एप्लिकेशन का इलाज। यह एक HTML तत्व था के रूप में हम यह लिखें। बजाय आइएमजी की तरह कह की तरह पैरा के लिए छवि या पी के लिए, अनुप्रयोग है, ताकि आप app लिखने एक HTML तत्व की तरह व्यवहार किया। जैसा कि मैंने पहले कहा, यह है स्टेरॉयड पर एक तत्व। 

तो आप अनुप्रयोग प्रस्तुत करना है, और आप यह इसे लगाने के लिए एक जगह दे। और यह कैसे कर सकते है जहां इसे लगाने के लिए यह बताओ। मैं एक साधारण div बनाया है पेज के एक आईडी के साथ बुलाया पेज, और कहा कि जहां तत्व जाना जा रहा है। 

और हम HTML के साथ चलाने के लिए नहीं जा रहे हैं। असल में यह हो रहा है इस पृष्ठ तत्व के अंदर डाल हम स्क्रीन पर है। तो यह इस कोड को चलाता है, और यह इस ड्रॉ स्क्रीन पर बात है, तो यहाँ हम कर रहे हैं। हम हमारी पहली प्रतिक्रिया घटक बना दिया है। 

तो बस एक संक्षिप्त रूप में, हम धीरे बनाया घटक के एक नए प्रकार, है ना? यही कारण है कि क्या React.createClass है। और कहा कि घटक में, हम यह क्या करना चाहिए यह बताया। जब भी इस घटक के लिए है स्क्रीन पर मुद्रित किया, यह div के साथ बाहर प्रिंट होगा इसके अंदर दो पैराग्राफ। 

और हम क्या किया है, हम एक नए एप्लिकेशन बनाया कोण ब्रैकेट एप्लिकेशन संकेतन का उपयोग। हम इसे लगाने के लिए यह कहा था पेज तत्व के अंदर। और इसलिए मैंने क्या किया, यह बनाया कि टेम्पलेट से एक नया app। और फिर मैं इसे प्रस्तुत करने के लिए कहा था। इसलिए यह कहा ठीक है, अनुप्रयोग, मैं क्या बाहर प्रिंट करना चाहिए? अनुप्रयोग, एक div बाहर प्रिंट जाना कहते इसके अंदर दो पैराग्राफ के साथ। और देखा, साथ हमारे div वहाँ इसके अंदर दो पैराग्राफ। अब तक समझ बनाने के लिए? 

तो, फिर से, के पूरे चुनौती प्रतिक्रिया सिर्फ घटक बनाने के लिए जानने है। कैसे बनाने के लिए घटक एक साथ काम करते हैं। अब हम अपने पहले बनाया है कि घटक, चलो वापस चलते हैं और घटकों अनुकूलन कर सकते हैं। तो अगर आप HTML में जानते हैं कि कैसे आप अपने बटन कक्षाएं दे सकता है? आप अपने एंकर href दे सकते हैं। आप अपने आदानों एक प्रकार दे सकता है? आप अधिक कस्टम दे सकते हैं अपने तत्वों के सभी के लिए गुण इसे और अधिक दिलचस्प बनाने के लिए। और हम वास्तव में क्या कर सकते हैं सटीक एक ही बात। 

तो चलो हम कहना चाहते हैं हमारे एप्लिकेशन को किसी भी कार्ड प्रस्तुत करना जाना। अभी हम सिर्फ एक हार्डकोड कार्ड प्रदान की गई। हम केवल एक ही पता है वहाँ कार्ड यह कर सकते हैं, तो हम कर रहे हैं कोशिश करते हैं और इसलिए अब इस बदलाव करने जा रहा हम सिर्फ यह कुछ कार्ड दे सकते हैं। यह कार्ड का प्रिंट आउट करेंगे। 

आप कोशिश करते हैं और बनाने चाहिए अपने घटकों एक बहुत ही सामान्य प्रयोजन। तो इस तरह से मैं ईमेल सकता है यह मेरा दोस्त है और इस तरह हो सकता है, आप जो कुछ भी flashcard, बस यहाँ में फ़ीड, और यह अपने आप में यह करूँगा। आप अन्य डाल सकते हैं अपने स्वयं के अनुप्रयोग में बातें। 

लेकिन पहले, चलो इस तोड़ देना दो घटकों में ऊपर, लेकिन हम कार्ड अलग करना चाहते हैं वास्तविक एप्लिकेशन हिस्से से मुद्रण हिस्सा है। तो हम क्या कर सकते हैं हम है App से इसे बदल सकते हैं CardView करने के लिए सिर्फ एक अनुप्रयोग के लिए नया नाम, और हम एक नया बना सकते हैं घटक, app बुलाया पुराने app के साथ भ्रमित नहीं होना चाहिए। हम createClass मिल गया है, और HTML में की तरह, आप घोंसला घटकों प्रतिक्रिया कर सकते हैं एक दूसरे के अंदर। 

, इस प्रतिपादन समारोह में तो समारोह वापसी CardView, और इस सटीक एक ही बात है। यह एक ही बात है क्यों देखते हैं? इसके बजाय सिर्फ एप्लिकेशन प्रतिपादन की है कि , इसके अंदर div और बाँधना है एप्लिकेशन CardView renders, और CardView div और पैरा प्रदान करता है। तो इस का हमारा पहला उदाहरण है एक दूसरे के अंदर घोंसले के शिकार तत्वों। समझ आया? तो, फिर से, हम एक CardView तत्व है। हम app तत्व है यह से भी बड़ा है कि। 

ठीक है, तो हम चाहते हैं कि हमारे CardView-- अगर आप एक अच्छा CardView एक निश्चित कार्ड दे, यह ठीक है, आप के लिए बाहर प्रिंट हूँ? इसलिए सबसे पहले, हम एक कार्ड बनाने की जरूरत है, तो चलो एक कार्ड वस्तु बनाते हैं। तो मेरा कार्ड जाने equal-- आप सभी परिचित हैं, यह सिर्फ संकेतन बनाने है जावास्क्रिप्ट में वस्तु। यह एक संरचना की तरह की तरह है सी में है, इसलिए हम एक कार्ड बनाया और इसलिए अब हम के रूप में इस कार्ड पारित कर सकते हैं एक संपत्ति या HTML में एक विशेषता के रूप में हमारे app करने के लिए शब्दावली। इसलिए हम इस, app कर सकते हैं कार्ड myCard बराबर होती है। 

आप इनपुट में, तुम सब जानते हैं कि कैसे इनपुट प्रकार पाठ या बटन के बराबर होती है वर्ग बूटस्ट्रैप के लिए Btn बराबरी ,? एक ही विचार है, अनुप्रयोग कार्ड बराबर होती आप ब्रेसिज़ डाल करने के लिए मिल गया है here-- अनुप्रयोग कार्ड myCard के बराबर होती है, इसलिए इस हम इस कार्ड वस्तु है कहते हैं। मैं एक के रूप में इसे पारित करने के लिए जा रहा हूँ एप्लिकेशन घटक के लिए संपत्ति। और इस एप्लिकेशन का घटक होगा इसे उपयोग करने में सक्षम हो सकता है और ऐसा इसके साथ दिलचस्प चीजें। 

इसलिए हमारे एप्लिकेशन होने जा रहा है एक कार्ड दिया, तो अब के लिए, सिर्फ देने के अनुप्रयोग करते हैं CardView करने के लिए कार्ड खुद को app नहीं है क्योंकि जैसा इसके साथ क्या करना है पता करने के लिए जा रहा है, तो हम सिर्फ CardView दे देंगे। इसलिए हम इसे पारित करेंगे उसी तरह, कार्ड, के बराबर होती है और इसलिए प्रत्येक घटक का उपयोग कर सकते हैं यह करने के लिए दिया गया है कि चीजें। वे गुण का उपयोग कर सकते हैं कि यह करने के लिए दिया गया है this.props.card, इस वाक्य रचना का उपयोग कर। 

तो यहाँ क्या होता है आप myCard वस्तु है। आप अनुप्रयोग में इसे पारित अनुप्रयोग कार्ड का उपयोग कर myCard बराबर होती है। उस कार्ड वस्तु अपने app करने के लिए दिया जाता है। एप्लिकेशन को यह तक पहुँच सकते हैं this.props.card के रूप में। यह एक छवि की तरह की तरह है यह स्रोत क्या है। 

इस एप्लिकेशन को यह कार्ड जानता है कि क्या है, और इसके साथ चीजें कर सकते हैं। यह संगणना कर सकते हैं। ऐसा लगता है कि के बंद आधारित निर्णय कर सकते हैं। 

अभी के लिए, मैं पारित करने के लिए जा रहा था CardView पर this.props.card। अब तक समझ बनाने के लिए? अब यह और अधिक समझ कर दूँगा। 

ठीक है, तो अब हम CardView पर रहे। कार्ड दिया हमारा CardView करना चाहिए, अपने सवाल और जवाब बाहर प्रिंट। अभी हम सिर्फ बाहर मुद्रित कुछ हार्डकोड सवाल और जवाब। हम जरूरत out-- लगाने की जरूरत है वे हमें दे दिया है कि कार्ड में पूछने के लिए क्या सवाल और जवाब है, और फिर स्क्रीन में इस प्रिंट आउट। 

इसलिए हम यहां कर सकते हैं। में पहली बराबर होती करते begin-- प्रस्तुत करना। तो क्या हम यहाँ क्या कर रहे हैं कि हम जानते हैं कि है कार्ड, एक संपत्ति के लिए हमें दिया जाता है है ना? यह एक निवेश के रूप में हमें करने के लिए दिया है। यह लगभग की तरह है जैसा एक समारोह के लिए तर्क। कार्ड एक तर्क है लगभग इस CardView करने के लिए। 

हम उस निकालने, और डाल देता हूँ यह चर सवाल में। यकीन है कि इस सवाल का जवाब चला गया बनाओ चर जवाब देने के लिए। कार्ड जवाब देने के लिए है कि संकेत देता है। और अब हम इन किया है कि, बजाय कि पाठ बाहर मुद्रण की, हम बाहर मुद्रित करने के लिए जा रहे हैं वे जो कुछ भी हमें दिया है। 

तो यह तो हम जा रहे हैं stuff-- सवाल जवाब बाहर रख दिया। यह काम करता है तो चलो देखते हैं। कूल, तो हम इसके माध्यम से कदम चलो एक बार और बस सुनिश्चित करने के लिए। 

तो मेरा कार्ड कार्ड वस्तु है, और हम एप्लिकेशन को लगता है कि कार्ड दे रहे हैं। और एप्लिकेशन को ले जा रहा है कार्ड और यह CardView करने के लिए दे। और इस CardView अगर आप कहते हैं, मुझे किसी भी flashcard वस्तु देना मैं अपने सवाल का प्रिंट आउट करेंगे और इसका जवाब है, है ना? 

तो मैं क्या कर सकता है मैं कर सकता है पहली बार इस कोड भेज मेरे दोस्त के लिए अपने कोड की 10 लाइनों की तरह। उन्होंने कहा कि यह में एम्बेड सकता अपने खुद के आवेदन। और वह एक ही बात किया था के रूप में लंबे समय के रूप में, , CardView कार्ड इस के बराबर होती है जैसे वह CardView बनाया के रूप में लंबे समय और यह सही जानकारी दे दी है, वह अपने ही कार्ड प्रदान सकता है। और इसलिए इस तरह से, यह एक सच है आप का निर्माण करने के लिए अच्छा तरीका ठीक है, एक-दूसरे का उपयोग करने वाले घटकों? यह कार्ड, मैं प्रकाशित कर सकता है इंटरनेट पर इस CardView, और लोगों को इसका इस्तेमाल करने में सक्षम होगा। तो बुनियादी तौर पर, इसमें से एक की तरह है सी पुस्तकालय में मानक कार्य करता है। 

यह एक समारोह जहां है किसी ने इसे लिखा है। आप एक निश्चित इनपुट दे। यह एक निश्चित उत्पादन का उत्पादन करेंगे। आप यह आंतरिक कैसे काम करता है परवाह नहीं है। जब तक आप यह अधिकार देने के रूप में इनपुट, यह सही उत्पादन कर दूँगा। 

और एक घटक हो सकता है एक ही तरीका है के बारे में सोचा। इस CardView की तरह है एक पुस्तकालय समारोह। आप इसे कुछ कार्ड देते हैं एक संपत्ति के रूप में, यह हूँ कि कार्ड की सामग्री बाहर प्रिंट। मैं करने के लिए अपने कार्ड को बदलने जैसे कि अगर बजाय 5 प्लस 37 में क्या है की तरह हो सकता है, यह तदनुसार अपडेट हो जाएगा। तो बस इनपुट बदलकर, यह एक निश्चित उत्पादन हो जाता है। तो आप लगभग घटकों के बारे में सोच सकते हैं इस तरह से काम करता है, के रूप में जो आप एक साथ रख सकते हैं। आप इस CardView तरह, इनपुट मिल इनपुट के रूप में, आप आउटपुट मिलता है। इस मामले में, उत्पादन HTML है। अब तक समझ बनाने के लिए? कूल, तो फिर, गुण हैं आप जानकारी के पास कैसे कर सकते हैं में और घटकों के बाहर। 

ठीक है, तो चलो इस बनाते हैं बात इंटरैक्टिव। अभी यह बोरिंग की तरह है। [अश्राव्य] क्या है? तुम्हें पता है, कुछ बाहर प्रिंट कर सकते हैं लेकिन लगता है कि यह सब कर सकते है। 

तो चलो के लिए वापस जाओ बस अभी के लिए पुराने सवाल। ठीक है, तो ठीक है अब इन घटकों सभी वे करते हैं क्योंकि बोरिंग कर रहे हैं, वे इनपुट मिलता है। वे उत्पादन, सही बनाने के लिए? यही कारण है कि बोरिंग की तरह है। हम हमारे लिए है चाहता हूँ घटकों के लिए सक्षम होना करने के लिए आंतरिक स्थिति को किसी तरह का, की तरह कुछ याद है। 

एक flashcard के लिए, के लिए राज्य के उदाहरण, किस तरह आप चाहते हो सकता है एक flashcard के लिए याद है? क्या अस्थायी स्थिति आप को याद करने के लिए चाहते हो सकता है एक flashcard अनुप्रयोग में एक flashcard के लिए? दर्शकों: यह फ़्लिप किया गया है या नहीं? नील मेहता: हाँ, सही। तो आप को बनाए रखने के लिए चाहते हो सकता है का ट्रैक आप का सामना कर रहे हैं या कर रहे हैं आप कार्ड पर नीचे चेहरा। फेसबुक पर, उदाहरण के लिए, तुम होगा समाचार फ़ीड में जहां याद रखना चाहते हैं आप कर रहे हैं या प्रोफ़ाइल जो पसंद आप अभी कर रहे हैं। 

मैसेंजर, पर क्या पाठ आप की तरह ठीक है, इनपुट बॉक्स में टाइप करें? आप पेज को ताज़ा करते हैं, तो यह दूर हो जाता है। लेकिन अगर आप वास्तव में परवाह नहीं है। यह सिर्फ अस्थायी है। हाँ? 

दर्शकों: [अश्राव्य] नील मेहता: एक फ्लैश की तरह कार्ड, आप देख जा सकता है जैसे सवाल पक्ष या उत्तर की ओर? 

दर्शकों: ठीक है। 

नील मेहता: की तरह एक ठीक है, flashcard दो तरफा? हाँ, तो आप करना चाहते हैं अब का यह विचार है मैं, आदानों की तरह है, जो गुण है लेकिन उह, अस्थायी है, जो राज्य, आप पृष्ठ पर हैं जहां, है ना? फिर, मैं फेसबुक में कहा मैसेंजर, मैं जो व्यक्ति की तरह है आप फेसबुक देख रहे हैं या कौन सही, प्रोफ़ाइल है? 

यह केवल अस्थायी है। यह उपयोगकर्ता को दिखाने के लिए महत्वपूर्ण है क्या हो रहा है, लेकिन पृष्ठ ताज़ा है। यह वास्तव में कोई फर्क नहीं पड़ता। इसलिए यह अस्थायी स्थिति है इसलिए हम सब यह राज्य। 

तो, फिर से, राज्य और सहारा नहीं है। सहारा इनपुट दिया जाता है आपके डेटा स्रोत से। राज्य सिर्फ चूक की तरह है। यह सिर्फ सामान की तरह है कि बात इंटरैक्टिव बना देता है। 

में तो हमारे CardView-- के चलो हमारे CardView-- यह अच्छा था इसलिए। हम यहाँ क्या करने जा रहे हैं क्या, हम जा रहे हैं CardView और केवल CardView को छूने के लिए। और तो मेरे दोस्त यह है कि वे, जो मिल गया कोई अंतर नोटिस नहीं होगा। वे बदलने के लिए नहीं होता अपने खुद के कोड के किसी भी, लेकिन वे देखना चाहते हैं उनके CardView को souped गया। यही कारण है कि घटकों के बारे में एक अच्छा हिस्सा है। 

ठीक है, हमारे CardView में तो, चलो कोशिश करते हैं और हम चरण रहे हैं कि क्या का ट्रैक रखने या नीचे का सामना। प्रतिक्रिया में हम पहले से यह करते हैं प्रारंभिक अवस्था को निर्दिष्ट। कहाँ कार्ड शुरू करता है? 

तो getInitialState नामक एक समारोह हो समारोह है, और हम एक वस्तु वापसी। इस वस्तु, कुछ राज्य शामिल हैं और एक राज्य में सिर्फ एक महत्वपूर्ण मूल्य जोड़ी है। हिदायत में की तरह, आप एक चाबी और एक है नाम एक स्ट्रिंग है जैसे मूल्य, तुम्हारे पास है। 

इस मामले में, के सामने सच है हम कहते हैं। यह है कि हम एक राज्य है कि कहते हैं। राज्य के एक घटक सामने नामक एक विशेषता है। [अश्राव्य], डिफ़ॉल्ट रूप से तो, हम कार्ड का सामने कर रहे हैं, और हम इसे बदल सकते हैं के रूप में हम कार्ड फ्लिप। सही बात? 

ठीक है, तो में अब ठीक है, हम कर रहे हैं, प्रस्तुत करना सवाल और जवाब दिखा। अब हमें क्या करना चाहिए सवाल दिखाने है हम कार्ड के मोर्चे पर हैं, इसलिए यदि जवाब कार्ड के पीछे के लिए ही है। आप सभी करते हैं यही कारण है कि कार्ड इंटरैक्टिव। तो चलो और यह करने के लिए यहाँ की कोशिश करते हैं। खैर, सबसे पहले सिर्फ एक चर बनाते हैं। हम this.state.front अब पूछ सकते हैं। हम एक ही हम राज्य का उपयोग पहुँच सहारा, इसलिए this.state.front। 

हम सामने हो, तो पाठ this.props.card.question है। हम के मोर्चे पर कर रहे हैं कार्ड, हम कोशिश करते हैं और हड़पने के लिए जा रहे हैं कार्ड से सवाल। अन्यथा, हम वापस पर हैं कार्ड की, हम क्या करें? 

दर्शकों: जवाब? 

नील मेहता: हाँ, तो पाठ this.props.card.answer बराबर होती है। लेकिन अगर तुम नोटिस, हम प्रयोग कर रहे राज्य के एक निर्णय करने के लिए अब घटक क्योंकि अलग दिखेगा इन के साथ बातचीत कैसे बंद आधारित है। तो बजाय यह बाहर मुद्रण की, हम सिर्फ पाठ का प्रिंट आउट करेंगे। कूल, अब तो, जैसा कि आप देख, हम केवल सवाल देखें। और मैं स्वयं यहां राज्य को बदलते हैं सामने गलत है करने के लिए हम 42 वापस मिलता है। 

तो, फिर से, इस घटक अपने ही राज्य है। एक बटन है कि क्या जानता है यह दबाया है या नहीं किया गया है इस बात पर है कि क्या जानता है सामने या पीठ पर। डिफ़ॉल्ट रूप से, यह मोर्चे पर है। और फिर यह मोर्चे पर है, हम सवाल का प्रिंट आउट करेंगे। यह पीठ पर है तो, हम करेंगे जवाब बाहर प्रिंट। तो, फिर से, के बारे में जानकारी दी ही है। यह सिर्फ अलग लग रहा है आप इसे कार्यक्रम कैसे पर आधारित है। तो, उदाहरण के लिए, फेसबुक मैसेंजर, आप एक ही डेटा स्रोत हो, भले यह अलग लग सकता है राज्य में अलग है क्योंकि। आप एक पर देख रहे हैं अलग व्यक्ति के संदेश। 

ठीक है, तो यह सब कुछ ठीक है और अच्छा है, लेकिन अब क्या वास्तव में है चाहे वह बदलने के लिए हमें सक्षम बनाना हमारे कार्ड सामने या वापस आ गया है। हम एक फ्लिप जोड़कर यह कर सकते हैं बटन, कार्ड के लिए एक बटन है कि यह [सुनाई] अगर कार्ड फ्लिप जाएगा। तो चलो, यहाँ यह एक बटन जोड़ दें बटन, और इस बटन फ्लिप कहेगा। 

और इसलिए अब ठीक है, यह कुछ भी नहीं है। यह सिर्फ अच्छा लग रहा है। हम क्या कर सकते हैं कि हम एक क्लिक जोड़ सकते है हैंडलर, onclick, this.flip के बराबर होती है और हम बाद में फ्लिप को परिभाषित करेंगे। लेकिन मूल रूप से, onclick एक समारोह है कि यह उपयोगकर्ता क्लिक करता है जब बुलाया जाता है। 

तो बटन को पता चल जाएगा यह क्लिक किया गया है जब। यह क्लिक किया गया है चला गया, यह कार्ड फ्लिप जाएगा। यह अपने तरह की तरह है पिज्जा डिलीवरी आदमी। आप की तरह सब ठीक कह रहे हैं, जब भी किसी को मैं सही, पिज्जा वितरित करेंगे, मुझे कहता है? 

आप इस श्रोता रजिस्टर। आप एक घटना के लिए सुनो। कहा जाता है, और जब मिल घटना आप कुछ करते हैं, क्या होता है। आप पिज्जा मिलता है। इस मामले में, आप जब रहे क्लिक किया, आप कार्ड फ्लिप। 

और इसलिए हम एक परिभाषित करने की जरूरत कार्ड फ्लिप जाएगा कि समारोह, इसलिए हम चाहते हैं कि सही लिख देंगे यहाँ, समारोह फ्लिप। और तो आप फ्लिप क्या करेंगे लगता है? फिर यह जब बुलाया जाता है हम फ्लिप बटन पर क्लिक करें। समारोह फ्लिप क्या करना चाहिए? 

दर्शकों: बदलें this.state.front सच से सच करने के लिए झूठा, गलत करने के लिए। 

नील मेहता: हाँ, तो ले जो कुछ भी this.front सामने राज्य है है-। यदि, सामने राज्य लो यह यह झूठा बनाने, सच है। यह गलत है, तो ठीक है, यह सच है? तो चलो कि कोशिश करते हैं। 

आप राज्य को बदल नहीं सकते सिर्फ this.state कर रही द्वारा। यदि आप ऐसा नहीं कर सकते हैं। तुम ऐसा नहीं कर सकते हैं। आप एक समारोह का उपयोग करने के लिए है this.setState बुलाया। 

तो अगर आप this.setState सामने कह सकते हैं पेट के इस जहां, फिर से, विस्मयादिबोधक बिंदु विपरीत मतलब है। मैं अगर यह लगता है। state.front सच है, यह गलत बदल देंगे। इसलिए हम राज्य स्थापित करेंगे सच से गलत करने के लिए। यह गलत है, तो हम करेंगे सच करने के लिए यह गलत निर्धारित किया है। 

बस हम सेट और थोड़ा मिलता है कि नोटिस अलग ढंग से, और इसलिए हम इस कोशिश करते हैं। बडा बिंग, यह देखो। फ्लिप बटन अब होगा राज्य वापस करने के लिए सामने स्विच। 

आप एक को देख जहां और इसलिए यहाँ है प्रतिक्रिया के जादू का छोटा सा। हम यह कभी नहीं बताया की तरह यह फिर से प्रस्तुत करने के लिए। हम इसे कुछ भी redraw कभी नहीं बताया। आप यह कर रहे हैं प्रतिक्रिया के बिना, आप चाहते हैं जब है-- पसंद है फ्लिप बटन, क्लिक किया जाता है आप यह बताने के लिए होता है मैन्युअल सही, फिर से प्रस्तुत करना? 

वास्तव में शांत है प्रतिक्रिया है कि आप यदि यह एक निश्चित राज्य और गुण दे, यह हमेशा प्रस्तुत करना होगा सटीक एक ही बात। और इसलिए हम कभी जब हम बदलने राज्य और गुण, प्रतिक्रिया अभी पूरी बात को फिर से बना देता है। यह एक है कि वहाँ जानता है प्रत्येक से अलग पत्राचार राज्य और पैरामीटर और एचटीएमएल के बीच। इसलिए जब भी उन दोनों में से किसी एक सेट राज्य के माध्यम से परिवर्तन, यह कैसे बदल जाएगा वेतन को फिर से गाया है। और तो मूल रूप से प्रतिक्रिया की तरह है आप को बदलने के लिए इंतज़ार कर रहे। 

जब भी यह कुछ बदलता है, यह पूरे पृष्ठ फिर से प्रस्तुत करेंगे। और यह अक्षम लगता है, यह होगा, क्योंकि यह है लेकिन प्रतिक्रिया एक बात का उपयोग करता है एक छाया डोम बुलाया। इसके बजाय सीधे पेज ड्राइंग का, यह स्मृति में आभासी एचटीएमएल पेड़ रहता है। 

तुम्हें पता है, एचटीएमएल एक पेड़ की तरह है, एक श्रेणीबद्ध डेटा संरचना की तरह। यह स्मृति में एक नकली पेड़ रहता है और आप पृष्ठ अद्यतन जब भी, यह एक और फर्जी आकर्षित करेंगे पेड़, और यह गणना करेंगे क्या इसे बनाने के लिए बदलने की जरूरत है पेज दो पेड़ों को बराबर करने की। तो बुनियादी तौर पर, यह वस्तुतः एक बहुत फिर से बना देता है। और फिर यह केवल तरह परिवर्तन छोटे tweaks में पेज जरूरत के रूप में, इसलिए यह बहुत, बहुत, बहुत ही कुशल है। 

तो बुनियादी तौर पर प्रतिक्रिया होगी जब भी आप कुछ बदलने, यह फिर से प्रस्तुत करना वस्तुतः पेज करेंगे। यह मैं की क्या ज़रूरत है समझ से बाहर हूँ वास्तविक पेज को प्रतिबिंबित करने के लिए बदल आभासी पेज है, और यह कि क्या करेंगे। यही कारण है कि आभासी डोम है। यह सबसे बड़ी में से एक है की सुविधाओं प्रतिक्रिया। 

समझ आया? कोई सवाल? हाँ? 

दर्शकों: कैसे करता है MVC करने के लिए अभी भी तुलना हम के बारे में बात की है कि जैसे संसाधनों से पहले। 

नील मेहता: हाँ, सवाल यह MVC की तुलना करता है कि कैसे है? आप संसाधनों के बारे में पूछा। ठीक है, चलो यह कैसे कार्य के बारे में बात करते हैं। 

MVC में, आप मॉडल को अद्यतन चाहते हैं। इस मामले में हम एक कार्ड मॉडल होगा। दृश्य होता है फ्लिप बटन, और नियंत्रण फ्लिप समारोह होगा। तो देखने को बताना होगा नियंत्रक फ्लिप फ्लिप करने के लिए। फ्लिप बताना होगा बदलने के लिए मॉडल, है ना? 

और इसलिए तुम एक MVC आप करते हैं, जब मॉडल बदलने के लिए सुनो, और आप फिर से प्रस्तुत तदनुसार देखें। या आप बस पसंद करने के लिए है नियंत्रक है। उसके बाद मॉडल को बदलने के लिए प्रतीक्षा करें, और उठाओ और एक बात की तरह का एक हिस्सा चुनें बदलने के लिए। यहाँ हम एक बात है, लेकिन एक बड़ा अनुप्रयोग में, आप क्या याद पसंद करने के लिए है हर एक जगह में परिवर्तन, तो यह एक छोटे से परेशान है। और तो अच्छा है प्रतिक्रिया यह एक छाया डोम किया है। यह सिर्फ करने के लिए खर्च कर सकते हैं पूरी बात को फिर से लिखना। आप चुनिंदा नहीं करना पड़ेगा जैसे अद्यतन करने के लिए लगता है क्या। 

फेसबुक पर अगर आप की तरह MVC में एक नया संदेश मिलता है, आपको याद करने के लिए होगा ठीक है, चीजों को बदलने के शीर्ष पर पेज, संदेश आइकन। इसके अलावा तल पर एक नई विंडो पॉप। इसके अलावा उस खिड़की में एक नई बात करते हैं। इसके अलावा एक ध्वनि खेलते हैं। 

यही कारण है कि सामान का एक बहुत कुछ है एक ही समय में बाहर जा रहा है। और अगर आप ऐसा नहीं करते, इसलिए यदि एक छाया डोम है, आप चाहते हैं कि मैन्युअल क्योंकि क्या करना है आप पूरे पेज से छुटकारा नहीं मिल सकता। आप बर्दाश्त नहीं कर सकता है, तो आपके पास स्वयं हर चीज को बदलने की, जो MVC में वास्तव में गुस्सा है। 

तो क्रम में होना मितव्ययी, वे चुनिंदा है, जो पृष्ठ को अद्यतन कुशल, लेकिन यह भी गुस्सा आ रहा। में क्योंकि छाया की प्रतिक्रिया डोम, आप मुक्त करने के लिए दोनों चीजें मिल। यह कुशल है, क्योंकि छाया डोम की। टोंटी पेज अद्यतन कर रहा है। यह पेड़ हेरफेर नहीं कर रही है। आप दक्षता मिलता है। तुम भी उपयोग में आसानी है क्योंकि मिल तुम सिर्फ पूरे पृष्ठ को फिर से लिखना है, तो लेकिन आप अभी है, ठीक है, बातें पता कहीं पेज पर होने जा रहे हैं। यह एक अलग जगह में हो सकता है, लेकिन हो सकता है यह सही है, पेज पर होने जा रहा है? तो अगर आप बस फिर गाया पूरी बात वस्तुतः और आप एक जोड़ी बना सकता है पृष्ठ ही में परिवर्तन। 

तो, फिर से, MVC आप में का चयन करने के लिए होता है उपयोग और दक्षता में आसानी के बीच, और आप दोनों को मिलता है, प्रतिक्रिया। इसलिए यह बेहतर है। सही बात? ठोस। 

ठीक है, तो चलो बात करते हैं, देखते हैं चरण 4 के बारे में एक छोटा सा है, हम कैसे घटकों एम्बेड कर सकते हैं। तो क्या अब हम इस अधिकार है। हम अपने शांत छोटे बटन है। हम इसे वापस फ्लिप कर सकते हैं और आगे है, और कहा कि यह सब होता है। हम करने के लिए कहना चाहते हैं एक और घटक है। चलो हमारे flashcard एप्लिकेशन चाहिए हम कहते हैं सभी कार्ड की एक सूची शामिल तुम्हारे पास है, इसलिए है कि हम इसका मतलब है कि एक और घटक होना चाहिए। वैसे, शायद एक सूची दृश्य कहते हैं। की एक सूची दृश्य कर दूं कि CardView साथ coexists, और इस सूची को देखने और CardView एक साथ काम करना पसंद करेंगे। और आप उन्हें गठबंधन कर सकते हैं आप के लिए हमारे app बनाने के लिए। 

तो पहले, चलो एक कर देना जोड़े को और अधिक कार्ड सही। हम कहते हैं, क्या कार्ड? और अभी तो मैं नहीं करना पड़ेगा उस में टाइपिंग के साथ बोर आप, मैं बस यहाँ से कॉपी करने के लिए जा रहा हूँ। और इसलिए मैं नहीं जा रहा हूँ यह सिर्फ एक कार्ड दे। मैं यह कार्ड की एक सरणी देने के लिए जा रहा हूँ। तो पहले क्षुधा अब के लिए तोड़ने के लिए जा रहा है। ठीक है, तो हम करने जा रहे हैं इस में सक्षम कई कार्ड संभालने के लिए। इसलिए सबसे पहले, हम इसे देने के लिए नहीं जा रहे हैं सिर्फ एक कार्ड है, लेकिन कार्ड की एक सरणी, ताश के पत्तों की एक सूची की तरह। और इस मामले में, हम उनमें से तीन लोगों की है। 

ठीक है, app है इतना तो एक सूची कार्ड पाने के लिए जा रहा है, और यह तय करने के लिए हो रहा है, जो एक CardView को दिखाने के लिए। CardView ही कर सकते हैं एक कार्ड है, लेकिन एप्लिकेशन प्रस्तुत करना ठीक है, सभी कार्ड की एक सूची हो जाता है? 

तो अगर आप एक बाहर निकालने के लिए जब कार्ड, CardView को देने के लिए क्या आप सक्षम हो सकता है लगता है कि कैसे एक निर्णय करने के लिए जो कार्ड के बारे में दिखाना? आप एक संकेत देने के लिए, यह अस्थायी है आप एक निश्चित कार्ड देखने दिया जाएगा। आप पेज को ताज़ा करते हैं, तो आप हूँ अभी वापस पहले कार्ड के लिए जाना। यह अस्थायी है क्योंकि यह ठीक है। हम क्या तकनीक का इस्तेमाल हो सकता है? 

दर्शकों: आप एक चर कर सकता है इसलिए आप सामने था बस की तरह। क्या यह सच है, तुम सकता है वर्तमान कार्ड 1 के बराबर होती है? 

नील मेहता: हाँ, हम तो ठीक है, राज्य के लिए करना चाहते हैं? आप ने राज्य का प्रयोग करेंगे घटक बाहर निकालने के लिए जो कार्ड हम प्राप्त करना चाहते हैं। की तरह हम की एक सूची है सभी कार्ड, हम करेंगे यह पता लगाने के लिए राज्य का उपयोग पहले कार्ड में से एक, इतने पर दूसरा कार्ड, तीसरे कार्ड, और। 

तो एक app तो एक बॉक्स में एक मिल जाएगा , getInitialState समारोह है getInitialState समारोह वापसी। और हम बस activeIndex 0 कहूँगा। तो अब हमारे app यह है खुद के राज्य है। 

और इसलिए अब यह पता लगाने की, प्रस्तुत करना एक कार्ड, चलो बस सरणी के लिए चलते हैं और कहा कि सूचकांक में बात ले लो। चुनें कार्ड बराबर this.props.cards this.state.activeIndex। आप यहाँ देख तो, जैसा कि रंगमंच की सामग्री और राज्य वास्तव में एक साथ काम करते हैं। तो अब हम हमारे activeCard है कि, हम यह activeCard फोन करता हूँ और अगर यह काम करता चलो देखते हैं। [अश्राव्य] 

ओह, यह एक पाठ त्रुटि थी। आह। 

कूल, हां, तो अब हम वापस आ रहे थे हम पहले थे, जहां सही करने के लिए? सिवाय एक ही पुराने कार्यक्रम अब हम समर्थन कर सकते हैं ताश के पत्तों की एक सूची है, न सिर्फ एक कार्ड। और अब, फिर से, हम बदलते हैं activeIndex, हम 0-1 जा सकते हैं और अब लगता है कि दूसरा कार्ड, और फिर हम 0 करने के लिए चला गया। तो यहाँ एक नया है souped अप हमारे के संस्करण। 

ठीक है, तो अब की एक सूची दृष्टि से देखते हैं कि चलो अपने कार्यक्रम में सभी कार्ड से पता चलता है तो हम एक नया बना देंगे घटक सूची दृश्य बुलाया। सूची दृश्य react.createClass के बराबर होती हैं। इसलिए हम एक unordered प्रस्तुत करना चाहते हैं हर कार्ड के लिए एक सूची आइटम के साथ सूची। और इसलिए हम ताश के पत्तों की एक गुच्छा है। हम एक सूची आइटम चाहते हैं हर कार्ड के लिए, है ना? हम एक पाश के लिए कर सकता है या कुछ एक नई सूची आइटम बनाने के लिए। लेकिन जिस तरह से आप इसे करते हैं प्रतिक्रिया, नक्शा नामक एक बात का उपयोग करें। मानचित्र के लिए एक उपकरण या आप का उपयोग एक समारोह है कि हर आइटम के लिए, कुछ कार्य चलाता है, वापसी मान लेता है, और आपको लगता है कि वापस देता है। 

एक उदाहरण के रूप में, हम सरणी है तो 1, 2, 3.map function-- और इस एक के लिए आशुलिपि है function-- एक्स तीर एक्स बार एक्स। यह हर नंबर के लिए कहते हैं, 1, 2, 3 में, इसे ले जाओ। यह वर्ग है, और यह वापस दे। तो अगर आप एक क्या लगता है, 2, 3.map एक्स एक्स बार करने के लिए चला जाता है एक्स आप वापस दे दिया देता है इस समारोह है कि उस सरणी के प्रत्येक तत्व पर चलाते हैं। 

दर्शकों: 1, 4 9? 

नील मेहता: हाँ, 1, 4, 9 आप एक बार 1 करते हैं। यही कारण है कि आप एक देता है। यह पहला तत्व है। 

2 बार 2 से 4 है। यही कारण है कि एक दूसरा तत्व है। 3 गुना 3 9 है। यही कारण है कि एक तिहाई तत्व है। सही बात? तो नक्शा एक तकनीक आप है कार्यात्मक प्रोग्रामर में उपयोग करते हैं, की नई शैली कुछ करने के लिए प्रोग्रामिंग अपनी सूची में प्रत्येक तत्व के लिए। और इसलिए इस परिचित लगता है। हम ताश के पत्तों की एक सूची है। हम हर एक के लिए एक सूची आइटम प्राप्त करना चाहते हैं एक है, तो हम यहाँ सिर्फ नक्शे का उपयोग करेंगे। हम सूची के बराबर होती है, चलो कहूँगा this.props, कार्ड, नक्शा। 

और इसलिए हम कर रहे हैं, एक कार्ड दिया सूची आइटम उत्पन्न करने के लिए जा रहा यह की है कि कार्ड की सामग्री को पक्ष के साथ। चलो बस हम बाहर देने के लिए कहना चाहते हैं कार्ड तो card.question सवाल। तो इस सूची में शामिल है एक ली की या सूची आइटम की सरणी जहां एक सूची है हर कार्ड के लिए आइटम, और उस कार्ड के सवाल होते हैं। सही बात? 

कूल, तो अब चलो वास्तव में है कि बाहर प्रिंट। तो हम एक उल वापस आ जाएगी। कि unordered सूची के अंदर, हम अभी पूरी सूची रहना होगा वे हमें दे दिया है। कूल। 

ठीक है, तो अब इस सूची दृश्य सिर्फ मिल कर काम करता है। सूची दृश्य के बारे में कोई सवाल? आप कार्ड का एक गुच्छा है। आप हर कार्ड के लिए एक सूची आइटम बनाते हैं। और अगर आप एक unordered अंदर डाल सूची, और आप इसे वापस दे। तो अब तो हम एम्बेड में कार्य करते हैं हमारे अनुप्रयोग के इस के अंदर, इसलिए हम सूची दृश्य ऐसा कर सकते हैं। क्या तर्क है कि हम दृश्य को सूचीबद्ध करने के पास है? क्या गुण है कि हम इसे देना है? तुम्हें दे, तो याद रखें यह कार्ड का एक गुच्छा, यह सूची बना देंगे उन कार्ड के लिए देख सकते हैं। तो हम क्या पारित होगा यहाँ तर्क के रूप में? दर्शकों: कार्ड की एक सूची? नील मेहता: हाँ, कार्ड, इसलिए ठीक है, this.props.cards के बराबर होती है? और इतना ही समस्या कि आप ही कर सकते है प्रस्तुत करना, में एक शीर्ष स्तर तत्व निष्क्रिय इसलिए यदि आप एक div में लपेट के लिए मिल गया है। यह अजीब है। तो चलो कि अगर देखते हैं। वह काम करता है? 

हाँ, वहाँ तुम जाओ। तो अब हम एक सूची है तल पर ताश के पत्तों की, और फिर हम अपने है शीर्ष पर ही CardView, और उस के बीच फ्लिप जाएगा कार्ड के दो पहलू। अब मुझे लगता है कि कैसे किया कि समझ पड़ता है? हाँ, तो फिर, हम दो घटक है। पहले घटक प्रिंट बाहर सूची में हर कार्ड। यही कारण है कि सूची दृश्य है। और दूसरा घटक सिर्फ इतना है कि कार्ड बाहर प्रिंट। आप इसे एक निश्चित कार्ड दे, तो यह हूँ उस कार्ड के बारे में जानकारी का प्रिंट आउट और आप आगे और पीछे फ्लिप। 

अगर हम चाहते हैं, हम कोशिश करते हैं और बात कर सकते हैं इस के लिए कुछ नई सुविधाओं को जोड़ने के बारे में। अन्यथा हम थोड़ा और अधिक बात कर सकते हैं रिएक्टर के वेग के बारे में, या हम जवाब कर सकते हैं सवाल हो सकता है आप इन क्योंकि मुख्य भागों के सभी कर रहे हैं के बारे में मैं बात करना चाहता हूँ कि प्रतिक्रिया। हम आगे जा सकते हैं। हम सवालों का जवाब कर सकते हैं। जो तुम्हे चाहिये। 

दर्शकों: आप उपयोग कर सकते हैं सामान्य जावास्क्रिप्ट में JSX? या कि कुछ है कि [अश्राव्य] के साथ आया था? 

नील मेहता: सवाल कर सकते है आप सामान्य जावास्क्रिप्ट के साथ JSX का उपयोग करें? इसका जवाब है हाँ। JSX बस के एक तरीका है अपने लेता है इसके अंदर एचटीएमएल है कि जावास्क्रिप्ट, और यह जावास्क्रिप्ट में संकलित है कि इसके अंदर एचटीएमएल के पास नहीं है। तो इसलिए यहाँ नोटिस that-- नोटिस। आप div की तरह है जैसे यह लग रहा है और आप इसे के अंदर सामान है। 

यही कारण है कि जावास्क्रिप्ट को संकलित है कि जैसे एक ही बात को उत्पन्न करता है। मैं क्या मैं कह रहा हूँ कि लगता है यह है की तरह JSX, बस एक वाक्यात्मक है जावास्क्रिप्ट के लिए एक पूर्वप्रक्रमक ज्यादा PHP जैसे HTML के लिए एक पूर्वप्रक्रमक है। जेएससी एक पूर्वप्रक्रमक है जावास्क्रिप्ट के लिए कि सुविधा देता है आप अपने जावास्क्रिप्ट के अंदर एचटीएमएल डाल दिया। और हां आप सही ट्रांसफार्मर है, तो जो [सुनाई] नामक एक बात है, जो बदलना होगा। सही पूर्वप्रक्रमक, यह आप ऐसा कर दूँगा। 

दर्शकों: [अश्राव्य] नील मेहता: आमतौर पर आप की जरूरत नहीं जावास्क्रिप्ट के अंदर एचटीएमएल डाल करने के लिए अपने कर रही है, जब तक कि प्रतिक्रिया। लेकिन आप यह भी कर सकते हैं। हाँ? 

दर्शकों: मैं आपको लगता है प्रतिक्रिया बताया था एक कार्यात्मक प्रोग्रामिंग भाषा के रूप में। हम CS50 में सी सीख रहा हूँ। सी भी एक कार्यात्मक भाषा है? नील मेहता: तो सवाल कार्यात्मक के बारे में है नामक एक और बात यह है कि बनाम जरूरी या प्रक्रियात्मक प्रोग्रामिंग। लोकप्रिय कार्यक्रमों में से दो प्रकार के होते है। एक, प्रक्रियात्मक कहा जाता है जो , सब कर आदेशों की तरह के बारे में है और एक जो सब है, कार्यात्मक है कार्यों होने और होने के बारे में इनपुट और उन का उत्पादन। प्रतिक्रिया एक कार्यात्मक प्रतिमान है। सी एक बहुत प्रक्रियात्मक प्रतिमान है। 

और एक उदाहरण के रूप में, उदाहरण के लिए सी, आप इस कथात्मक रास्ता नहीं करते कार्यक्रम बनाने का, है ना? तुम कहना है, इस प्रिंट। इस डेटा संरचना को बदलने। इस प्रिंट। यह सभी आदेशों के बारे में है। 

प्रतिक्रिया में, वहाँ नहीं है कि कई आदेशों। यह होने के बारे में सब है घटकों आप एक साथ डाल दिया। वे कार्यों की तरह कर रहे हैं। आप एक समारोह की तरह है CardView कहा जाता है, जो एक समारोह है कि, इनपुट, आउटपुट है और इसलिए प्रतिक्रिया सब है इस दर्शन के बारे में आप डेटा है having-- की हमें। आप इस के माध्यम से इसे पारित एल्गोरिथ्म, और यह करेंगे उत्पादन HTML कि आप बस पृष्ठ मुद्रित, और इसलिए आप के लिए है यह टुकड़ा टुकड़ा करके निर्माण। 

ऐसा करने के लिए एक रूपक आकर्षित करने के लिए क्या जैसा कि मैंने पहले कहा, आप जानते हैं कि कैसे फेसबुक पर आप एक संदेश मिलता है और आप को अद्यतन करने के लिए क्या भागों का चयन, कि प्रक्रियात्मक है। यह ठीक है, जरूरी है? ठीक है, मैं एक संदेश मिला है। वहाँ अकाउंट को बदल दें। 

चलो यहाँ एक विंडो पॉप करते हैं। वहाँ अकाउंट को बदल दें। यहाँ इस आकर्षित करते हैं। यही कारण है कि एक प्रक्रियात्मक दृष्टिकोण है। 

यही कारण है, कोणीय की तरह क्या चीजें है बूस्ट, रीढ़ की हड्डी, अन्य चौखटे का उपयोग करें। प्रतिक्रिया कार्यात्मक है। यह एक बहुत ही अलग तरीका है की चीजों के बारे में सोच रही है। यह है यह बताने के इस विचार लेता है कार्य या कि तुम जाएगा एल्गोरिदम यह डेटा दे। उसे थूक करेंगे क्या यह कंप्यूटर होना चाहिए, और बाहर वजन का ख्याल रखना होगा। आप इसे अपने आप को संभाल नहीं है। कि भावना का एक छोटा सा पड़ता है? हाँ? 

दर्शकों: एक कार्यात्मक भाषा में, सब कुछ एक बार में क्या होता है? 

नील मेहता: नहीं, बातें क्रम में होता है। यहाँ की तरह अभी भी वहाँ है आदेश, लेकिन यह नहीं है तरह के आदेश में भी हो , आदेश, आदेश की सराहना करता हूं। यह के क्रम में होता है समारोह में आप आउटपुट देता है। एक अन्य समारोह में उस रखो। दूसरे में रखा है कि समारोह, एक और समारोह। 

आप CS51 करते हैं, तो आप करेंगे कार्यात्मक कार्यक्रमों सीखना इस के दायरे के एक छोटे से बाहर। लेकिन मूल रूप से, क्या करता है प्रतिक्रिया ठंडी ही नहीं है एक तरह से डाटा प्रवाह और आभासी डोम, लेकिन इसके अलावा इस विचार कार्यात्मक प्रोग्रामिंग। और कार्यात्मक प्रोग्रामिंग बहुत आसान है रचना और से बाहर शांत सामान बनाने के लिए, और लगता है कि यह बहुत आसान है के बारे में और के बारे में कारण। तो यह प्रतिक्रिया का एक और अच्छा ड्रा है। कोई और प्रश्न? हाँ? 

दर्शकों: उम, तुम क्यों करेगा वर के लिए विरोध के रूप में जाने का उपयोग करें? 

नील मेहता: तो सवाल यह है यही कारण है कि आप के बजाय वर की जाने उपयोग करते हैं? यह कहा जाता है एक बात है ES6 या एकमा स्क्रिप्ट 6। यह जावास्क्रिप्ट का नया संस्करण है। तकनीकी कारणों की एक गुच्छा है, लेकिन ऐसा वर का एक बेहतर संस्करण है। 

आप चर घोषणा कैसे यह है। तुम चलो उपयोग कर सकते हैं। आप वर का उपयोग कर सकते हैं। चलो तकनीकी का एक गुच्छा है आप उन्हें देख सकते हैं reasons-- यह बेहतर है के लिए क्यों later-- अप। असल में, ES6 कुछ अच्छा है नई वाक्य रचना, कुछ नई सुविधाओं पुरानी जावास्क्रिप्ट के शीर्ष पर। 

तो हम पांच मिनट की तरह है। मैं बस के बारे में बात करना चाहता था एक और बात यह है कि असली तेजी से। आप किसी भी सवाल था, चलो इस बारे में बाद में बात करते हैं। लेकिन अभी तो यह हो जाता है कैमरे पर पकड़ा, मैं तो बस आप कैसे बारे में कुछ बात करना चाहते हैं वास्तव में अपनी क्षुधा में प्रतिक्रिया का उपयोग करें। 

आप यहाँ जाना है, Facebook.GitHub.IO/react, इस प्रतिक्रिया के लिए मुख पृष्ठ पर है, और यह आप वास्तव में इस्तेमाल आपको बताएंगे कि कैसे करेंगे अपने पृष्ठों में प्रतिक्रिया। असल में, यह एक छोटी सी है जटिल प्रतिक्रिया स्थापित करने के लिए कोशिश कर रहा है। आप बस खींचें के रूप में यह उतना आसान नहीं है और वहाँ में एक जावास्क्रिप्ट ड्रॉप। 

आप अपने ट्रांसफार्मर के लिए किया है यह पहले किया था, जो होगा, सेट अप में अपने JSX बारी सामान्य जावास्क्रिप्ट। तुम्हें पता है कि हूँ बात करने के लिए है आप सामान्य करने के लिए ES6 संकलन। जावास्क्रिप्ट चलती का एक बहुत कुछ है भागों तुम्हें क्या करना है, तो एक चीज नहीं है फ़र्मर, Yeoman.io बुलाया। और यह एक कमांड लाइन उपकरण है कि करेंगे आप अपनी प्रतिक्रिया बाहर पाड़ मदद आसानी से परियोजनाओं। 

तो अगर आप इस बारे में पढ़ सकते हैं बाद में, लेकिन कुछ उपकरण हैं फ़र्मर प्रदान करता है। वे एक प्रतिक्रिया से आप बना दूँगा में बनाया गया सब कुछ के साथ अनुप्रयोग। इसे बनाया होगा की तरह घटकों, में में बनाया। यह अपने ट्रांसफार्मर में बनाया गया होगा। वे शांत का एक बहुत है सामान स्वचालित रूप में बनाया गया है जनरेटर बुलाया इन चीजों का उपयोग। 

अगर आप की तरह तो इस बारे में पढ़ा। बस फ़र्मर, वाई-ई-ओ-एम-ए-एन, और पर जाना आप इस तरह के जनरेटर पा सकते हैं। और इस तरह के जनरेटर के साथ इन, आप सिर्फ एक की तरह एक जोड़े को कमांड लाइन आदेशों है। यह एक बाहर पाड़ करेंगे पूरे आपके लिए app प्रतिक्रिया। यह सब मैनुअल पाइपिंग मिल जाएगा, और असंतोष का शब्द काम, आप के लिए किया और यह आपको सिर्फ ध्यान केंद्रित क्यों है बस में लिखने पर प्रतिक्रिया। 

तो बुनियादी तौर पर इमारत एक एप्लिकेशन nontrivial है प्रतिक्रिया। यह सब एक साथ वायर्ड है, लेकिन वहाँ यह तुम्हारे लिए क्या करेंगे कि उपकरण हैं। आप बनाना चाहते हैं, तो एक प्रतिक्रिया तो एप्लिकेशन, यह उस तरह से कोशिश कर रही है। तुम सिर्फ प्रयोग करने के लिए चाहते हैं, आप इस CodePen उपयोग करने की कोशिश कर सकते हैं इस CodePen है क्योंकि सभी तारों प्रतिक्रिया। मैं पहले से ही आप सभी के लिए काम किया है। 

आप एक तरह बनाना चाहते हैं, तो उत्पादन एप्लिकेशन प्रतिक्रिया जारी करने के लिए, इन जनरेटरों में से एक का प्रयास करें। तुम सिर्फ खेलना चाहते हैं चारों ओर, यह अक्सर बस के लायक है की तरह यहाँ CodePen पर चारों ओर खेलने की कोशिश। अच्छा प्रतीत होता है? कूल। 

तो यह है कि मेरे पास है। फिर, सब कोड और उदाहरण हैं यहाँ इस वेबसाइट पर होने जा रहा। तो, फिर से, हम बात नहीं की के बारे में प्रतिक्रिया के ज्यादा वाक्य रचना, लेकिन उन सभी को खोजने के थोड़ा वाक्य विवरण, यह सभी उपलब्ध होने जा रहा है यहाँ इस वेबसाइट पर। 

इसलिए मुझे लगता है जैसे की सिफारिश था पहला कदम बढ़ाओ। अपने CodePen में डाल दिया। बनाने पर काम करने की कोशिश यह दूसरे चरण के लिए। वहाँ एक चौथा कदम है, और सिर्फ तुम उस से मिलता है, जहां देखते हैं। 

कोई और सवाल, जांच या उस पृष्ठ बाहर मुझे ईमेल। यह मेरा ईमेल है। लेकिन मैं किसी के साथ मदद करने में खुशी होगी आप के बारे में हो सकता है सवाल प्रतिक्रिया। तो, हाँ, यह मेरे पास है। बहुत ज्यादा के लिए आप सभी को धन्यवाद देख रहा है या में भाग लेने के लिए। और मैं किसी भी प्रश्न ले लेंगे आप अब इस के बाद हो सकता है। तो देखने के लिए आप सभी को धन्यवाद।