Components: React Tutorial

ไม่เป็นไร. มาพูดถึงส่วนประกอบกันดีกว่า จากนั้นเราจะทำงานกับส่วนประกอบที่มีอยู่สองสามอย่างและลองใช้งาน ปรับแต่งค่าบางอย่างและดูว่าเกิดอะไรขึ้น ดังที่เราได้กล่าวไปแล้ว ส่วนประกอบเป็นส่วนประกอบหลักของ React มี React อยู่จริงเพื่อช่วยคุณสร้างส่วนประกอบและให้ส่วนประกอบเหล่านั้นสื่อสาร ส่งข้อมูล ส่งข้อมูล และวิธีการระหว่างกัน ถ้าเราไปที่เอกสารประกอบของ React มีย่อหน้าเล็ก ๆ ที่ดีนี้ จริง ๆ แล้วเป็นประโยคที่ฉันชอบส่วนประกอบ ให้คุณแยก UI เป็นชิ้นส่วนที่นำกลับมาใช้ใหม่ได้อิสระและคิดเกี่ยวกับแต่ละส่วนแยกกัน พูดตามตรง ส่วนที่ยากที่สุดของ React ก็คือการหาว่าจะสร้างส่วนประกอบอะไร ถ้าเอาโปรแกรมใหญ่ๆ จะแบ่งเป็นกี่ส่วนครับ? เราจะพูดถึงเรื่องนี้มากขึ้น เราจะพูดถึงรูปแบบมากขึ้น แต่แนวคิดก็คือการนำแอพพลิเคชั่นบางตัวมาใช้หรือเพียงแค่ชิ้นส่วนของฟังก์ชันการทำงานและแยกย่อยออกเป็นชิ้น ๆ ที่นำกลับมาใช้ใหม่ได้ ห่อให้เรียบร้อย ติดโบว์สวยๆ ให้พวกเขา ตั้งชื่อให้พวกเขา ทำเป็นส่วนประกอบ ดังนั้นพวกเขาจึงมักจะรวมบางสิ่งเข้าด้วยกัน คุณเห็น HTML, CSS พร้อมตรรกะ JavaScript บางอย่าง ตัวอย่างเช่น องค์ประกอบแรกที่เราจะพิจารณาคือองค์ประกอบการให้คะแนน องค์ประกอบการให้คะแนนดาว ฉันมีมันเปิดในหน้าต่างแยกต่างหาก นี่ตรงนี้จึงเป็นองค์ประกอบการให้คะแนนหนึ่งดาว นี่เป็นครั้งที่สอง และคุณจะเห็นว่ามีการแสดงสิ่งต่างๆ HTML, CSS และข้อมูลบางส่วนที่นี่ ดวงดาวที่คุณลอยไป มันเปลี่ยนไป สีสันก็เปลี่ยนไป แต่เมื่อฉันคลิก เรากำลังเรียกใช้โค้ดบางอย่าง มีเหตุผลบางอย่างในการแสดงอีโมจิที่มั่นคงและยิ้มแย้ม หรือน่าอัศจรรย์ในอีโมจิไฟ อีโมจิที่แย่มากและอาเจียน จึงมีบางสิ่งที่เราเห็น HTML, CSS และ JavaScript รวมกันเป็นองค์ประกอบเดียว ดังนั้นเราจะกลับมาที่นี่ในอีกสักครู่ แต่ก่อนอื่น ฉันต้องการแสดงให้คุณเห็นว่าฉันจะเรียกส่วนประกอบเทียมว่าอะไร ดังนั้นนี่ไม่ใช่ปฏิกิริยาที่แท้จริง นี่เป็นเพียง JavaScript ธรรมดาสำหรับคอมโพเนนต์ dog ดังนั้นจึงเป็นตัวอย่างที่โง่เขลา แต่แนวคิดก็คือ เรามีคลาสที่เรียกว่า dog และแต่ละ dog component แต่ละอินสแตนซ์จะมีชื่อและสี และมันรู้วิธีแสดงตัวเองเป็น HTML ด้วย มันรู้ว่าจะแสดงอะไรหรือจะส่งคืนอะไรเมื่อเรียกการเรนเดอร์ ในตัวอย่างนี้ แท็กย่อหน้าที่มีชื่อนี้ง่ายมาก ดังนั้นด้วยชื่อของสุนัขที่เพิ่มเข้าไปข้างใน ดังนั้นเราจึงสามารถมีสุนัขห้าตัวที่แต่ละตัวมีชื่อต่างกัน มีสีต่างกัน เราไม่ได้ใช้สีในขณะนี้ แต่เมื่อเราแสดงแต่ละสีบนหน้า เราจะเห็นแท็กย่อหน้าที่แตกต่างกัน นั่นจึงเป็นตัวอย่างที่ง่ายมาก และอีกครั้ง นี่ไม่ใช่ปฏิกิริยาตอบสนองที่แท้จริง แต่เป็นการแสดงให้เห็นแนวคิด เรานำข้อมูลบางส่วน ข้อมูล JavaScript และตรรกะบางส่วน จากนั้นเรายังบอกส่วนประกอบว่าควรแสดงผลอะไร ควรมีลักษณะอย่างไรบนหน้าจอ บันทึกย่อไม่ใช่ส่วนประกอบทั้งหมดเป็นแบบคลาส ดังนั้นฉันจึงเขียนที่นี่ว่าส่วนประกอบคือคลาสที่รู้วิธีแสดงตัวเองเป็น HTML เราจะเรียนรู้เกี่ยวกับองค์ประกอบของฟังก์ชันด้วย เราใช้เวลาส่วนใหญ่กับพวกเขาเมื่อเราพูดถึง hooks แต่ฉันจะทำวิดีโอแยกต่างหากในส่วนนี้ที่พูดถึงความแตกต่างระหว่างส่วนประกอบทั้งสองประเภท ฉันไม่ต้องการให้คุณจมอยู่กับไวยากรณ์ในตอนนี้ ฉันแค่ต้องการพูดถึงแนวคิดหลักเกี่ยวกับส่วนประกอบ ดังนั้น หากคุณไปที่การสาธิตนี้ นี่คือเว็บไซต์ที่ชื่อว่า Code Sandbox ซึ่งเป็นแหล่งข้อมูลที่ยอดเยี่ยมมาก คล้ายกับ Code Pen แต่ดีกว่าในบางแง่มุม ปากกาโค้ดนั้นยอดเยี่ยมสำหรับการค้นหาส่วนหน้า, HTML, CSS, JavaScript, แอนิเมชั่น หรือฉันไม่รู้, เลย์เอาต์, อะไรทำนองนั้น Code Sandbox สร้างขึ้นเพื่อเลียนแบบสภาพแวดล้อมในเครื่องของคุณ ดังนั้นจึงใช้ NPM คุณสามารถเพิ่มแพ็คเกจจริงได้ ไม่สำคัญหรอกว่า ณ จุดนี้ถ้าคุณไม่เคยเห็นมาก่อน แต่ลิงก์นี้รวมอยู่ในคำอธิบายและคุณสามารถแก้ไขสิ่งต่างๆ ได้ คุณสามารถเล่นและปรับแต่งและดูว่าเกิดอะไรขึ้น ที่ด้านขวาของหน้าจอคือเว็บไซต์ของเราที่ทำงานอยู่ นี่คือแอปพลิเคชัน React และเพื่อให้ง่ายขึ้น สิ่งที่ฉันทำคือคลิกที่นี่ ซึ่งจะแสดงออกมาในหน้าต่างของตัวเอง ด้วยวิธีนี้ ฉันจะสามารถปิดหน้าต่างนี้ที่นี่ และตอนนี้ฉันสามารถซูมเข้าได้ ดังนั้นหากคุณกำลังติดตาม หากคุณต้องการเก็บไว้ในหน้าต่างเดียวก็ไม่เป็นไร ดังนั้นเราจึงมีไฟล์สามไฟล์ ไฟล์ JavaScript สามไฟล์ ไฟล์หนึ่งเรียกว่าดัชนี ไฟล์หนึ่งเรียกว่าสตาร์ นี่คือองค์ประกอบของตัวเอง จากนั้นองค์ประกอบอื่นที่เรียกว่าการให้คะแนน ดังนั้นอย่ากังวลเรื่องไวยากรณ์ อย่ากังวลกับโค้ดจริง แค่กังวลว่าส่วนต่างๆ เหล่านี้เข้ากันได้อย่างไร ดังนั้นเราจึงมีองค์ประกอบพื้นฐานที่สุดอย่างแรกของเรา ซึ่งเรียกว่าดาว และมันเป็นตัวแทนของดาวฤกษ์ดวงเดียว นี่คือองค์ประกอบหนึ่งดาว สิ่งที่ฉันจะทำตอนนี้คือไปที่ดัชนี JS ของฉัน ซึ่งอยู่ตรงนี้และมีบางอย่างที่เรียกว่า APP นี่เป็นองค์ประกอบเช่นกัน ดังนั้นจึงมีส่วนประกอบของแอปที่เป็นทั้งหน้าที่นี่ จากนั้นจะมีองค์ประกอบที่เรียกว่าการให้คะแนนซึ่งมีองค์ประกอบดาวหลายดวง ดังนั้นหากคุณต้องการติดตามและเล่นไปรอบ ๆ เราสามารถแสดงความคิดเห็นได้ หรือลบออก และสิ่งที่เราจะทำคือกำหนดองค์ประกอบดาวดวงแรกของเรา และดูเหมือนดาวดวงนี้ราวกับเป็นแท็ก HTML ทำให้มันใหญ่ขึ้น แล้วเราต้องเพิ่มเครื่องหมายทับท้ายนี้ นี่ดูเหมือน HTML มันไม่ใช่ HTML เราจะได้เรียนรู้มากมายว่ามันคืออะไร เรียกว่า JS x ส่วนถัดไปทั้งหมดเกี่ยวกับ JS X สิ่งที่ยอดเยี่ยมอย่างหนึ่งเกี่ยวกับ React คือเราสามารถเขียนโค้ดที่เป็น HTML แทน JavaScript ได้ นี่คือไฟล์ JS ดังนั้นจึงสร้างดาวได้ แต่ดาวแต่ละดวงมีบางสิ่งที่จำเป็นต้องรู้ มันต้องมีสี แล้วดาวของเราควรจะเป็นสีอะไร? ถ้าจะโอนเข้าก็จะประมาณนี้ เลยมาว่ากันด้วยสีชมพู เราจะไปที่นั่น. และถ้าเราดูตอนนี้ คุณจะเห็นว่ามีดาวสีชมพูอยู่ มีข้อมูลอีกชิ้นหนึ่งที่เราสามารถส่งผ่านไปยังดาวของเราได้ ซึ่งเรียกว่าเต็มแล้ว ทีนี้ นี่คือบูลีนจริงหรือเท็จ เราก็เติมได้แบบนี้แหละ เราไม่ต้องตั้งค่าอะไรเลย และคุณจะเห็นว่าตอนนี้ดาวของเราเต็มแล้ว ดังนั้นเราจึงสร้างสิ่งเล็กๆ นี้ขึ้นแล้ว เราไม่ได้สร้างมันขึ้นมา แต่เรากำลังใช้ข้อมูลชิ้นเล็กๆ ที่นำกลับมาใช้ใหม่ได้เพียงชิ้นเดียว เราสามารถสร้างดาวได้สองสามดวง มาทำกัน นั่นมันสีชมพู ลองทำอันที่เป็นสีม่วงแดงกับอันที่เป็นสีม่วงหรือสีครามกัน มาทำกันให้เต็มอิ่มกันไปเลย เราจะไปที่นั่น. สามดาว. มาทำให้อันกลางไม่เต็มกัน เพื่อที่เราจะได้ลบมันได้ ตรวจสอบให้แน่ใจว่าเรายังมีเครื่องหมายทับอยู่ตรงนั้น และตอนนี้ เรามีองค์ประกอบที่แตกต่างกันสามส่วน แต่ละรายการเป็นองค์ประกอบดาวของเรา ดังนั้นเราจึงไม่ต้องกังวลว่าองค์ประกอบของดาวจะหน้าตาเป็นอย่างไร โค้ดจะหน้าตาเป็นอย่างไร คุณสามารถดูได้หากต้องการ แต่นั่นไม่ใช่ประเด็นในตอนนี้ นอกจากนี้ยังมีเหตุผลที่อยู่เบื้องหลัง หากฉันคลิก ฉันจะได้รับการแจ้งเตือน เป็นตรรกะพื้นฐานมาก แต่ JavaScript บางตัวทำงานเมื่อฉันคลิกที่ดาว ตอนนี้เรามาดูกันดีกว่า องค์ประกอบถัดไปคือองค์ประกอบการให้คะแนน ดังนั้นองค์ประกอบการให้คะแนนจึงถูกสร้างขึ้นโดยใช้ส่วนประกอบที่เป็นดาว ดังนั้นนี่คือแนวคิดหลักของการทำปฏิกิริยาชิ้นเล็กๆ แต่ไม่มีอยู่อย่างโดดเดี่ยว แต่ละชิ้นมักจะแสดงผลหรือใช้ชิ้นเล็กๆ อื่นๆ ดังนั้นองค์ประกอบการให้คะแนนซึ่งมีลักษณะเช่นนี้ ถ้าคุณต้องการดู อย่าถูกครอบงำ เราไม่ได้พูดถึงเรื่องนี้ ไม่นานนัก แต่มีเหตุผลมากมายที่นี่ คุณจะเห็นว่าเรากำลังกำหนดความหมายต่างๆ ดังนั้นศูนย์ดาวจึงไม่มีการให้คะแนน ห้าดาวเป็นสิ่งที่ยอดเยี่ยม เรามีสีต่างกัน เราก็เลยคิดว่านี่เริ่มเป็นสีแดง และเมื่อคุณเริ่มให้คะแนนดีขึ้นเรื่อยๆ มันก็จะขึ้นเป็นสีทอง เรามีข้อมูลบางอย่างเกี่ยวกับมูลค่าของเรตติ้ง เรามีโค้ดบางส่วนที่ทำงานเมื่อคุณวางเมาส์ไว้ และโค้ดอื่นๆ ที่ทำงานเมื่อคุณคลิก แต่ส่วนที่สำคัญที่สุดอยู่ที่นี่ ที่นี่เราใช้องค์ประกอบดาวภายในไฟล์การให้คะแนน องค์ประกอบการให้คะแนนที่เราใช้องค์ประกอบดาวซึ่งฉันเพิ่งแสดงให้คุณเห็น ตอนนี้มีข้อมูลมากมายที่เรากำลังส่งผ่านเข้ามา ไม่ต้องกังวลเกี่ยวกับเรื่องนี้ แต่สิ่งที่ผมหวังว่าคุณจะเห็นคือ เรามีสององค์ประกอบที่โต้ตอบกัน เรามีองค์ประกอบการให้คะแนน ซึ่งใช้องค์ประกอบดาว ลองกลับไปที่ดัชนีของเรากัน และภายใต้ดาวสามดวงเหล่านี้ เราสามารถเพิ่ม HTML แบบเก่าธรรมดาๆ ได้ เช่น แท็ก H two ที่ระบุว่าองค์ประกอบการให้คะแนน และด้านล่างนั้นเราสามารถเพิ่มองค์ประกอบการให้คะแนนได้ แค่นี้เอง แล้วแต่ละเรตติ้งก็อยากได้เลขตั้งต้น มันเริ่มต้นที่กี่ดาว? ไปกันสองคนเลย คุณอาจจะสงสัยว่า วงเล็บปีกกาเหล่านี้คืออะไร? เราจะไปที่นั้น แต่สำหรับตอนนี้เพียงแค่ทำตามนี้ เป็นส่วนหนึ่งของเจ ไวยากรณ์ของ X มาดูกันว่าเราได้อะไร ลองดูสิ. นี่คือองค์ประกอบการให้คะแนนของเรา และตอนนี้ก็เปลี่ยนไปแล้ว แต่ถ้าย้อนไปเปลี่ยนให้เป็นสี่ดาวแล้วมาดูกันจะได้อะไร คุณจะเห็นว่ามันเริ่มต้นขึ้นเพื่อให้มีสี่ในห้าดาว แต่ฉันสามารถเปลี่ยนมันได้ ไปสองดาวห้าดาวกันเถอะ ดังนั้นดาวแต่ละดวงที่นี่จึงเป็นองค์ประกอบของดาวแต่ละดวง มีห้าคน และองค์ประกอบการให้คะแนนทำมากกว่าแค่แสดงห้าดาว มันเชื่อมโยงพวกเขาในทาง มันกำหนดสีที่พวกเขาควรจะเป็น มันคิดออกว่าจะเกิดอะไรขึ้นเมื่อคุณคลิก ถ้าฉันคลิกที่ดาวนี้ มันจะรู้ว่าฉันกำลังให้คะแนนสองดาว แต่ถ้าฉันคลิกที่ดาวนี้ มันจะรู้ว่าฉันกำลังให้คะแนนห้าดาวอยู่ดี ฉันก็เลยไม่อยากจมปลักอยู่ที่นี่ แต่ ณ จุดนี้ เราได้เห็นองค์ประกอบสองอย่าง หากต้องการคุณสามารถเล่นกับเรตติ้งได้ เพิ่มอีกคู่. มาให้คะแนนศูนย์ดาวกันเพื่อเริ่มต้น และเราไปที่นั่น เรามีอันนี้ที่นี่ แล้วก็คะแนนศูนย์ดาวของเราที่นี่ ตกลง. ดังนั้นฉันจะหยุดที่นี่ตอนนี้ มีหลายอย่างที่เราเห็นที่นี่ แต่หวังว่าคุณจะเข้าใจอย่างน้อยว่า React เป็นอย่างไร แน่นอนว่ายังมีอีกมากที่จะกล่าวถึง แต่ฉันจะแสดงให้คุณเห็นในวิดีโอหน้า เป็นตัวอย่างที่ซับซ้อนและใหญ่กว่า เราจะไม่ดูรหัส เราจะดูที่ส่วนประกอบต่างๆ ที่ประกอบอยู่ หรืออย่างน้อยก็บางส่วน เพื่อให้คุณเข้าใจได้อย่างแท้จริงว่าส่วนประกอบแบบละเอียดสามารถนำไปใช้ในแอปพลิเคชันขนาดใหญ่ได้อย่างไร ดังนั้น ถ้าคุณอยากเล่นด้วยสิ่งนี้ ไปข้างหน้า ทำส้อมเล็ก ๆ ของคุณเองและปรับแต่งสิ่งต่าง ๆ แต่อย่าลืมว่าโค้ดนี้มาถึงจุดนี้แล้ว หากคุณไม่เคยเห็น React มาก่อน นี่คงจะน่ากลัวมาก มันเป็นเรื่องของความสัมพันธ์มากกว่า ไม่เป็นไร. กำลังเดินทางไป.