>> [เล่นเพลง]
>> NEEL เมธา: ที่นี่มันจะไป
>> ดีทุกคนยินดีต้อนรับสู่เว็บ ปพลิเคชันของอนาคตด้วยตอบสนอง
นี่คือ CS50
ชื่อของฉันคือ Neel
ฉัน TA สำหรับ CS50 และนักเรียนปีที่สอง ที่วิทยาลัยฮาร์วาร์และมาก
นักพัฒนาเว็บหลงใหล
ดังนั้นฉันน่าตื่นเต้นมากที่ จะพูดคุยกับคุณในวันนี้
ไม่ว่าคุณจะอยู่ที่นี่หรือที่บ้าน ดูเกี่ยวกับการตอบสนองซึ่งเป็นอีกครั้ง
ที่ผมกล่าวว่าอนาคตของปพลิเคชันเว็บ
>> ดังนั้นการตอบสนองเป็นกรอบเว็บ
และในขณะที่ผมเคยบอก กับคนบางคนที่นี่
กรอบเป็นเพียง ชุดของเครื่องมือที่คุณสามารถใช้
โครงสร้างและสร้าง app เว็บของคุณ
และปพลิเคชันเว็บเป็นอีกครั้งที่เว็บไซต์ ที่มีการโต้ตอบเช่น Facebook,
Twitter.com, Instagram.com สิ่งที่
>> ดังนั้น Facebook เป็นกรอบเว็บ ที่ได้รับการพัฒนาโดยใช้ Facebook
สองสามปีที่ back-- ตอบสนองคือ
มันถูกนำมาใช้ในการ Facebook ปพลิเคชันมือถือของตน
และ app เว็บ Instagram
Khan Academy เป็นอีกหนึ่ง ยอมรับต้นที่โดดเด่นของการตอบสนอง
>> มันเป็นจริงได้รับ ที่นิยมมาก
ถ้าคุณเคยใช้สิ่งที่ต้องการเชิงมุมหรือ หัวใจนี้เป็นของคนในครอบครัวเดียวกัน
แต่มันก็มีตั้งแต่ไกล ทำได้ดีกว่านิยมของพวกเขา
มันเป็นสิ่งที่ใหม่ร้อน
มันจริงๆใหญ่จริงๆ
>> และเพื่อตอบสนองเป็นสิ่งที่ดีไม่เพียง แต่เป็น กรอบเว็บสำหรับการเชื่อมต่ออาคาร
เป็นเรื่องที่ดีสำหรับการสร้างการเชื่อมต่อเว็บ
นอกจากนี้ยังมีสิ่งที่ เรียกว่าตอบสนองพื้นเมืองซึ่ง
ช่วยให้คุณสามารถสร้างการเชื่อมต่อ สำหรับ Android และ iOS
และอาจแพลตฟอร์มอื่น ๆ ในอนาคต โดยใช้เพียงรหัส JavaScript เดียวกัน
คุณสามารถใช้เดียวกันแน่นอน รหัส JavaScript เพื่อทำให้เว็บไซต์
ที่จะทำให้ปพลิเคชัน Android และ iOS ปพลิเคชัน
>> มันเป็นมากเวลาที่น่าตื่นเต้นมาก
มันเป็นจริงๆโอกาสที่เย็น
มันจริงๆเว็บสากล เครื่องมือในการพัฒนาอินเตอร์เฟซ
ดังนั้นจึงเป็นมาก สิ่งที่สำคัญที่จะรู้ว่า
และขณะที่ผมกำลังบอกคน ก่อนนี้ผมคิดว่า
จะเปลี่ยนวิธีที่เรา สร้างปพลิเคชันเว็บตลอดไป
ดังนั้นจึงอาจจะอธิบิต แต่ฉัน คิดว่ามันเป็นสิ่งที่ดีงามที่จะรู้ว่า
>> ตกลงดังนั้นสิ่งที่เป็นตอบสนอง?
ตอบสนองเป็นกรอบที่คุณสามารถ ใช้สำหรับการเชื่อมต่ออาคาร
อินเตอร์เฟซที่เป็นอีกครั้ง หน้าเว็บใช่มั้ย?
ดังนั้นนี่คือ Instagram.com ใช้ตอบสนอง
>> ตอบสนองที่สร้างขึ้นบน ความคิดของส่วนประกอบ
เป็นองค์ประกอบที่ HTML องค์ประกอบบนเตียรอยด์
ดังนั้นองค์ประกอบ HTML เป็นเหมือนปุ่ม
มันวรรค
มันเป็นส่วนหัวใช่มั้ย?
และ Instagram จะใช้เหล่านี้ แต่ จะใช้องค์ประกอบของการตอบสนอง
>> ชิ้นส่วนที่มีการตอบสนอง องค์ประกอบ HTML souped ขึ้น
ที่มีลักษณะการทำงานของตัวเอง ที่มีอยู่ภายในพวกเขา
ดังนั้นเป็นตัวอย่างที่เราจะได้มี องค์ประกอบเวลาองค์ประกอบเวลา
ซึ่งจะมีเช่น การประทับเวลาที่คุณรู้ว่า
องค์ประกอบรายละเอียดที่ จะมีรายละเอียดของภาพ
และชื่อของบุคคลที่
มันสามารถมีเคาน์เตอร์เหมือนที่ เช่นสามารถนับจำนวนของที่ชอบ
และถ้าคุณคลิกที่มันจะ เพิ่มจำนวนของชอบ
องค์ประกอบที่เป็นเพียง พวงของรหัส HTML ที่
มีการทำงานบางอย่าง ห่อภายในของมัน
ดังนั้นจึงเป็นเหมือนองค์ประกอบของ HTM​​L ที่เป็น เตียรอยด์ที่ผมกล่าวว่าก่อนที่จะ
คุณสามารถใช้องค์ประกอบเหล่านี้ และคุณสามารถนำพวกเขาร่วมกัน
เพื่อให้องค์ประกอบใหม่ใน กรณีนี้องค์ประกอบที่โพสต์
ซึ่งมีทุกสิ่งนี้
มันจะมีเวลาส่วนตัว, LikeCounter อาจจะแสดงความคิดเห็น
และบางทีภาพตัวเอง
และเพื่อให้ปพลิเคชันเว็บที่ถูกสร้างขึ้นโดยการใช้เพียง ส่วนประกอบและวางพวกเขาร่วมกัน
ฟีด Instagram เป็นอะไรมากไปกว่า พวงของการโพสต์หนึ่งหลังจากที่อื่น
แต่ละโพสต์มีเหมือนเวลาที่ ข้อมูลส่วนตัว, LikeCounter และอื่น ๆ
มันเป็นเหมือนการสร้างบ้าน
คุณไม่ได้สร้าง บ้านจากด้านบนลง
คุณจะใช้ components-- คุณ ใช้เวลาเช่นห้องน้ำ
คุณจะใช้ bedroom-- ที่คุณติดพวกเขา ร่วมกันและคุณมีองค์ประกอบใหม่
คุณมีส่วนใหม่ของบ้าน
>> ดังนั้น React ถูกสร้างขึ้นรอบ ๆ ความคิดของส่วนประกอบที่
มีการโต้ตอบที่มีความเปิดเผย
เช่นเดียวกับคุณเพียงแค่พูดในสิ่งที่ รายละเอียดและมันทำให้มัน
พวกเขาเป็น composable
คุณสามารถใช้เวลาและรายละเอียดใส่ พวกเขาร่วมกันทำสิ่งที่ดีกว่า
และพวกเขากำลังนำมาใช้ใหม่ดังนั้นหากคุณ มีรหัสที่มาสำหรับโพสต์
คุณสามารถฝังที่ใดก็ได้
>> คุณสามารถฝัง Instagram สิ่งที่อยู่บนเว็บไซต์ของคุณเอง
คุณสามารถฝังใน Facebook, ตัวอย่างเช่น ตราบใดที่มันใช้ตอบสนองได้เป็นอย่างดี
ดังนั้นส่วนประกอบจริงๆจริงๆ หน่วยการสร้างที่มีประสิทธิภาพของเว็บ
ที่สามารถใช้ทุกที่และใส่ ร่วมกันเพื่อให้การก่อสร้างตึกใหม่
นั่นเป็นอย่างมาก ภาพรวมในระดับสูง
ดังนั้นอีกครั้งถ้าคุณมี คำถามใด ๆ ที่จุดใด
เกี่ยวกับปรัชญาของเครื่องปฏิกรณ์ที่ การเข้ารหัสที่จะหยุดฉันและแจ้งให้เราทราบ
>> OK เพื่อให้ตอบสนองเป็นเย็นเพราะมัน มีวิธีการที่แตกต่างกันของการมอง
ที่วิธีการที่คุณสร้างปพลิเคชันเว็บ
คุณคงเคยได้ยินของ MVC เป็น รูปแบบที่คุณสามารถควบคุมใน CS50 หรืออะไรก็ตาม
เรียนละเอียดอื่น ๆ ที่คุณใช้
และกรอบมากที่สุดคือ สร้างขึ้นรอบ ๆ ความคิดของ MVC
ตอบสนองไม่ได้
ตอบสนองถูกสร้างขึ้นรอบความคิด ของการไหลของข้อมูลทิศทางเดียว
เท่าที่เห็นจากแผนภูมิหรือกราฟฟิคที่นี่
>> โดยทั่วไปคุณมีแหล่งที่มาข้อมูล
และเป็นแหล่งข้อมูลที่จะเป็นผู้ตัดสินใจ วิธีการที่จะออกวางองค์ประกอบบางอย่างที่
และส่วนประกอบที่จะ จากนั้นเมื่อพวกเขาเปลี่ยน
พวกเขาจะบอก แหล่งข้อมูลมีการเปลี่ยนแปลง
>> ที่จะใช้ Instagram ตัวอย่างเช่นคุณอาจมี
รายการของวัตถุเช่นโพสต์ ในฐานข้อมูลหรือบางสิ่งบางอย่าง
ว่าข้อมูลที่
และแล้วส่วนประกอบโพสต์ของเรา จะนำข้อมูลที่
และใช้ข้อมูลที่จะทำให้ สิ่งที่อยู่บนหน้าจอ
นั่นคือสิ่งที่ลูกศร จากข้อมูลไปยังองค์ประกอบคือ
แล้วข้อมูลเดียวกับที่ใช้ ที่จะทำให้พวงของส่วนประกอบ
>> ใน Facebook Messenger ได้สำหรับ ตัวอย่างซึ่งเป็นปฏิกิริยา,
คุณอาจมีรายชื่อของ ข้อความเป็นแหล่งข้อมูลของคุณ
และนั่นจะทำให้ไม่ได้ เพียงรายการของข้อความ
แต่ยังรายชื่อเพื่อนของคุณมี
คุณมีการนับยังไม่ได้อ่าน
อาจจะยังทำให้สิ่งที่ Facebook ว่าที่ด้านล่างของ Facebook.com
ข้อมูลเดียวกันคือ แหล่งเดียวของความเป็นจริง
และที่ทำให้เกิดจำนวนมาก ส่วนประกอบที่จะแสดงผล
และเมื่อใดก็ตามที่เป็นหนึ่งในบรรดา ส่วนประกอบมีการเปลี่ยนแปลง
มันจะไปและกลับ การเปลี่ยนแปลงแห​​ล่งที่มาของข้อมูล
>> คุณส่งข้อความไปใช่มั้ย?
ที่มีการเปลี่ยนแปลงแห​​ล่งที่มาของข้อมูล
คุณอ่านข้อความของคุณ เพื่อให้คุณตั้งค่าเป็น 0 ยังไม่ได้อ่าน
ที่มีการเปลี่ยนแปลงแห​​ล่งที่มาของข้อมูล
และสังเกตเห็นว่าสิ่งเหล่านี้อย่างใดอย่างหนึ่ง ลูกจะกลับไปที่ข้อมูลเดียวกัน
แหล่งที่มาเพื่อให้คุณรู้ว่า ได้รับชุดข้อมูลบางอย่าง
คุณรู้ว่าสิ่งที่เป็น หน้าเป็นไปได้ที่มีลักษณะเหมือน
มันกำหนด
คุณจะรู้ว่าข้อมูลที่ได้รับบางสิ่ง หน้าเป็นไปได้ที่มีลักษณะเหมือน
คุณสามารถคาดการณ์ว่ามันจะ มีพฤติกรรมและวิธีการสิ่งที่จะไป
จะทำงานเมื่อพวกเขากำลังใส่กัน
>> และถ้าผมมีส่วนประกอบล้าน ที่นี่ก็จะมีพฤติกรรมเหมือนกันใช่มั้ย?
คุณจะไม่ได้ใด ๆ การเชื่อมโยงที่แปลก
หนึ่งในข้อมูลที่แสดงผลล้านส่วนประกอบ
ล้านชิ้นส่วนที่จะทำได้ กลับไปแก้ไขข้อมูล
และเพื่อให้เรื่องนี้เป็นสิ่งที่ดีมาก
เรากำลังสร้าง composable, ปรับขนาดได้อย่างง่ายดายปพลิเคชันเว็บ
>> คุณมีแหล่งข้อมูลหนึ่ง แหล่งที่มาของความเป็นจริง
ที่บอกว่าอุปกรณ์ของคุณ วิธีการที่จะออกวางหน้า
และส่วนประกอบที่จะ จัดการกับการทำงานร่วมกัน
และถ้าพวกเขาต้องการที่จะเปลี่ยน สิ่งที่เพียงแค่กลับไป
และบอกแหล่งข้อมูลที่จะเปลี่ยน
ความรู้สึกให้?
ดังนั้นการตอบสนองคือทั้งหมดที่เกี่ยวกับความเข้าใจ วิธีการสร้างส่วนประกอบ
และวิธีการที่จะทำให้คอมโพเนนต์ของคุณ มีปฏิสัมพันธ์กับโลกภายนอก
>> การโต้ตอบส่วนประกอบ กับโลกภายนอก
ใช้เทคโนโลยีอื่น ที่เรียกว่าฟลักซ์ซึ่ง
เป็นกรอบที่เป็น เพิ่มที่ด้านบนของการตอบสนอง
เราจะไม่พูดถึงเรื่องนั้น
เรากำลังจะพูดคุยเกี่ยวกับที่ได้รับ ข้อมูลวิธีที่คุณสามารถทำให้องค์ประกอบหรือไม่?
>> และเพื่อตอบสนองเป็นเย็นจริงๆเพราะคุณ สามารถใช้กับด้านหลังที่คุณต้องการ
หากคุณมีเหมือนปลายด้านหลังหลาม ถ้างูหลามของคุณสามารถคายข้อมูลบางส่วน
ตอบสนองสามารถทำให้มัน
ถ้าคุณจะไม่มีผล JS ของข้อมูลทำให้มันตอบสนอง
ทับทิมรางขึ้นมาด้วย ข้อมูลวาทกรรมที่มันตอบสนอง
>> ดังนั้นการตอบสนองเป็นพื้นเว็บ view-- ปลายด้านหน้าที่มีส่วนประกอบของ
สำหรับแหล่งข้อมูลใด ๆ
และเพื่อให้ไปจากแหล่งข้อมูล ตอบสนองส่วนประกอบเป็นเรื่องง่ายสวย
ไปทางอื่น ๆ ที่เป็นเพียงเล็กน้อยยาก
ที่ใช้ฟลักซ์ที่ผมกล่าวถึงก่อน
เราจะไม่ได้รับเป็นที่
เราจะมุ่งเน้นที่ ข้อมูลต่อองค์ประกอบด้าน
วิธีที่คุณสามารถทำนี้ เย็นปพลิเคชันเว็บสนุก
มันจะไม่ส่งผลต่อโลกภายนอก ตอนนี้ แต่ที่เรื่องอื่น
>> ตกลงดังนั้นถ้าคุณอยู่ที่นี่ สำหรับการสัมมนาครั้งสุดท้ายของฉัน
คุณจะรู้ว่าทั้งหมดของรหัสสำหรับ พูดคุยในวันนี้เป็นไปได้ที่ URL นี้
ที่นี่ขออภัย URL นี้ที่นี่
และโดยทั่วไปเรากำลังจะไป ผ่านสี่ขั้นตอนอาจจะห้า
อาจจะไม่ได้ห้า
เราจะย้ายผ่านสี่ขั้นตอน ของการสร้างแอพพลิเคตัวอย่างตอบสนอง
และเพื่อให้ทุกรหัสแหล่งที่มา สำหรับขั้นตอนของวิธีการทุก
เป็นไปได้ที่นี่ดังนั้นถ้า คุณไปพร้อมที่บ้าน
อย่าลังเลที่จะอ่านรห​​ัสนี้
หากคุณกำลังต่อไปนี้พร้อมที่นี่ เราจะแสดงบนหน้าจอ
จึงไม่ต้องกังวลเกี่ยวกับเรื่องนี้
แต่ถ้าคุณจะอยู่ที่บ้านรู้สึก เยี่ยมชมเว็บไซต์นี้
และใช่คุณควรจะสามารถที่จะได้รับ รหัสทั้งหมดที่คุณเคยจะต้องที่นี่
ดังนั้นจึงเป็นแผ่นโกงที่ดีเช่นกัน สำหรับการผจญภัยในอนาคตของคุณด้วยการตอบสนอง
เย็นดังนั้นหากทุกคนที่นี่ และแม้ว่าคุณจะอยู่ที่บ้าน
ดึงขึ้นเว็บไซต์นี้ is.gd/cs50react, ไม่มีทุนขีดไม่มีอะไรไม่มี
>> คุณจะเห็นหน้าเว็บที่มีลักษณะ นิด ๆ หน่อย ๆ เช่นนี้
นี่คือสิ่งที่เรียกว่า CodePen
CodePen คือการทำงานร่วมกัน สภาพแวดล้อมการเขียนโปรแกรม
ที่ฉันสามารถเขียนโค้ดที่นี่และ มันจะถูกส่งไปยังคุณ
และวิธีนี้ผมสามารถเขียนโค้ด
ฉันสามารถเรียกใช้รหัสที่นี่
>> สำหรับ example-- และถ้ามัน reloads-- เห็น ผมใช้โค้ด JavaScript บนหน้าเว็บ
ขวาที่นี่และมันจะ โดยอัตโนมัติทำให้หน้าเว็บ
กับเรื่องนี้โค้ด JavaScript
ดังนั้นนี้เป็นวิธีที่ สำหรับเราที่จะลองรหัส
จริงๆอย่างรวดเร็วโดยไม่ต้องใช้ ID ของเราหรือใช้เครื่องในท้องถิ่นของเรา
หรืออะไรก็ตาม
มันเป็นวิธีที่รวดเร็วมากสำหรับคุณที่จะ Mockup และการทดสอบออกมาแตกต่างกันของรหัส
>> ดังนั้นฉันจะได้รับการ รหัสตัวอย่างเช่นวางไว้ที่นี่
เรากำลังจะได้ร่วมงานผ่านมัน
และถ้าคุณอยู่ที่บ้านคุณ สามารถดึงขึ้นนี้เช่นกัน
และฉันได้ติดตั้งไว้แล้ว ตอบสนองที่นี่เพื่อให้คุณสามารถเพียงแค่
เขียนรหัสของคุณเองที่นี่และ ลองเป็นสนามเด็กเล่นของคุณเอง
>> ใช่ถ้าทุกคน เปิดการเชื่อมโยงนี้ที่นี่
กรุณาให้นิ้วหัวแม่มือ ขึ้นเมื่อคุณมีมันเปิด
เย็นเย็นเย็น
ไม่มีอะไรที่นี่สำหรับตอนนี้ แต่ เราจะเปลี่ยนที่เร็ว ๆ นี้
>> OK เพื่อให้ตอบสนองเป็น JavaScript ห้องสมุดและเป็นเช่นนี้
ต้องมีความรู้ JavaScript, ซึ่งเป็นเว็บภาษาการเขียนโปรแกรม
และมันก็ถูกนำมาใช้สำหรับสิ่งอื่น ๆ ตอนนี้เกินไป แต่หลักในการพัฒนาเว็บ
ภาษาดังนั้นหากคุณไม่คุ้นเคยกับ ที่อ่านเว็บไซต์ที่เรียกว่า JSforCats.com
มันยอดเยี่ยม
คุณสามารถเรียนรู้ JavaScript ในครึ่งชั่วโมง
มันเป็นเรื่องที่น่าทึ่ง.
>> เพื่อให้มันอ่าน
นอกจากนี้เรายังเป็นจำนวนมากของ HTM​​L ที่นี่เพราะ เรากำลังออกแบบหน้าเว็บของหลักสูตร
ดังนั้นถ้าคุณไม่คุ้นเคยกับ HTML, ตรวจสอบ HTMLdog.com
ผมคิดว่าการเรียนรู้คือการตอบสนอง ล้านครั้งง่ายขึ้นถ้าคุณอยู่แล้ว
รู้ว่าการก่อสร้างตึก
หากคุณมีส่วนประกอบที่เป็น ง่ายที่จะทำให้เป็นองค์ประกอบที่ใหญ่กว่า
นั่นคือตอบสนองภาษาสำหรับคุณ
>> เพื่อไปข้างหน้าและให้ สิ่งเหล่านี้อ่าน
หยุดวิดีโอนี้
ให้อ่านถ้าคุณเป็น ที่บ้านถ้าคุณไม่ได้
คุ้นเคยกับ HTML หรือ JavaScript
ตกลงดังนั้นสิ่งที่เรากำลังจะไป ทำคือการที่เรากำลังจะทำ
เป็น app flashcard พื้นฐานมากโดยใช้ตอบสนอง
เรากำลังจะมี flashcard
คุณสามารถพลิกบัตรไปมา
และเรายังจะมีรายชื่อของ บัตรทั้งหมดที่เรามี
และถ้าเรารู้สึก ทะเยอทะยาน, เราอาจจะ
ความสามารถในการสลับไปมาระหว่าง รถยนต์โดยคลิกที่พวกเขา
>> แต่นี้เป็นของเปล่าของคุณ กระดูกที่ตอบสนองการตรวจสอบที่ง่ายมาก
ดังนั้นนี้เป็นจริง ไม่น่ารำคาญที่จะใช้
แต่เรากำลังจะแสดงให้เห็นว่าถ้าคุณทำ นี้ก็มากและง่ายมากที่จะขยายมัน
ถ้าคนอื่น ๆ ที่ช่วยให้คุณกับมัน
ดังนั้นเรากำลังจะไปผ่านสี่ขั้นตอน เริ่มต้นจากรอยขีดข่วนที่จะสร้างนี้
>> ตกลงดังนั้นสี่ขั้นตอนเราจะ เริ่มต้นด้วยขั้นตอนแรก
ขั้นตอนแรกที่เป็นไปได้ การสร้างองค์ประกอบแรกของคุณ
ที่ผมกล่าวว่าก่อนที่จะเป็นส่วนประกอบในการตอบสนอง เป็นเพียงองค์ประกอบ HTML เตียรอยด์
มันระบุ HTML และพฤติกรรมบางและมัน
จะระบุว่าผู้คน สามารถโต้ตอบกับมันว่า
มันจะมีรัฐภายใน
เช่นเดียวกับปุ่มจะรู้เช่นวิธีการหลาย ๆ ครั้งจะได้รับการคลิกตัวอย่างเช่น
และมันก็จะรู้วิธีการวางตัวเองออก
>> ถ้าอย่างนั้นเราไปข้างหน้าและสร้างของเรา องค์ประกอบแรกโดยใช้ JavaScript
ดังนั้นถ้าไวยากรณ์ที่มีลักษณะแปลก เป็นเพราะชนิดของมันคือ
ดังนั้นอีกครั้งที่เรากำลังจะ ที่จะทำให้ตัวแปรที่เรียกว่า
การตรวจสอบโดยใช้คำหลักให้, ซึ่งจะทำให้ตัวแปร
ให้ App React.createClass เท่ากับ
>> ตอบสนองเป็นห้องสมุดและมี สร้างฟังก์ชั่นระดับ
และฟังก์ชั่นนี้ บิตของรหัสที่คุณ
สามารถใช้เพื่อสร้างใหม่ ประเภทของการตอบสนองส่วนประกอบ
และเพื่อ React.createClass ทำให้องค์ประกอบ
และส่วนนี้จะ สามารถที่จะทำสิ่งที่
สิ่งที่สำคัญที่จะสามารถทำคือการทำให้ บางสิ่งบางอย่างทำให้เป็นฟังก์ชั่น
>> อีกครั้งถ้าดัชนีนี้ไม่ได้เป็นที่เห็นได้ชัด คุณผมขอแนะนำให้คุณไปใน JS สำหรับแมว
และตรวจสอบออก
คือการที่ซูมได้ดีพอ?
เย็น.
>> เพื่อให้ทุกความต้องการขององค์ประกอบ จะมีฟังก์ชั่นการแสดงผล
แสดงผลกล่าวว่าฟังก์ชั่น สิ่งที่ฉันพิมพ์บนหน้าจอหรือไม่
แต่องค์ประกอบคือ ไร้ประโยชน์ถ้ามันไม่ได้
รู้ว่าสิ่งที่จะพิมพ์ลงบนหน้าจอเพื่อให้ คุณจะต้องมีฟังก์ชั่นการแสดงผล
>> ดังนั้นในสิ่งที่ทำให้คุณ ก็ต้องกลับมาบาง HTM​​L
และสิ่งที่เย็นคือ มีสิ่งที่เรียกว่า
JSX ซึ่งเป็นส่วนขยายของ จาวาสคริปต์ที่ถูกใช้โดยตอบสนอง
มันช่วยให้คุณเขียนภายใน HTML ของ JavaScript, คุณที่
เสียงชนิดของแปลกเมื่อ ครั้งแรกที่คุณคิดเกี่ยวกับมัน
แต่มันทำให้ความรู้สึกมากหลังจากนั้น
ดังนั้นเราจึงสามารถทำเช่นนี้
หากคุณคุ้นเคยกับ HTML ฉันรู้ว่า เรามี div ที่มีวัตถุประสงค์ทั่วไป
ภาชนะสำหรับสิ่งที่
เราสามารถกลับ div และภายใน div นี้เราสามารถนำสิ่งที่
>> ดังนั้นสมมติว่าเราต้องการที่จะทำให้เพียง flashcard ตรงขึ้นสำหรับในตอนนี้
flashcard ที่ฉันจะพูดว่า จะมีคำถามและคำตอบ
ดังนั้นภายใน div นี้ขอ พิมพ์วรรค
ที่บอกว่าคำถามของสิ่งที่เป็น คำตอบที่ดีที่สุดเพื่อชีวิตจักรวาล?
และแล้วคำตอบคือ ไปได้แน่นอน 42
>> ที่ไม่ได้เกิดขึ้นเป็นอย่างดีเลย
ใช่ดังนั้นโดยทั่วไปคุณสามารถจริงๆ เขียน HTML ภายใน JavaScript ของคุณ
และนี่เป็นไปได้ พิมพ์ออกมาสู่หน้าจอ
ถ้าอย่างนั้นเราพยายามที่จะออก
>> ดังนั้นเราจึงมีส่วนประกอบของเรา
เราจำเป็นที่จะบอกตอบสนองที่จะใส่ องค์ประกอบบนหน้าจอ
ดังนั้น React.render เพื่อแจ้งให้ทราบว่าเรา การตรวจสอบการรักษาเช่นเดียวกับองค์ประกอบอื่น ๆ
เราเขียนมันเป็นมันเป็นองค์ประกอบ HTML
เช่นแทนที่จะพูดว่าเหมือน img สำหรับภาพหรือพีสำหรับวรรค
คุณเขียน App ดังนั้น App เป็น รับการปฏิบัติเช่นองค์ประกอบ HTML
ที่ผมกล่าวก่อนก็ องค์ประกอบเตียรอยด์
>> คุณดังนั้นทำให้ App และคุณ ให้สถานที่ที่จะใส่มัน
และนี่คือวิธีที่คุณสามารถ บอกว่าที่จะนำมัน
ฉันได้สร้าง div ง่ายใน หน้าเรียกว่ามี ID ของหน้าแล้ว
และนั่นคือที่ องค์ประกอบที่จะไป
>> และเราไม่ได้ไปทำงานกับ HTML
โดยทั่วไปนี้เป็นไปได้ ใส่ในองค์ประกอบของหน้านี้
ที่เราได้บนหน้าจอ
ดังนั้นจึงเรียกใช้รหัสนี้และมันจะวาดนี้ สิ่งที่อยู่บนหน้าจอเพื่อให้ที่นี่เรามี
เราได้ทำให้องค์ประกอบตอบสนองครั้งแรกของเรา
>> ดังนั้นเพียงแค่เป็นสรุปที่เราทำเบา ๆ รูปแบบใหม่ขององค์ประกอบใช่มั้ย?
นั่นคือสิ่งที่ React.createClass
และในองค์ประกอบที่เรา บอกว่ามันสิ่งที่มันควรจะทำอย่างไร
เมื่อใดก็ตามที่ส่วนนี้คือการ จะพิมพ์ลงบนหน้าจอ
มันจะพิมพ์ออกมา div กับ วรรคสองภายในของมัน
>> และสิ่งที่เราทำเราทำ app ใหม่ โดยใช้วงเล็บมุมสัญกรณ์การตรวจสอบ
เราบอกว่ามันจะนำมัน ภายในองค์ประกอบหน้า
ดังนั้นสิ่งที่ผมทำมันสร้าง app ใหม่จากแม่แบบที่
แล้วผมบอกว่ามันจะทำให้มัน
ดังนั้นจึงกล่าวว่าตกลงใน app สิ่งที่ฉันควรจะพิมพ์ออกมา?
App กล่าวไปพิมพ์ div กับสองย่อหน้าภายในของมัน
และ voila มี div ของเราด้วย สองย่อหน้าภายในของมัน
ทำให้รู้สึกเพื่อให้ห่างไกล?
>> ดังนั้นอีกครั้งกับความท้าทายทั้งตอบสนอง เป็นเพียงการรู้วิธีที่จะทำให้ส่วนประกอบ
วิธีที่จะทำให้ ส่วนประกอบทำงานร่วมกัน
ตอนนี้ที่เราได้ทำครั้งแรกของเรา องค์ประกอบที่ขอไปกลับ
และทำให้ส่วนประกอบที่ปรับแต่งได้
เพื่อให้คุณรู้วิธีการในรูปแบบ HTML คุณ สามารถให้การเรียนปุ่มของคุณ?
คุณสามารถให้แองเคอของคุณ href
คุณสามารถให้ปัจจัยการผลิตชนิดของคุณใช่มั้ย?
คุณสามารถกำหนดเองให้มากขึ้น คุณสมบัติทั้งหมดขององค์ประกอบของคุณ
ที่จะทำให้มันน่าสนใจมากขึ้น
และเราสามารถทำได้จริง สิ่งเดียวที่แน่นอน
>> ดังนั้นสมมติว่าเราต้องการของเรา app ที่จะไปทำให้บัตรใด ๆ
ตอนนี้เราก็ กลายเป็นบัตร hardcoded
เรารู้ว่ามีเพียงหนึ่ง บัตรก็สามารถทำเพื่อเรา
จะพยายามและการเปลี่ยนแปลงนี้ในขณะนี้เพื่อ ว่าเราก็สามารถให้การ์ดบาง
มันจะพิมพ์ออกบัตร
>> คุณควรจะพยายามทำให้คุณ ส่วนประกอบที่ใช้งานทั่วไปมาก
ดังนั้นวิธีนี้ผมสามารถส่งอีเมล นี้เพื่อนของฉันและเป็นเช่น
สิ่ง flashcard ที่คุณมี เพียงแค่กินมันเข้าไปในที่นี่
และมันจะทำมันด้วยตัวเอง
คุณสามารถใส่อื่น ๆ สิ่งที่อยู่ใน app ของคุณเอง
>> แต่ก่อนอื่นเรามาทำลายนี้ ออกเป็นสองส่วน
แต่เราต้องการที่จะแยกบัตร พิมพ์ส่วนหนึ่งจากส่วนการตรวจสอบที่เกิดขึ้นจริง
ดังนั้นสิ่งที่เราสามารถทำได้คือเรา สามารถเปลี่ยนจาก App
เพื่อ CardView เพียง ชื่อใหม่สำหรับแอพพลิเค
และเราสามารถทำให้ใหม่ ส่วนประกอบที่เรียกว่า App,
เพื่อไม่ให้สับสนกับ App เก่า
เรามี createClass ที่ และเช่นเดียวกับในรูปแบบ HTML,
คุณสามารถตอบสนองรังส่วนประกอบ ภายในของแต่ละอื่น ๆ
>> ดังนั้นในเรื่องนี้ฟังก์ชั่นแสดงผล ฟังก์ชั่น CardView กลับ
และนี่คือสิ่งเดียวที่แน่นอน
ดูว่าทำไมมันเป็นสิ่งที่เหมือนกันหรือไม่
แทนการแสดงผลเพียงแค่การตรวจสอบว่า มี div และจับคู่ภายในของมัน
การตรวจสอบการแสดงผล CardView และ CardView แสดงผล div และวรรค
ดังนั้นนี่เป็นตัวอย่างแรกของ องค์ประกอบที่ทำรังอยู่ภายในของแต่ละอื่น ๆ
ที่ทำให้รู้สึก?
ดังนั้นอีกครั้งเรามีองค์ประกอบ CardView
เรามีการตรวจสอบองค์ประกอบ ว่ามันเป็นขนาดใหญ่กว่า
>> ตกลงดังนั้นเราจึงต้องการ CardView-- ของเราหากคุณ ให้ CardView ดีการ์ดบางอย่าง
มันจะพิมพ์ออกมาสำหรับคุณใช่มั้ย?
ดังนั้นก่อนที่เราจำเป็นต้องทำบัตร จึงขอให้วัตถุบัตร
ดังนั้นขอบัตร equal-- ถ้าคุณคุ้นเคยทั้งหมด
นี้เป็นเพียงการทำสัญกรณ์ วัตถุใน JavaScript
มันเป็นชนิดเช่น struct ใน C ดังนั้นเราจึงทำบัตร
และตอนนี้เราสามารถผ่านบัตรเช่นนี้ ทรัพย์สินหรือเป็นแอตทริบิวต์ใน HTML มี
คำศัพท์เพื่อ app ของเรา
ดังนั้นเราจึงสามารถทำเช่นนี้ App บัตรเท่ากับ myCard
>> คุณรู้วิธีในการป้อนข้อมูลที่คุณทำ ประเภทการป้อนข้อมูลเท่ากับข้อความหรือปุ่ม
ระดับเท่ากับ btn สำหรับบูต ,?
ความคิดเดียวกันบัตร App equals-- คุณได้มีการใส่เครื่องมือจัดฟัน here--
บัตร App เท่ากับ myCard ดังนั้นนี้ กล่าวว่าเรามีวัตถุการ์ดใบนี้
ฉันจะผ่านมันเป็น สถานที่ให้บริการไปยังส่วนการตรวจสอบ
และองค์ประกอบ app นี้จะ จะสามารถเข้าถึงได้และทำ
สิ่งที่น่าสนใจกับมัน
>> ดังนั้น app ของเราเป็นไปได้ รับบัตรดังนั้นสำหรับตอนนี้
ปล่อยให้มีการตรวจสอบเพียงแค่ให้ บัตรเพื่อ CardView
เพราะตัวเองเช่นการตรวจสอบไม่ได้ จะทราบว่าจะทำอย่างไรกับมัน
ดังนั้นเราก็จะให้มันไป CardView
ดังนั้นเราจะผ่านมัน แบบเดียวกับบัตรเท่ากับ
และเพื่อให้แต่ละองค์ประกอบสามารถเข้าถึง สิ่งที่ได้รับการกำหนดให้
พวกเขาสามารถเข้าถึงคุณสมบัติ ที่ได้รับการกำหนดให้
ใช้ไวยากรณ์นี้ this.props.card
>> ดังนั้นสิ่งที่เกิดขึ้นที่นี่ คุณมีวัตถุ myCard
คุณจะผ่านมันใน app โดยใช้บัตร App เท่ากับ myCard
วัตถุบัตรที่จะได้รับการ app ของคุณ
app ที่สามารถเข้าถึงได้ เป็น this.props.card
มันเป็นเหมือนภาพ แหล่งที่มารู้ว่าสิ่งที่มันเป็น
>> app นี้รู้ว่าสิ่งที่มันเป็นการ์ด และมันสามารถทำสิ่งที่มีมัน
มันสามารถทำคำนวณ
มันสามารถทำให้การตัดสินใจขึ้นอยู่ออกจากมัน
>> สำหรับตอนนี้ผมกำลังจะผ่านไป this.props.card บน CardView
ทำให้รู้สึกเพื่อให้ห่างไกล?
มันจะทำให้รู้สึกมากขึ้นในขณะนี้
>> ตกลงดังนั้นตอนนี้เราอยู่ที่ CardView
CardView ของเราได้รับบัตรที่ควร พิมพ์คำถามและคำตอบของ
ตอนนี้เราก็พิมพ์ออกมาบางส่วน คำถามและคำตอบ hardcoded
เราต้องคิด out-- ที่เราต้องการ ที่จะขอบัตรที่พวกเขาให้เรา
สิ่งที่เป็นคำถามและคำตอบและ แล้วพิมพ์นี้ออกไปสู่​​หน้าจอ
>> ดังนั้นเราจึงสามารถทำเช่นนี้ได้ที่นี่
ในครั้งแรกที่ทำให้ begin-- ทำเท่ากับ
ดังนั้นสิ่งที่เรากำลังทำอะไรที่นี่คือเรารู้ว่า บัตรจะให้เราไปยังสถานที่ให้บริการ
ขวา?
มันให้กับเราเป็น input
เหมือนว่ามันเกือบจะเหมือน ข้อโต้แย้งที่จะฟังก์ชั่น
บัตรเป็นอาร์กิวเมนต์ เกือบ CardView นี้
>> เราจะดึงที่และวาง มันกลายเป็นคำถามตัวแปร
ให้แน่ใจว่าคำตอบเดิน เพื่อคำตอบที่ตัวแปร
แจ้งให้ว่าบัตรที่จะตอบ
และตอนนี้ที่เรามีเหล่านี้ แทนการพิมพ์ออกข้อความนั้น
เรากำลังจะพิมพ์ออกมา สิ่งที่พวกเขาให้เรา
>> ดังนั้นนี่ stuff-- ดังนั้นเราจะ ที่จะนำออกตอบคำถาม
ลองมาดูว่าการทำงานนี้
เย็นเพื่อให้ก้าวผ่านมัน อีกครั้งหนึ่งเพียงเพื่อให้แน่ใจ
>> ดังนั้นบัตรเป็นวัตถุบัตรและเรา จะให้บัตรที่เพื่อ app
และ app ที่เป็นไปได้ที่จะใช้ บัตรและให้แก่ CardView
และ CardView นี้กล่าวว่าถ้าคุณ ให้ฉัน flashcard วัตถุใด ๆ
ฉันจะพิมพ์ออกมาของคำถาม และคำตอบที่ใช่มั้ย?
>> ดังนั้นสิ่งที่ฉันจะทำคือฉันสามารถ ส่งรหัสนี้เป็นครั้งแรก
เช่น 10 สายรหัสของฉันกับเพื่อนของฉัน
เขาจะฝังใน แอพลิเคชันของตัวเอง
และตราบใดที่เขาทำในสิ่งเดียวกัน เช่นบัตร CardView เท่ากับนี้
ตราบใดที่เขาสร้างขึ้น CardView และมอบให้เป็นข้อมูลที่ถูกต้อง
เขาสามารถทำให้การ์ดของตัวเอง
ดังนั้นวิธีนี้จะเป็นจริง วิธีที่เย็นสำหรับคุณที่จะสร้าง
ส่วนประกอบที่ใช้กันใช่มั้ย?
การ์ดใบนี้ฉันจะเผยแพร่ CardView บนอินเทอร์เน็ตนี้
และคนที่จะสามารถใช้งานได้
ดังนั้นโดยทั่วไปก็เหมือนหนึ่งใน ฟังก์ชั่นมาตรฐานในห้องสมุด C
>> มันเป็นฟังก์ชั่นที่ มีคนเขียนมัน
คุณให้การป้อนข้อมูลบางอย่าง
มันจะก่อให้เกิดการส่งออกบางอย่าง
คุณไม่สนใจวิธีการทำงานภายใน
ตราบใดที่คุณให้เหมาะสม การป้อนข้อมูลก็จะทำให้การส่งออกที่เหมาะสม
>> และส่วนประกอบที่สามารถ ความคิดของวิธีการเดียวกัน
CardView นี้เป็นเหมือน ฟังก์ชั่นห้องสมุด
ถ้าคุณให้มันบางบัตร เป็นสถานที่ให้บริการก็จะ
พิมพ์เนื้อหาของบัตรว่า
เช่นถ้าฉันจะเปลี่ยนบัตรของฉันไป แทนที่จะเป็นเหมือนสิ่งที่เป็นบวก 5 37,
มันจะมีการปรับปรุงตาม
ดังนั้นเพียงแค่เปลี่ยนการป้อนข้อมูล จะได้รับการส่งออกบางอย่าง
ดังนั้นคุณสามารถคิดขององค์ประกอบเกือบ เป็นฟังก์ชั่นในลักษณะนี้ซึ่ง
คุณสามารถใส่กัน
คุณจะได้รับการป้อนข้อมูลเช่น CardView นี้ เป็นข้อมูลที่คุณได้รับผล
ในกรณีนี้การส่งออกคือการ html
ทำให้รู้สึกเพื่อให้ห่างไกล?
เย็นอีกครั้งเพื่อให้มีคุณสมบัติเป็น วิธีการที่คุณสามารถส่งผ่านข้อมูล
เข้าและออกจากส่วนประกอบ
>> ตกลงดังนั้นขอให้นี้ สิ่งที่โต้ตอบ
ตอนนี้มันเป็นชนิดของน่าเบื่อ
อะไรคือสิ่งที่ [ไม่ได้ยิน]
คุณสามารถพิมพ์บางส่วนออก แต่นั่นคือทั้งหมดที่มันสามารถทำ
>> ดังนั้นขอให้กลับไปที่ คำถามเดิมเพียงแค่ตอนนี้
ตกลงดังนั้นตอนนี้องค์ประกอบเหล่านี้ น่าเบื่อเพราะสิ่งที่พวกเขาทำ
พวกเขาได้รับการป้อนข้อมูล
พวกเขาทำให้การส่งออกใช่มั้ย?
นั่นเป็นชนิดของน่าเบื่อ
เราต้องการที่จะมีของเรา ส่วนประกอบที่จะสามารถที่จะมี
ชนิดของรัฐภายในบาง บางสิ่งบางอย่างเช่นจำ
>> สำหรับ flashcard สำหรับ ตัวอย่างเช่นชนิดของรัฐ
คุณอาจต้องการที่จะ จำ flashcard หรือไม่?
สิ่งที่สถานะชั่วคราว คุณอาจต้องการที่จะจำ
สำหรับ flashcard ในแอปพลิเค flashcard?
ผู้ชม: ไม่ว่าจะได้รับการพลิก?
NEEL เมธา: ใช่ขวา
ดังนั้นคุณอาจต้องการที่จะเก็บ การติดตามของคุณเผชิญหน้าหรือ
คุณคว่ำหน้าลงบนบัตร
บน Facebook, ตัวอย่างเช่นคุณจะ ต้องการที่จะจำที่อยู่ในฟีดข่าว
ที่คุณชอบหรือคนที่เป็นรายละเอียด คุณกำลังทำในขณะนี้
>> ใน Messenger ได้เช่นเดียวกับสิ่งที่คุณข้อความ พิมพ์ในกล่องใส่ใช่มั้ย?
หากคุณรีเฟรชหน้าก็จะหายไป
แต่คุณไม่สนใจจริงๆ
มันเป็นเพียงชั่วคราว
ใช่?
>> ผู้ชม: [ไม่ได้ยิน]
NEEL เมธา: เช่นเดียวกับแฟลช บัตรเช่นคุณสามารถเห็น
ด้านคำถามหรือด้านข้างคำตอบ?
>> ผู้ชม: ตกลง
>> NEEL เมธา: ชอบ flashcard สองด้านขวา?
ใช่ดังนั้นคุณจึงต้องการ มีความคิดในตอนนี้
ฉันมีคุณสมบัติซึ่งเป็นเหมือนปัจจัยการผลิต แต่รัฐซึ่งเป็นชั่วคราวเอ่อ
คุณจะอยู่ที่ไหนในหน้าใช่มั้ย?
อีกครั้งที่ผมกล่าวใน Facebook Messenger ของผมมีคนที่ชอบ
คุณกำลังดู Facebook หรือผู้ที่เป็นรายละเอียดใช่มั้ย?
>> นี้เป็นเพียงชั่วคราว
มันเป็นสิ่งสำคัญที่จะแสดงให้ผู้ใช้ สิ่งที่เกิดขึ้น แต่รีเฟรชหน้าเว็บ
มันไม่สำคัญว่าจริงๆ
ดังนั้นจึงเป็นรัฐชั่วคราว ดังนั้นเราจึงรัฐมันทั้งหมด
>> ดังนั้นอีกครั้งมีรัฐและอุปกรณ์
อุปกรณ์ประกอบฉากจะได้รับการป้อนข้อมูล จากแหล่งข้อมูลของคุณ
รัฐก็เหมือนกับการเริ่มต้น
ก็เช่นเดียวกับสิ่งที่ ทำให้สิ่งที่โต้ตอบ
>> ดังนั้นใน CardView-- ขอได้ของเรา CardView-- ของเราเพื่อให้มันเป็นที่ดี
สิ่งที่เรากำลังจะทำที่นี่เรากำลังจะ สัมผัส CardView และมีเพียง CardView
และเพื่อให้เพื่อนของฉันที่ได้นี้พวกเขา จะไม่เห็นความแตกต่างใด ๆ
พวกเขาจะไม่ได้มีการเปลี่ยนแปลง ใด ๆ ของรหัสของตัวเอง
แต่พวกเขาจะได้เห็นพวกเขา CardView ได้ souped ขึ้น
นั่นเป็นส่วนหนึ่งที่ดีเกี่ยวกับส่วนประกอบ
>> ตกลงดังนั้นใน CardView เราลองและ ติดตามไม่ว่าจะเป็นช่วงที่เรากำลังขึ้น
หรือคว่ำหน้าลง
ในการตอบสนองที่เราทำเช่นนี้โดยครั้งแรก ระบุสถานะเริ่มต้น
บัตรไหนเริ่มต้น?
>> ดังนั้นฟังก์ชั่นที่เรียกว่า getInitialState ทำงานและเรากลับวัตถุ
วัตถุนี้ประกอบด้วยรัฐบางส่วนและ รัฐเป็นเพียงคู่ค่าคีย์
เช่นเดียวกับในการสอนของคุณมีและที่สำคัญ ค่าที่คุณต้องเช่นชื่อเป็นสตริง
>> ในกรณีนี้ขอบอกว่าหน้าเป็นความจริง
นี้กล่าวว่าเรามีรัฐ
ส่วนหนึ่งของรัฐ เป็นคุณลักษณะที่เรียกว่าหน้า
[ไม่ได้ยิน] ดังนั้นโดยค่าเริ่มต้น เรากำลังอยู่ในด้านหน้าของบัตร
และเราสามารถเปลี่ยนแปลงได้ ในขณะที่เราพลิกบัตร
ความรู้สึกให้?
>> OK ดังนั้นทำให้ตอนนี้เรา แสดงคำถามและคำตอบที่
ตอนนี้สิ่งที่เราควรทำ จะแสดงคำถาม
ถ้าเราอยู่บนด้านหน้าของบัตรเพื่อ คำตอบคือสำหรับด้านหลังของบัตร
นั่นเป็นเหตุผลที่คุณทำทั้งหมด การ์ดแบบโต้ตอบ
ดังนั้นลองและที่นี่
ดีแรกเพียงแค่ทำให้ตัวแปร
เราสามารถถามตอนนี้ this.state.front
เราเข้าถึงรัฐเราเหมือนกัน อุปกรณ์การเข้าถึงดังนั้น this.state.front
>> ถ้าเราอยู่ด้านหน้าแล้วข้อความ เป็น this.props.card.question
ถ้าเราอยู่ในด้านหน้าของ บัตรที่เรากำลังจะพยายามคว้า
คำถามจากการ์ด
มิฉะนั้นถ้าเราอยู่ในด้านหลัง ของบัตรทำในสิ่งที่เราจะทำอย่างไร
>> ผู้ชม: คำตอบ?
>> NEEL เมธา: อ๋อดังนั้นข้อความ เท่ากับ this.props.card.answer
แต่ถ้าคุณสังเกตเห็นเรากำลังใช้ รัฐในการตัดสินใจ
เพราะตอนนี้ส่วนประกอบ จะมีลักษณะที่แตกต่างกัน
ตามออกวิธีการเหล่านี้โต้ตอบกับมัน
ดังนั้นแทนที่จะพิมพ์ออกนี้ เราก็จะพิมพ์ข้อความ
เย็นดังนั้นตอนนี้เท่าที่ดู เราจะเห็นเพียงคำถาม
และถ้าผมเปลี่ยนสถานะที่นี่ด้วยตนเอง ที่ด้านหน้าเป็นเท็จที่เราได้รับกลับมา 42
>> ดังนั้นอีกครั้งส่วนนี้ มีสถานะของตัวเอง
เช่นเดียวกับปุ่มรู้ว่า จะได้รับการกดหรือไม่
สิ่งนี้รู้ว่าสิ่งที่อยู่ใน ด้านหน้าหรือด้านหลัง
โดยค่าเริ่มต้นจะอยู่ในด้านหน้า
และแล้วถ้ามันอยู่ด้านหน้า เราจะพิมพ์ออกมาคำถาม
ถ้ามันอยู่ด้านหลังเราจะ พิมพ์คำตอบ
ดังนั้นอีกครั้งข้อมูล ได้รับเหมือนกัน
มันก็มีลักษณะแตกต่าง ขึ้นอยู่กับวิธีการที่คุณตั้งโปรแกรม
ดังนั้นสำหรับตัวอย่างเช่น Facebook Messenger ได้, แม้ว่าคุณจะได้รับแหล่งข้อมูลเดียวกัน
มันอาจจะดูแตกต่างกัน เพราะรัฐที่แตกต่างกัน
คุณกำลังมองหาที่ ข้อความของคนที่แตกต่างกัน
>> ตกลงดังนั้นนี่คือทั้งหมดที่ดีและ ดี แต่ตอนนี้สิ่งที่เป็นจริง
ทำให้เราสามารถที่จะเปลี่ยนไม่ว่าจะเป็น บัตรของเราคือด้านหน้าหรือด้านหลัง
เราสามารถทำเช่นนี้โดยการเพิ่มพลิก ปุ่มปุ่มเพื่อบัตรที่
จะพลิกบัตรถ้ามัน [ไม่ได้ยิน]
ดังนั้นขอเพิ่มปุ่มนี่นี้ ปุ่มและปุ่มนี้จะบอกว่าพลิก
>> ดังนั้นตอนนี้ก็ ไม่ได้ทำอะไร
มันก็ดูดี
สิ่งที่เราสามารถทำได้คือเราสามารถเพิ่มการคลิก จัดการ, onClick เท่ากับ this.flip,
และเราจะกำหนดในภายหลังพลิก
แต่โดยทั่วไป onClick เป็นฟังก์ชั่นที่
ได้รับการเรียกเมื่อผู้ใช้คลิกมัน
>> ดังนั้นปุ่มจะได้รู้ว่า เมื่อมันได้รับการคลิก
ไปจะได้รับการคลิก มันจะพลิกบัตร
มันเป็นชนิดเช่นของคุณ พิซซ่าผู้ชายที่จัดส่ง
คุณชอบสิ่งที่ถูกต้องเมื่อใดก็ตามที่มีคน เรียกฉันฉันจะส่งพิซซ่าใช่มั้ย?
>> คุณลงทะเบียนฟังนี้
คุณฟังสำหรับเหตุการณ์
คุณจะได้รับเรียกว่าและเมื่อ เหตุการณ์ที่เกิดขึ้นเมื่อคุณทำอะไรบางอย่าง
คุณจะได้รับพิซซ่า
ในกรณีนี้เมื่อคุณอยู่ คลิกคุณพลิกบัตร
>> และเพื่อให้เราจะต้องกำหนด ฟังก์ชั่นที่จะพลิกบัตร
ดังนั้นเราจะเขียนที่เหมาะสมที่ นี่ฟังก์ชั่นพลิก
ดังนั้นสิ่งที่คุณคิดจะพลิกทำอย่างไร
ครั้งนี้ได้รับการเรียกเมื่อ เราคลิกที่ปุ่มพลิก
สิ่งที่ควรพลิกฟังก์ชั่นทำอย่างไร
>> ผู้ชม: เปลี่ยน this.state.front จากความจริงเท็จเท็จจริง
>> NEEL เมธา: อ้างเพื่อใช้สิ่งที่ this.front is-- รัฐต้อนรับ
ใช้รัฐด้านหน้าถ้า มันเป็นความจริงให้เป็นเท็จ
ถ้าเป็นเท็จทำให้มันเป็นความจริงใช่มั้ย?
ดังนั้นลองที่
>> คุณไม่สามารถเปลี่ยนสถานะ เพียงแค่ทำ this.state
คุณไม่สามารถทำเช่นนี้
คุณไม่สามารถทำเช่นนั้น
คุณต้องใช้ฟังก์ชั่น เรียกว่า this.setState
>> เพื่อให้คุณสามารถพูด this.setState ด้านหน้า ลำไส้ใหญ่ที่นี้อีกครั้งอัศเจรีย์
หมายถึงจุดตรงข้าม
ผมคิดว่าถ้าเรื่องนี้ state.front เป็นความจริงก็จะเปิดเป็นเท็จ
ดังนั้นเราจะตั้งรัฐ จากความจริงเป็นเท็จ
ถ้าเป็นเท็จเราจะ ตั้งค่าผิดพลาดจริง
>> เพียงแค่แจ้งให้ทราบว่าเราจะกำหนดและได้รับเล็กน้อย แตกต่างกันและเพื่อให้ลองนี้
Bada Bing, ดูที่นี้
ปุ่มพลิกจะตอนนี้ สลับด้านหน้าไปด้านหลังรัฐ
>> และเพื่อให้ที่นี่เป็นที่ที่คุณเห็น นิด ๆ หน่อย ๆ ของความมหัศจรรย์ของการตอบสนอง
เหมือนอย่างที่เราไม่เคยบอกมันอีกครั้งทำให้
เราไม่เคยบอกว่ามันวาดอะไร
หากคุณกำลังทำเช่นนี้ โดยไม่ต้องตอบสนองคุณต้องการ
ได้ to-- ชอบเมื่อ ปุ่มพลิกมีการคลิก
คุณจะต้องบอกให้ ด้วยตนเองอีกครั้งทำให้ใช่มั้ย?
>> ตอบสนองที่เป็นจริงในเย็นว่าถ้าคุณ ให้รัฐบางอย่างและคุณสมบัติ
มันก็จะทำให้ สิ่งเดียวที่แน่นอน
และดังนั้นเมื่อเราเคยเราเปลี่ยน รัฐและคุณสมบัติที่
ตอบสนองเพียงวาทกรรมอีกครั้งสิ่งที่ทั้ง
มันรู้ว่ามี แบบหนึ่งต่อหนึ่งการติดต่อ
ระหว่างรัฐกับพารามิเตอร์และ HTML
ดังนั้นเมื่อใดก็ตามที่ทั้งของคนเหล่านั้น การเปลี่ยนแปลงโดยผ่านรัฐชุด
มันจะเปลี่ยนวิธีการ การจ่ายเงินมีการแสดงอีกครั้ง
และเพื่อตอบสนองโดยทั่วไปเป็นเหมือน รอให้คุณเปลี่ยน
>> เมื่อใดก็ตามที่มีการเปลี่ยนแปลงบางสิ่งบางอย่าง มันจะกลับมาทำให้ทั้งหน้า
และถ้ามันฟังดูไม่มีประสิทธิภาพ มันเป็นเพราะมันจะเป็น
แต่ตอบสนองการใช้สิ่งที่ เรียกว่าเงา DOM
แทนการวาดภาพหน้าตรงมัน ช่วยให้ต้นไม้ HTML เสมือนในหน่วยความจำ
>> คุณจะรู้ว่า HTML เป็นเหมือนต้นไม้ เช่นโครงสร้างข้อมูลแบบลำดับชั้น
มันทำให้ต้นไม้ปลอมในหน่วยความจำ และเมื่อใดก็ตามที่คุณอัปเดตหน้า
มันจะวาดปลอมอีก ต้นไม้และมันจะคำนวณ
สิ่งที่จะต้องมีการเปลี่ยนแปลงเพื่อให้ หน้าจะทำให้ต้นไม้สองต้นเท่ากับ
ดังนั้นโดยทั่วไปก็จริง อีกวาทกรรมมาก
และจากนั้นก็เพียง แต่ชอบการเปลี่ยนแปลง หน้านี้ในการปรับแต่งเล็ก ๆ น้อย ๆ ตามความจำเป็น
ดังนั้นจึงเป็นเรื่องมากที่มีประสิทธิภาพมาก
>> ดังนั้นโดยทั่วไปจะตอบสนอง เมื่อใดก็ตามที่คุณเปลี่ยนบางสิ่งบางอย่าง
มันจะกลับมาแสดงผลหน้าจริง
มันจะคิดออกว่าผมไม่จำเป็นต้อง เปลี่ยนที่จะทำให้หน้าจริงสะท้อนให้เห็นถึง
หน้าเสมือนและมันจะทำอย่างนั้น
นั่นคือ DOM เสมือน
มันเป็นหนึ่งในที่ใหญ่ที่สุด คุณสมบัติของการตอบสนอง
>> ที่ทำให้รู้สึก?
มีคำถามอะไรไหม?
ใช่?
>> ผู้ชม: อย่างไร ยังคงเปรียบเทียบกับ MVC
ที่เราพูดคุยเกี่ยวกับ ก่อนทรัพยากรเช่น
>> NEEL เมธา: ใช่คำถาม เป็นวิธีการที่ไม่ได้เปรียบเทียบกับ MVC?
คุณถามเกี่ยวกับทรัพยากร
ดีขอพูดคุยเกี่ยวกับวิธีการที่จะทำหน้าที่
>> ใน MVC คุณต้องการปรับปรุงรูปแบบ
ในกรณีนี้เราจะมีรูปแบบบัตร
มุมมองจะมี ปุ่มพลิกและการควบคุม
จะมีฟังก์ชั่นพลิก
ดังนั้นมุมมองที่จะบอก ควบคุมการพลิกพลิก
พลิกจะบอก รูปแบบการเปลี่ยนแปลงใช่มั้ย?
>> ดังนั้นเมื่อคุณทำ MVC คุณ ฟังรูปแบบการเปลี่ยนแปลง
และคุณอีกครั้งทำให้มุมมองตาม
หรือคุณก็ต้องชอบ มีการควบคุม
รอรูปแบบที่จะเปลี่ยนแปลงแล้ว เลือกและเลือกเป็นส่วนหนึ่งของสิ่งที่เหมือนเป็น
เพื่อเปลี่ยน.
ที่นี่เรามีสิ่งหนึ่งที่ แต่ในการตรวจสอบขนาดใหญ่
คุณต้องจำสิ่งที่ชอบ การเปลี่ยนแปลงในทุกสถานที่เดียว
ดังนั้นจึงเป็นที่น่ารำคาญเล็ก ๆ น้อย ๆ
และเพื่อตอบสนองเป็นอย่างดี เพราะมีเงาพระ
มันสามารถที่จะเพียงแค่ เขียนสิ่งที่ทั้ง
คุณไม่จำเป็นต้องที่จะเลือก เช่นคาดเดาสิ่งที่จะปรับปรุง
>> บน Facebook หากคุณต้องการ ได้รับข้อความใหม่ใน MVC,
คุณจะต้องจำไว้ว่า ตกลงเปลี่ยนสิ่งที่
ที่ด้านบนของ หน้าไอคอนข้อความ
นอกจากนี้ปรากฏหน้าต่างใหม่ที่ด้านล่าง
ยังให้เป็นสิ่งใหม่ในหน้าต่างที่
นอกจากนี้เล่นเสียง
>> นั่นเป็นจำนวนมากของสิ่งที่ ที่จะออกไปในเวลาเดียวกัน
ดังนั้นถ้าคุณทำไม่ได้ มีเงาพระที่คุณต้องการ
ต้องทำด้วยตนเองเพราะ คุณจะไม่สามารถกำจัดทั้งหน้า
คุณไม่สามารถที่จะให้คุณมี ที่จะเปลี่ยนสิ่งที่แต่ละคนด้วยตนเอง
ซึ่งเป็นที่น่ารำคาญจริงๆในการ MVC
>> ดังนั้นในการที่จะ ประหยัดพวกเขาเลือก
อัปเดตหน้าซึ่งเป็น ที่มีประสิทธิภาพ แต่ยังน่ารำคาญ
ในการตอบสนองเพราะเงา Dom คุณจะได้รับสิ่งที่ทั้งสองได้ฟรี
มันเป็นเพราะมีประสิทธิภาพ เงาของพระ
คอขวดที่มีการอัปเดตหน้า
มันไม่ได้ทำจัดการต้นไม้
คุณจะได้รับประสิทธิภาพ
นอกจากนี้คุณยังจะได้รับความสะดวกในการใช้งานเพราะ ถ้าคุณเพียงแค่เขียนทั้งหน้า
แต่คุณก็รู้ว่าสิ่งที่ถูกต้อง, สิ่งที่ เป็นไปได้ในหน้าที่ไหนสักแห่ง
มันอาจจะอยู่ในสถานที่ที่แตกต่างกัน แต่ มันเป็นไปได้ในหน้าใช่มั้ย?
ดังนั้นคุณก็กลายเป็นอีกครั้ง สิ่งทั้งหมดจริง
และคุณอาจจะทำให้คู่ การเปลี่ยนแปลงไปยังหน้าตัวเอง
>> ดังนั้นอีกครั้งใน MVC คุณ จะต้องเลือก
ระหว่างการใช้งานง่ายและมีประสิทธิภาพ และตอบสนองคุณจะได้รับทั้ง
ดังนั้นมันจะดีกว่า
ความรู้สึกให้?
ของแข็ง
>> ตกลงดังนั้นเรามาดูให้มาพูดคุย เล็กน้อยเกี่ยวกับขั้นตอนที่ 4
วิธีการที่เราสามารถฝังส่วนประกอบ
ดังนั้นเราจึงมีนี้ในขณะนี้
เรามีปุ่มเล็ก ๆ น้อย ๆ ของเราเย็น
เราสามารถพลิกกลับและ มาและนั่นคือทั้งหมดที่มันไม่
สมมติว่าเราต้องการที่จะ มีองค์ประกอบอื่น
สมมติว่าแอพพลิเค flashcard ของเราควรจะเป็น มีรายการของบัตรทั้งหมด
ว่าคุณมีเพื่อให้หมายความว่าเรา ควรจะมีองค์ประกอบอื่น
ดีอาจจะเรียกว่ามุมมองรายการ
ขอให้มุมมองรายการที่ อยู่อย่างมี CardView ที่
และดูรายการนี​​้และ CardView จะชอบทำงานร่วมกัน
และคุณสามารถรวมพวกเขา ที่จะทำให้ app ของเราสำหรับคุณ
>> ดังนั้นครั้งแรกที่ขอให้ คู่บัตรเพิ่มเติมที่เหมาะสม
ขอบอกว่าสิ่งที่บัตร?
และเพียงแค่ดังนั้นฉันจะได้ไม่ต้อง เจาะคุณกับการพิมพ์ใน
ฉันแค่จะไปคัดลอกจากที่นี่
ดังนั้นฉันจะไม่ได้ ให้เพียงบัตรเดียว
ฉันจะให้อาร์เรย์ของบัตร
ดังนั้นก่อนปพลิเคชัน ไปทำลายสำหรับตอนนี้
สิทธิทั้งหมดดังนั้นเรากำลังจะทำให้ นี้สามารถจัดการกับหลายบัตร
ครั้งแรกดังนั้นเรากำลังจะให้มันไม่ได้ เพียงบัตรเดียว แต่อาร์เรย์ของบัตรที่
เช่นรายการของบัตร
และในกรณีนี้เรามีสามของพวกเขา
>> สิทธิทั้งหมดดังนั้น app เป็น จะได้รับบัตรรายการ
และก็จะที่จะตัดสินใจว่า อย่างใดอย่างหนึ่งเพื่อแสดงให้ CardView
CardView สามารถ ทำให้แผ่นหนึ่ง แต่การตรวจสอบ
ได้รับรายชื่อของบัตรทั้งหมดใช่มั้ย?
>> ดังนั้นเมื่อคุณคิดออกหนึ่ง บัตรจะมอบให้กับ CardView,
วิธีที่คุณจะคิดว่าคุณอาจจะสามารถ จะทำให้การตัดสินใจเกี่ยวกับการที่การ์ด
เพื่อที่จะแสดง?
เพื่อให้คุณคำใบ้ก็ชั่วคราว คุณจะดูบัตรบางอย่าง
หากคุณรีเฟรชหน้าคุณจะ เพียงแค่กลับไปบัตรแรก
ที่ตกลงเพราะมันเป็นชั่วคราว
เทคนิคสิ่งที่เราอาจจะใช้งานหรือไม่
>> ผู้ชม: คุณสามารถทำให้ตัวแปร ดังนั้นเพียงแค่ว่าคุณมีหน้า
นี้เป็นความจริงที่คุณสามารถ มีบัตรปัจจุบันเท่ากับ 1
>> NEEL เมธา: ใช่เราจึง ต้องการที่จะมีรัฐใช่มั้ย?
คุณจะใช้ของรัฐใน องค์ประกอบที่จะคิดออก
ซึ่งบัตรทำเราต้องการที่จะได้รับ
เช่นเดียวกับที่เรามีรายชื่อของ บัตรทั้งหมดเราจะ
ใช้รัฐที่จะคิดออก หนึ่งในบัตรครั้งแรก
ไพ่ใบที่สอง, ไพ่ใบที่สามและอื่น ๆ
>> ดังนั้นการตรวจสอบเพื่อให้การตรวจสอบจะได้รับ มีฟังก์ชั่น getInitialState,
ฟังก์ชั่นการกลับมา getInitialState
และเราก็จะบอกว่า activeIndex 0
ดังนั้นตอนนี้ app ของเรามีสถานะของตัวเอง
>> และอื่น ๆ ในขณะนี้เมื่อแสดงผลที่จะคิดออก บัตรขอเพียงแค่ไปที่อาร์เรย์
และคว้าสิ่งที่ดัชนีที่
เลือกบัตร this.props.cards เท่ากับ this.state.activeIndex
ดังนั้นในขณะที่คุณดูที่นี่และอุปกรณ์ประกอบฉาก รัฐจริงทำงานร่วมกัน
ดังนั้นขณะนี้ที่เรามี activeCard ของเรา เราจะเรียกมันว่า activeCard,
และขอให้ดูว่าการทำงานนี้
[ไม่ได้ยิน]
>> โอ้ว่าเป็นข้อผิดพลาดข้อความ
อา
>> เย็นครับดังนั้นตอนนี้เราก็กลับมา ไปที่ที่เราเคยอยู่มาก่อนใช่มั้ย?
โปรแกรมเดิมยกเว้น ตอนนี้เราสามารถสนับสนุน
รายชื่อของบัตรไม่ได้เป็นเพียงบัตรเดียว
และตอนนี้อีกครั้งถ้าเราเปลี่ยน activeIndex เราสามารถไป 0-1,
และตอนนี้ว่าบัตรที่สอง และจากนั้นเราก็ไป 0
ดังนั้นนี่คือใหม่ รุ่น souped ขึ้นของเรา
>> ตกลงดังนั้นตอนนี้เรามีมุมมองรายการที่ แสดงบัตรทั้งหมดในโปรแกรมของคุณ
ดังนั้นเราจะทำใหม่ ส่วนประกอบที่เรียกว่า ListView
ให้ ListView เท่ากับ react.createClass
ดังนั้นเราจึงต้องการที่จะทำให้เรียงลำดับ รายการที่มีรายการสำหรับบัตรทุก
และเพื่อให้เรามีพวงของบัตร
เราต้องการรายการหนึ่ง สำหรับการ์ดทุกใช่มั้ย?
เราสามารถทำสำหรับวงหรือ บางสิ่งบางอย่างที่จะทำให้รายการรายชื่อใหม่
แต่วิธีการที่คุณทำมันใน ตอบสนองการใช้สิ่งที่เรียกว่าแผนที่
แผนที่เป็นเครื่องมือหรือฟังก์ชั่นที่คุณใช้เป็น ว่าทุกรายการวิ่งฟังก์ชั่นบางอย่าง
ใช้ค่าตอบแทนและ จะช่วยให้คุณกลับมาที่
>> เพื่อให้เป็นตัวอย่างที่เรามีอาร์เรย์ 1, 2, function-- 3.map นี้
ชวเลขเป็น ลูกศร function-- x x x ครั้ง
นี้กล่าวว่าสำหรับจำนวนทุก ใน 1, 2, 3, เอามัน
สแควร์มันและให้มันกลับมา
ดังนั้นสิ่งที่คุณคิดว่า 1, 2 x 3.map ไปคร​​ั้ง x
x ช่วยให้คุณได้รับกลับมา ที่ฟังก์ชั่นนี้
ทำงานในองค์ประกอบของอาร์เรย์ว่าทุก
>> ผู้ชม: 1, 4 9
>> NEEL เมธา: อ๋อ, 1, 4, 9 เพราะคุณทำ 1 ครั้ง 1
ที่ช่วยให้คุณหนึ่ง
นั่นเป็นองค์ประกอบแรก
>> 2 ครั้งที่ 2 เป็น 4
นั่นเป็นองค์ประกอบที่สอง
3 ครั้งที่ 3 คือ 9
นั่นเป็นองค์ประกอบที่สาม
ความรู้สึกให้?
แผนที่ดังนั้นมีเทคนิคคุณ ใช้ในการเขียนโปรแกรมการทำงาน
รูปแบบใหม่ของ การเขียนโปรแกรมที่จะทำบางสิ่งบางอย่าง
องค์ประกอบในรายการของคุณทุกคน
และเพื่อให้เสียงที่คุ้นเคย
เรามีรายการของบัตร
เราต้องการที่จะได้รับรายการสำหรับทุกคน หนึ่งดังนั้นเราก็จะใช้แผนที่ที่นี่
เราจะบอกให้เท่ากับรายการ this.props, การ์ด, แผนที่
>> และเพื่อให้ได้รับบัตรเรา จะสร้างในรายการ
ด้วยเนื้อหาของบัตรที่ด้านข้างของมัน
ขอเพียงบอกว่าเราต้องการที่จะให้ออก บัตรคำถามเพื่อ card.question
ดังนั้นรายการนี​​้มี อาร์เรย์ของ LI หรือบัตรรายการ
ที่มีรายการหนึ่ง รายการบัตรทุก
และที่มีคำถามการ์ด
ความรู้สึกให้?
>> เย็นดังนั้นตอนนี้เรามา จริงที่พิมพ์ออกมา
ดังนั้นเราจะกลับมายู
ภายในรายการที่เรียงลำดับ เราก็จะติดรายชื่อทั้งหมด
ที่พวกเขาให้เรา
เย็น.
>> สิ่งที่ถูกต้องดังนั้นตอนนี้ มุมมองรายการงานเพียงแค่หา
คำถามใด ๆ เกี่ยวกับมุมมองรายการ?
คุณมีพวงของบัตร
คุณทำให้รายการสำหรับบัตรทุก
และคุณใส่ไว้ภายในเรียงลำดับ รายการและคุณให้มันกลับมา
ดังนั้นตอนนี้ขอทำหน้าที่ดังนั้นเราจึงฝัง นี้ภายในของ app ของเรา
เพื่อให้เราสามารถทำเช่นนี้มุมมองรายการ
เราทำอะไรอาร์กิวเมนต์ส่งผ่านไปยังมุมมองรายการ?
คุณสมบัติอะไรที่เราจะให้มันได้หรือไม่
จำไว้ว่าถ้าคุณให้ มันพวงของไพ่
มันจะทำให้รายการ มุมมองสำหรับบัตรเหล่านั้น
ดังนั้นสิ่งที่เราจะผ่าน ที่นี่เป็นอาร์กิวเมนต์?
ผู้ชม: รายการของบัตรหรือไม่?
NEEL เมธา: ใช่ดังนั้นบัตร เท่ากับ this.props.cards ใช่มั้ย?
และเพื่อให้เป็นปัญหาเฉพาะ คือการที่คุณสามารถ
หันองค์ประกอบหนึ่งในระดับชั้นนำในการแสดงผล เพื่อให้คุณได้มีการห่อมันใน div
มันเป็นเรื่องแปลก.
ดังนั้นเรามาดูว่า
ไม่ว่าทำงานอย่างไร
>> ครับมีคุณไป
ดังนั้นตอนนี้เรามีรายการ ของบัตรที่ด้านล่าง
แล้วเรามีของเรา CardView ตัวเองอยู่ด้านบน
และที่จะพลิกระหว่าง ทั้งสองด้านของบัตร
ตอนนี้ไม่ทำให้รู้สึกว่าฉันไม่ว่าที่?
ใช่เช่นนั้นอีกครั้งเรามีสองส่วน
พิมพ์องค์ประกอบแรก ออกทุกบัตรในรายการ
นั่นเป็นมุมมองรายการ
และส่วนที่สอง เพียงแค่พิมพ์ออกบัตรที่
ถ้าคุณให้บัตรบางอย่างก็จะ พิมพ์ข้อมูลเกี่ยวกับบัตรที่
และช่วยให้คุณสามารถพลิกกลับมา
>> ดังนั้นหากเราต้องการเราสามารถลองและพูดคุย เกี่ยวกับการเพิ่มคุณสมบัติใหม่บางอย่างนี้
มิฉะนั้นเราสามารถพูดคุยอีกเล็กน้อย เกี่ยวกับความเร็วของเครื่องปฏิกรณ์
หรือเราสามารถตอบ คำถามที่คุณอาจมี
เพราะเหล่านี้มีทุกชิ้นส่วนหลัก การตอบสนองที่ผมอยากจะพูดคุยเกี่ยวกับ
เราสามารถไปข้างหน้า
เราสามารถตอบคำถาม
สิ่งที่คุณต้องการ
>> ผู้ชม: คุณสามารถใช้ JSX ปกติใน JavaScript?
หรือเป็นสิ่งที่ว่า มาพร้อมกับ [ไม่ได้ยิน]
>> NEEL เมธา: คำถามคือสามารถ คุณใช้ JSX ด้วย JavaScript ปกติ?
คำตอบคือใช่
JSX เป็นเพียงวิธีการที่จะใช้เวลาของคุณ จาวาสคริปต์ที่มี HTML ภายในของมัน
และจะรวบรวมลงใน JavaScript ที่ ไม่ได้มี HTML ภายในของมัน
ดังนั้นสังเกต that-- เพื่อแจ้งให้ทราบที่นี่
นี้ดูเหมือนว่าคุณมีเช่น div และคุณมีสิ่งที่ภายในของมัน
>> ที่รวบรวมเพื่อ JavaScript ที่ เช่นสร้างสิ่งเดียวกัน
ผมคิดว่าสิ่งที่ผมพูดคือว่า JSX เป็นเพียงประโยคเหมือนมัน
preprocessor ​​สำหรับ JavaScript มาก เช่น PHP เป็น preprocessor ​​สำหรับ HTML
JSC เป็น preprocessor สำหรับจาวาสคริปต์ที่ช่วยให้
คุณใส่ HTML ภายในของ JavaScript ของคุณ
ดังนั้นถ้าคุณมีหม้อแปลงที่เหมาะสม ซึ่งเป็นสิ่งที่เรียกว่า [ไม่ได้ยิน]
ที่จะเปลี่ยน
พรีโพรเซสเซอร์ขวา มันจะช่วยให้คุณทำอย่างนั้น
>> ผู้ชม: [ไม่ได้ยิน]
NEEL เมธา: โดยปกติแล้วคุณไม่จำเป็นต้อง ที่จะนำ HTML ภายในของ JavaScript
ยกเว้นในกรณีที่คุณทำปฏิกิริยา
แต่คุณสามารถทำมันต่อไป
ครับ?
>> ผู้ชม: ฉันคิดว่าคุณ ได้อธิบายไว้ตอบสนอง
เป็นภาษาการเขียนโปรแกรมการทำงาน
เราได้รับการเรียนรู้ซีใน CS50
C ยังเป็นภาษาที่ทำงาน?
NEEL เมธา: ดังนั้นคำถาม เป็นเรื่องเกี่ยวกับการทำงาน
เมื่อเทียบกับสิ่งที่เรียกว่าอีก การเขียนโปรแกรมหรือความจำเป็นในการดำเนินการ
มีสองชนิดของโปรแกรมที่นิยมคือ
หนึ่งเรียกว่าขั้นตอนที่ เป็นข้อมูลเกี่ยวกับการทำเช่นคำสั่ง
และเป็นหนึ่งในการทำงานซึ่งเป็นสิ่งที่ เกี่ยวกับการมีฟังก์ชั่นและมี
เข้าและส่งออกของผู้ที่
ตอบสนองเป็นกระบวนทัศน์การทำงาน
ซีเป็นกระบวนทัศน์ในการดำเนินการมาก
>> และเป็นตัวอย่างที่ C ตัวอย่างเช่น คุณไม่ได้ทำด้วยวิธีนี้เปิดเผย
การทำโปรแกรมใช่ไหม?
คุณต้องบอกว่าพิมพ์นี้
เปลี่ยนโครงสร้างข้อมูลนี้
พิมพ์
มันเป็นเรื่องของคำสั่ง
>> ในการตอบสนองมีไม่ ว่าคำสั่งจำนวนมาก
มันคือทั้งหมดที่เกี่ยวกับการมี ชิ้นส่วนที่คุณใส่กัน
พวกเขาต้องการฟังก์ชั่น
คุณมีเช่นฟังก์ชั่น เรียกว่า CardView,
ซึ่งเป็นฟังก์ชั่น ที่มีนำเข้าส่งออก
และเพื่อตอบสนองทั้งหมด เกี่ยวกับปรัชญานี้
เรา having-- คุณมีข้อมูล
คุณจะผ่านมันผ่านทางนี้ อัลกอริทึมและมันจะ
HTML การส่งออกที่คุณ เพียงแค่พิมพ์หน้า
และเพื่อให้คุณได้ สร้างมันทีละชิ้น
>> ดังนั้นการวาดอุปมาไปยังสิ่งที่ ผมกล่าวว่าก่อนที่คุณจะรู้ว่า
บน Facebook ถ้าคุณได้รับข้อความ และคุณเลือกชิ้นส่วนสิ่งที่ต้องปรับปรุง
ที่ขั้นตอน
มันเป็นความจำเป็นที่ใช่มั้ย?
ตกลงผมได้รับข้อความ
ลองเปลี่ยนบัญชีมี
>> ลองปรากฏหน้าต่างที่นี่
ลองเปลี่ยนบัญชีมี
ลองวาดที่นี่
นั่นเป็นวิธีการขั้นตอน
>> นั่นคือสิ่งที่สิ่งที่ต้องการเชิงมุม เพิ่มโครงกรอบอื่น ๆ ที่ใช้
ตอบสนองการทำงาน
มันเป็นวิธีที่แตกต่างกันมาก คิดเกี่ยวกับสิ่งที่
มันต้องใช้ความคิดในการขอมีนี้ ฟังก์ชั่นหรือขั้นตอนวิธีการที่คุณจะ
ให้ข้อมูล
มันจะคายออกว่ามัน ควรจะเป็นและคอมพิวเตอร์
จะดูแลการชั่งน้ำหนักออก
คุณไม่จัดการกับมันด้วยตัวคุณเอง
ที่ทำให้เล็กน้อยของความรู้สึก?
ใช่?
>> ผู้ชม: ภาษาในการทำงาน ทุกอย่างเกิดขึ้นในครั้งเดียว
>> NEEL เมธา: ไม่มีสิ่งที่เกิดขึ้นในการสั่งซื้อ
เช่นเดียวกับที่นี่ยังคงมี สั่งซื้อ แต่ก็ไม่ได้
เกิดขึ้นในการสั่งซื้อเช่น ยกย่องคำสั่งคำสั่ง
มันเกิดขึ้นในคำสั่งของ ฟังก์ชั่นช่วยให้คุณมีเอาท์พุท
ใส่ที่เป็นฟังก์ชั่นอื่น
ที่ใส่เข้าไปอีก ฟังก์ชั่นฟังก์ชั่นอื่น
>> ถ้าคุณทำ CS51 คุณจะ เรียนรู้โปรแกรมการทำงาน
ออกมาเล็ก ๆ น้อย ๆ ของขอบเขตของนี้
แต่โดยทั่วไปสิ่งที่ทำให้ ตอบสนองเย็นไม่ได้เป็นเพียง
หนึ่งวิธีการไหลของข้อมูล และพระเสมือน
แต่ยังมีความคิดนี้ของ โปรแกรมการทำงาน
และการเขียนโปรแกรมการทำงานเป็นเรื่องง่ายมาก ในการเขียนและทำสิ่งดีๆออกมาจาก
และมันเป็นเรื่องง่ายมากที่จะคิดว่า เกี่ยวกับเหตุผลที่เกี่ยวกับ
ดังนั้นจึงเป็นอีกวาดที่ดีของการตอบสนอง
คำถามใด ๆ เพิ่มเติมหรือไม่
ใช่?
>> ผู้ชม: อืมคุณจะทำไม ใช้ให้ตรงข้ามกับ var?
>> NEEL เมธา: ดังนั้นคำถามคือ ทำไมคุณให้ใช้แทน var?
นี่คือสิ่งที่เรียกว่า ES6 หรือ ECMAScript 6
มันเป็นรุ่นใหม่ของ JavaScript
มีพวงของเหตุผลทางเทคนิคเป็น, แต่ขอให้เป็นรุ่นที่ดีขึ้นของ var
>> มันเป็นวิธีที่คุณประกาศตัวแปร
คุณสามารถใช้ให้
คุณสามารถใช้ var
ให้มีพวงของเทคนิค reasons-- คุณสามารถมองพวกเขา
ขึ้น later-- ว่าทำไมมันจะดีกว่า
โดยทั่วไปมี ES6 ที่ดีบางอย่าง ไวยากรณ์ใหม่บางคุณสมบัติใหม่
ที่ด้านบนของ JavaScript เก่า
>> ดังนั้นเราจึงมีเหมือนห้านาที
ฉันแค่อยากจะพูดคุยเกี่ยวกับ สิ่งหนึ่งที่เพิ่มเติมเร็วจริง
หากคุณมีคำถามใด ๆ ขอพูดคุยเกี่ยวกับเรื่องนี้หลังจากนี้
แต่เพื่อให้ได้รับเพียงแค่นี้ ติดอยู่ในกล้องฉันเพียงแค่
ต้องการที่จะพูดคุยเล็กน้อยเกี่ยวกับการคุณ ตอบสนองการใช้งานจริงในปพลิเคชันของคุณ
>> ถ้าคุณไปที่นี่ Facebook.GitHub.IO/react,
นี้เป็นหน้าบ้านสำหรับตอบสนองและ มันจะแสดงวิธีที่คุณใช้งานจริง
ตอบสนองในหน้าเว็บของคุณ
โดยทั่วไปก็เล็ก ๆ น้อย ๆ ซับซ้อนพยายามติดตั้งตอบสนอง
มันไม่ง่ายอย่างที่คุณเพียงแค่ลาก และวาง JavaScript ในมี
>> คุณต้องมีหม้อแปลงของคุณ ตั้งค่าซึ่งจะเป็นมันทำมาก่อน
เปิด JSX ของคุณให้เป็น ปกติ JavaScript
คุณมีสิ่งที่จะ รวบรวม ES6 คุณเข้าสู่ภาวะปกติ
JavaScript มีจำนวนมากของการเคลื่อนย้าย ชิ้นส่วนที่คุณต้องทำเพื่อให้มีสิ่งที่
เรียกว่าเสรีชน, Yeoman.io
และนี่คือเครื่องมือบรรทัดคำสั่งที่จะ ช่วยให้คุณนั่งร้านออกมาตอบสนองของคุณ
โครงการได้อย่างง่ายดาย
>> เพื่อให้คุณสามารถอ่านเกี่ยวกับเรื่องนี้ ต่อมา แต่มีเครื่องมือบางอย่าง
ข้อเสนอที่เสรีชน
พวกเขาจะช่วยให้คุณสามารถสร้างการตอบสนอง แอพพลิเคกับทุกสิ่งที่สร้างขึ้นใน
เหมือนมันจะได้สร้างขึ้น ในชิ้นส่วนที่สร้างขึ้นใน
มันจะมีหม้อแปลงของคุณสร้างขึ้นใน
พวกเขามีจำนวนมากของเย็น สิ่งที่สร้างขึ้นโดยอัตโนมัติ
โดยใช้สิ่งเหล่านี้เรียกว่าเครื่องกำเนิดไฟฟ้า
>> ดังนั้นการอ่านเกี่ยวกับเรื่องนี้หากคุณต้องการ
เพียงไปบนองค์รักษ์, Y-E-O-M-A-N และ คุณสามารถหาเครื่องกำเนิดไฟฟ้าเช่นนี้
และมีเครื่องกำเนิดไฟฟ้าเช่น เหล่านี้คุณเพียงต้องการที่หนึ่ง
เป็นคำสั่งที่บรรทัดคำสั่งคู่
มันจะนั่งร้านออก ทั้งตอบสนอง app สำหรับคุณ
มันจะได้รับทั้งหมดท่อด้วยตนเอง และงานที่ทำเสียงฮึดฮัดสำหรับคุณ
และนี่คือเหตุผลที่คุณเพียงมุ่งเน้น เพียงเขียนตอบสนอง
>> ดังนั้นโดยทั่วไปการสร้าง แอปพลิเคตอบสนองเป็นขี้ปะติ๋ว
มันสายทั้งหมดเข้าด้วยกัน แต่มี เป็นเครื่องมือที่จะทำเพื่อคุณ
ดังนั้นหากคุณต้องการที่จะทำให้การตอบสนอง แอปพลิเคลองทำมันเป็นอย่างนั้น
ถ้าคุณเพียงต้องการที่จะทดลอง คุณสามารถลองใช้ CodePen นี้
เพราะ CodePen นี้ ทั้งหมดที่ตอบสนองต่อการเดินสายไฟ
ฉันได้ทำทุกงานสำหรับคุณแล้ว
>> ดังนั้นหากคุณต้องการที่จะทำให้เหมือน การผลิตเพื่อตอบสนองปล่อยแอพพลิเค
ลองของเครื่องกำเนิดไฟฟ้าเหล่านี้
หากคุณเพียงแค่ต้องการที่จะเล่น รอบก็มักจะมีมูลค่าเพียง
เช่นลองเล่นไปรอบ ๆ บน CodePen ที่นี่
เสียงดี?
เย็น.
>> ดังนั้นนั่นคือทั้งหมดที่ผมมี
อีกครั้งรหัสและตัวอย่าง ไปได้ในเว็บไซต์นี้ได้ที่นี่
ดังนั้นอีกครั้งที่เราไม่ได้พูดคุย เกี่ยวกับไวยากรณ์มากตอบสนอง,
แต่จะหาทุกคน รายละเอียดการสร้างประโยคเล็ก ๆ น้อย ๆ
มันคือทั้งหมดที่จะสามารถใช้งานได้ ในเว็บไซต์นี้ได้ที่นี่
>> ดังนั้นผมจึงอยากแนะนำเช่น ใช้ขั้นตอนแรก
ใส่ลงใน CodePen ของคุณ
ลองทำงานในการทำ ไปยังขั้นตอนที่สอง
มีขั้นตอนที่สี่เป็นและเพียง ดูที่คุณได้รับจากการที่
>> คำถามใด ๆ เพิ่มเติมให้ตรวจสอบ ออกหน้านั้นหรือส่งอีเมลฉัน
นั่นคืออีเมลของฉัน
แต่ฉันชอบที่จะช่วยให้คุณมีใด ๆ คำถามที่คุณอาจมีเกี่ยวกับการตอบสนอง
ดังนั้นครับนั่นคือทั้งหมดที่ผมมี
ขอขอบคุณทุกท่านมากครับสำหรับ ดูหรือการเข้าร่วม
และฉันจะใช้คำถามใด ๆ คุณอาจจะมีหลังจากนี้ในขณะนี้
ดังนั้นขอขอบคุณทุกท่านสำหรับการดู