เริ่มต้นด้วย React.js

React.js คือ มีความยืดหยุ่นและเป็นส่วนประกอบ ไลบรารี JavaScript สำหรับ การสร้างส่วนต่อประสานผู้ใช้แบบโต้ตอบ. มันเป็น สร้างและเปิดเผยโดย Facebook และถูกใช้โดย บริษัท เทคโนโลยีชั้นนำหลายแห่งเช่น Dropbox, AirBnB, PayPal และ Netflix React ช่วยให้นักพัฒนา สร้างแอพที่มีข้อมูลมาก ที่สามารถอัปเดตได้โดยไม่เจ็บปวด การเรนเดอร์ส่วนประกอบที่จำเป็นเท่านั้น.

ปฏิกิริยาคือ ดูเลเยอร์จาก MVC รูปแบบการออกแบบซอฟต์แวร์, และส่วนใหญ่ มุ่งเน้นไปที่การจัดการ DOM. ทุกวันนี้ทุกคนพูดถึง React ในโพสต์นี้เราจะมาดูกันว่าคุณจะทำได้อย่างไร เริ่มต้นกับมัน.

ติดตั้ง React

คุณสามารถติดตั้ง React ได้เช่นกัน ด้วยตัวจัดการแพคเกจ npm หรือโดย เพิ่มไลบรารีที่จำเป็นด้วยตนเอง ไปที่หน้า HTML ของคุณ ขอแนะนำ การใช้ React with Babel ที่ช่วยให้คุณ ใช้ไวยากรณ์ ECMAScript6 และ JSX ในรหัสการตอบสนองของคุณ.

ถ้าคุณต้องการ ติดตั้ง React ด้วยตนเอง, เอกสารแนะนำอย่างเป็นทางการ ใช้ไฟล์ HTML นี้. คุณสามารถดาวน์โหลดหน้าได้โดยคลิกที่ ไฟล์> บันทึกหน้าเป็น ... เมนูในเบราว์เซอร์ของคุณ สคริปต์ที่คุณต้องการ (ตอบสนอง, ตอบสนอง DOM, บาเบล) จะถูกดาวน์โหลดลงใน ตอบสนอง-example_files / โฟลเดอร์ จากนั้นเพิ่มแท็กสคริปต์ต่อไปนี้ใน ส่วนของเอกสาร HTML ของคุณ:

แทนที่จะดาวน์โหลดพวกเขาคุณสามารถเพิ่มสคริปต์ตอบสนอง จาก CDN เช่นกัน.

คุณยังสามารถใช้ เวอร์ชันย่อ ของไฟล์ JavaScript ด้านบน:

หากคุณต้องการ ติดตั้งทำปฏิกิริยากับ npm, วิธีที่ดีที่สุดคือใช้ สร้างแอป React Github repo สร้างโดย Facebook Incubator - นี่เป็นโซลูชันที่ React docs แนะนำ นอกเหนือจาก React แล้วยัง มี Webpack, Babel, Autoprefixer, ESLint และเครื่องมือสำหรับนักพัฒนาอื่น ๆ. ในการเริ่มต้นใช้คำสั่ง CLI ต่อไปนี้:

 npm install -g create-react-app create-react-app my-app cd my-app เริ่มต้น npm

เมื่อคุณพร้อมคุณสามารถ เข้าถึงแอป React ใหม่ของคุณ บน localhost: 3000 URL:

หากคุณต้องการอ่านเพิ่มเติมเกี่ยวกับ วิธีการติดตั้ง React, ตรวจสอบ แนวทางการติดตั้ง ของเอกสาร.

ตอบสนองและ JSX

ถึงแม้ว่ามันจะไม่ใช่ภาคบังคับ แต่คุณก็สามารถทำได้ ใช้ไวยากรณ์ JSX ในแอป React ของคุณ JSX หมายถึง JavaScript XML, และมัน transpiles เป็น JavaScript ปกติ. ข้อได้เปรียบที่ยิ่งใหญ่ของ JSX คือมัน ช่วยให้คุณรวม HTML ในไฟล์ JavaScript ของคุณ, ดังนั้นจึงทำให้การกำหนดองค์ประกอบของ React ง่ายขึ้น.

นี่คือสิ่งที่สำคัญที่สุดที่ควรรู้เกี่ยวกับ JSX:

แท็กที่ เริ่มต้นด้วยตัวพิมพ์เล็ก (กรณีอูฐด้านล่าง) จะแสดงผล เป็นองค์ประกอบ HTML ปกติ.
แท็กที่ เริ่มต้นด้วยตัวพิมพ์ใหญ่ (ตัวเรือนอูฐด้านบน) จะแสดงผล เป็นส่วนประกอบของ React.
รหัสใด ๆ เขียนภายในวงเล็บปีกกา … ถูกตีความ เป็น JavaScript ที่แท้จริง.

หากคุณต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับ วิธีใช้ JSX ด้วย React ลองดูหน้านี้จากเอกสารและสำหรับ เอกสาร JSX เริ่มต้น คุณสามารถดูวิกิ JSX.

สร้างองค์ประกอบการตอบสนอง

ปฏิกิริยาตอบสนองมี สถาปัตยกรรมที่ใช้ส่วนประกอบ ซึ่งนักพัฒนาสร้าง ส่วนประกอบที่นำมาใช้ใหม่ เพื่อที่จะแก้ปัญหาต่าง ๆ องค์ประกอบ React สร้างขึ้นมาจากบางส่วนหรือหลายส่วน องค์ประกอบการตอบสนอง นั้นคือ หน่วยที่เล็กที่สุดของแอป React.

ด้านล่างคุณสามารถเห็น ตัวอย่างง่ายๆขององค์ประกอบ React ที่เพิ่มปุ่ม Click me ไปยังหน้า HTML ใน HTML เราเพิ่ม

ภาชนะที่มี "myDiv" ID ที่จะเป็น บรรจุด้วยองค์ประกอบการตอบสนอง. เราสร้างองค์ประกอบปฏิกิริยาของเราภายใน

   เราแสดงองค์ประกอบการตอบสนองของเราด้วย ReactDOM.render () วิธี ที่ ใช้พารามิเตอร์ที่จำเป็นสองตัว,  องค์ประกอบตอบสนอง () และ ภาชนะของมัน (document.getElementById ( 'myDiv')) คุณสามารถอ่านเพิ่มเติมเกี่ยวกับ องค์ประกอบของ React ทำงานอย่างไร ใน “องค์ประกอบการแสดงผล” ส่วนของเอกสาร.
 สร้างส่วนประกอบ
 ทำปฏิกิริยาส่วนประกอบ เป็น หน่วย UI อิสระที่ใช้ซ้ำได้ ที่คุณสามารถอัปเดตข้อมูลได้อย่างง่ายดาย ส่วนประกอบสามารถทำจากองค์ประกอบหนึ่งหรือหลายองค์ประกอบ. อุปกรณ์ประกอบฉาก เป็น อินพุตโดยพลการ คุณสามารถใช้เพื่อส่งผ่านข้อมูลไปยังส่วนประกอบ องค์ประกอบ React ทำงานคล้ายกับฟังก์ชั่น JavaScript ทุกครั้งที่เรียกใช้มัน สร้างผลลัพธ์บางชนิด.
 คุณสามารถใช้ทั้ง ไวยากรณ์ของฟังก์ชันคลาสสิค หรือใหม่ ไวยากรณ์คลาส ES6 ไปยัง กำหนดองค์ประกอบปฏิกิริยา. ในบทความนี้ฉันจะใช้ตัวหลังเนื่องจาก Babel อนุญาตให้เราใช้ ECMAScript 6 หากคุณสนใจที่จะสร้างส่วนประกอบที่ไม่มี ES6 ให้ดูที่หน้า Components และ Props ของเอกสาร.
 ด้านล่างคุณสามารถดู องค์ประกอบ React ง่าย ๆ เราจะสร้างเป็นตัวอย่าง เป็นการแจ้งเตือนเบื้องต้นที่ผู้ใช้เห็นหลังจากเข้าสู่เว็บไซต์ มีข้อมูลสามส่วนที่จะ เปลี่ยนจากกรณีเป็นกรณี: ชื่อของผู้ใช้จำนวนข้อความและจำนวนการแจ้งเตือนเราจะผ่านสิ่งเหล่านี้ เป็นอุปกรณ์ประกอบฉาก.
  
องค์ประกอบ React แต่ละรายการเป็นคลาส JavaScript ที่ ขยาย React.Component ชั้นฐาน. ส่วนประกอบของเราจะถูกเรียกว่า สถิติ ตามที่ให้ผู้ใช้สถิติพื้นฐาน ก่อนอื่นเรา สร้าง สถิติ ชั้น กับ สถิติของคลาสขยายไปถึง React.Component … ไวยากรณ์แล้วเรา แสดงมันไปที่หน้าจอ โดยการโทร ReactDOM.render () วิธีการ (เราได้ใช้อันหลังในส่วนก่อนหน้านี้แล้ว).
  สถิติของชั้นเรียนขยาย React.Component render () return (  สวัสดี this.props.name คุณมี this.props.notifications การแจ้งเตือนใหม่และ this.props.messages ข้อความใหม่. 
 );  ReactDOM.render ( , document.getElementById ("myStats")); 
 อาร์กิวเมนต์แรกของ ReactDOM.render () วิธีการประกอบด้วย ชื่อของส่วนประกอบ React ของเรา () และ อุปกรณ์ประกอบฉาก (ชื่อ, การแจ้งเตือน, และ ข้อความ) ด้วยค่าของพวกเขา เมื่อเราประกาศค่าของอุปกรณ์ประกอบฉากสตริงจะต้องเป็น อยู่ในเครื่องหมายคำพูด (ชอบ "John Doe") และค่าตัวเลข ภายในวงเล็บปีกกา (ชอบ 3).
 โปรดทราบว่าเนื่องจาก JavaScript เรา มือสอง className แทน ชั้น เพื่อส่งแอตทริบิวต์ class ให้กับแท็ก HTML (className = "สรุป").
 หน้า HTML ที่ตรงกันมีดังต่อไปนี้:
          
    
 ในเอกสารตอบโต้มีตัวอย่างเด็ด ๆ อีกมากมาย วิธีการสร้างและจัดการส่วนประกอบการตอบโต้, และ มีอะไรอีกบ้างที่ควรรู้เกี่ยวกับอุปกรณ์ประกอบฉาก.
 อ่านเพิ่มเติม
 ด้วย React, Facebook แนะนำ กรอบรูปแบบใหม่ ในการพัฒนา front-end นั้น ท้าทายรูปแบบการออกแบบ MV *. หากคุณต้องการเข้าใจวิธีการทำงานให้ดีขึ้นและสิ่งที่คุณสามารถทำได้และไม่สามารถทำได้ด้วยนี่คือบทความที่น่าสนใจที่สามารถช่วยได้:
 บล็อกโพสต์ของ Facebook เมื่อวันที่ ทำไมพวกเขาถึงสร้างปฏิกิริยา.
 โพสต์บล็อกยอดเยี่ยมของ Andrew Ray ความดีและความเลวของ React.
 Codementor on React และ AngularJS เปรียบเทียบอย่างไร.
 FreeCodeCamp ให้ความสำคัญกับว่า MVC นั้นตายที่ส่วนหน้า.
 บทความของ HackerNoon เมื่อ วิธีเพิ่มประสิทธิภาพการทำงานที่เกี่ยวข้องกับการตอบสนอง.