React.js 14 เครื่องมือและแหล่งข้อมูลสำหรับนักพัฒนาเว็บ

ความนิยมของ React.js ได้รับการ เติบโตอย่างรวดเร็ว ตั้งแต่ Facebook เปิดตัวห้องสมุดเป็นครั้งแรกในปี 2013 มันเป็น โครงการโอเพนซอร์สที่ติดดาวที่พบบ่อยที่สุดครั้งที่ห้า ใน Github และโฆษณางานสำหรับนักพัฒนา React ก็เพิ่มขึ้นอย่างมากเช่นกัน ปฏิกิริยาคือ เฟรมเวิร์ก JavaScript ที่มีน้ำหนักเบา สำหรับ สร้างส่วนต่อประสานกับผู้ใช้ - ตัวอย่างที่เด่นชัดที่สุดคือ Facebook และ Instagram.

ตอบสนองข้อเสนอ ทางเลือกสำหรับกรอบ MVC, เช่น Angular หรือ Backbone พร้อมด้วย โครงสร้างที่ตรงไปตรงมามากขึ้น และ มุ่งเน้นการเพิ่มประสิทธิภาพการปฏิบัติงาน. เนื่องจาก React จะเป็นตัวกำหนดแนวการพัฒนาเว็บไซต์ในอีกไม่กี่ปีข้างหน้าในบทความนี้เราต้องการให้คุณ ชุดเครื่องมือสำหรับนักพัฒนา เพื่อช่วยให้คุณก้าวเข้าสู่อาณาจักรแห่งการพัฒนา React.

React.js เอกสารทางการจาก Facebook

Facebook ให้นักพัฒนาด้วย เอกสารรายละเอียด บน แนวคิดหลักของ React. นอกจากเอกสารคุณยังสามารถดูบทแนะนำที่ดีที่นี่ วิธีการสร้างเกมโอเอกซ์แบบโต้ตอบ ด้วยปฏิกิริยาและ กระดานสนทนา สำหรับผู้พัฒนา React เช่นเดียวกับ เอกสารเป็นโอเพ่นซอร์ส, คุณสามารถแก้ไขได้หากต้องการ.

React.js Github repo

ใน Repact Github Repo คุณสามารถ ตรวจสอบรหัสที่มาของ React เมื่อใดก็ตามที่คุณต้องการ หากคุณต้องการรับทราบข้อมูลเกี่ยวกับสถานะปัจจุบันของการพัฒนาคุณสามารถดูได้ที่ ปัญหา, เหตุการณ์สำคัญ, และ คำขอดึงล่าสุด. หากคุณติดขัดก็อาจเป็นความคิดที่ดีที่จะศึกษา คู่มือการแก้ไขปัญหา นิดหน่อย.

รหัสเริ่มต้น Hello World

หากคุณต้องการลองตอบโต้อย่างรวดเร็วคุณสามารถเริ่มต้นด้วยสิ่งนี้ “สวัสดีชาวโลก” การสาธิตเชิงโต้ตอบ บน Codepen มันรวมถึง สินทรัพย์ที่จำเป็นทั้งหมด และ รหัสเริ่มต้น เช่นกัน ขณะที่บาเบลเปิดอยู่คุณสามารถใช้ ทั้ง ECMAScript 6 และไวยากรณ์ JSX. เพียงแค่ใช้ปากกานี้และคุณสามารถไปข้างหน้าได้โดยไม่ต้องตั้งค่าสภาพแวดล้อมทั้งหมดด้วยตัวคุณเอง.

ตอบโต้ Starter Kit

ตอบโต้ Starter Kit เป็น แอพพลิเคชั่นเว็บสำเร็จรูป สร้างจาก Node.js, Express, GraphQL, ทำปฏิกิริยา, และเครื่องมือในการพัฒนาเว็บไซต์จำนวนหนึ่งเช่น Webpack บาเบล, และ Browsersync. มันให้คุณด้วย ส่วนหน้ากองซ้อนเดียวกันใช้ Facebook และช่วยให้คุณกระโดดลงไป การพัฒนา React แบบเต็มสแต็ค ไม่ยุ่งยากมากเกินไป.

ReactCSS

ReactCSS ทำให้มันเป็นไปได้ เพิ่มสไตล์ CSS แบบอินไลน์ใน JavaScript. ReactCSS มาพร้อมกับการรองรับ React, Redux, React Native (กรอบสำหรับการสร้างแอปมือถือดั้งเดิมโดยใช้ React), การแก้ไขอัตโนมัติ, โฮเวอร์, องค์ประกอบหลอกและแบบสอบถามสื่อ คุณสามารถทำได้อย่างรวดเร็ว ติดตั้งด้วย npm.

โต้ตอบการรวม JSFiddle (โดยมีและไม่มี JSX)

นี่มันยอดเยี่ยมมาก สนามเด็กเล่นออนไลน์ หากคุณต้องการสถานที่ที่คุณสามารถเริ่มฝึกทำปฏิกิริยาได้ มัน โฮสต์บน JSFiddle, และมี สองรุ่น: หนึ่งเดียวกับ JSX และ หนึ่งรายการที่ไม่มี JSX, เลือกสิ่งที่คุณพอใจกับ.

เครื่องกำเนิดคู่มือคู่มือสไตล์

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

องค์ประกอบการตอบสนองที่ปรับแต่งได้ของ Belle

คนสวย คือ ตอบสนององค์ประกอบห้องสมุด ที่สวมใส่คุณด้วย ชุดของส่วนประกอบ React คุณอาจต้องการใช้ในโครงการของคุณเช่น “ปุ่ม”, “บัตร”, “เครื่องปั่นด้าย”, “ข้อศอก”, “อันดับ”, ส่วนประกอบของรูปแบบที่แตกต่างกันและอื่น ๆ ส่วนประกอบทำงาน ทั้งบนมือถือและเดสก์ท็อป, และพวกเขาเป็น ปรับแต่ง เช่นกัน.

เบลล์คือ ไม่ได้เป็นเพียงไลบรารี React component เท่านั้น นอกนั้นคุณสามารถหาคนที่ยอดเยี่ยมอื่น ๆ บน Github เช่น ตอบสนองวิดเจ็ต หรือ เป็นส่วนประกอบ.

ตอบสนองสภาพแวดล้อมการพัฒนา UI ของ Storybook

หากคุณไม่ต้องการใช้ไลบรารีส่วนประกอบของคนอื่น แต่อย่างใด ต้องการสร้างของคุณเอง, มันคุ้มค่าที่จะลอง ตอบโต้ StoryBook ซึ่งเป็น สภาพแวดล้อมการพัฒนา UI สำหรับองค์ประกอบการตอบสนอง. นิทานช่วยให้คุณ พัฒนาองค์ประกอบแบบโต้ตอบ. มันมี เอกสารประกอบอย่างละเอียด, และคุณสามารถ เริ่มต้นด้วยการพัฒนา ใน Storybook Hub.

ตอบสนอง-Bootstrap

ตอบสนอง-Bootstrap บูรณาการตอบสนองกับความนิยม Bootstrap 3 frontend framework. ผู้พัฒนาโดยทั่วไปจะสร้างส่วนประกอบ Bootstrap ใหม่ด้วย React.js ผลลัพธ์นี้ใน ฐานรหัสทำความสะอาด ด้วยการทำซ้ำน้อยลงและ ประสิทธิภาพที่สูงขึ้น.

โปรดทราบว่าเนื่องจาก repo อยู่ระหว่างการพัฒนาอย่างต่อเนื่อง API จะมีการเปลี่ยนแปลงในอนาคต สำหรับทาง สถานะปัจจุบันของการพัฒนา, ตรวจสอบ แผนงานของโครงการ.

ตอบสนองเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์สำหรับ Chrome

ทำปฏิกิริยา DevTools สำหรับ Chrome เป็นส่วนเสริมของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome และช่วยให้คุณสามารถ ตรวจสอบลำดับชั้นของส่วนประกอบ. มันเป็น สร้างโดย Facebook ด้วยความพยายามช่วยเหลือชุมชนนักพัฒนาในการสร้างแอป React ใหม่ คุณทำได้ง่ายๆ เพิ่มเป็นส่วนขยายของ Chrome ไปยังเบราว์เซอร์ของคุณ คุณสามารถเรียกดู เป็นของรหัสที่มา บน Github เช่นกัน.

ตอบสนองเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์สำหรับ Firefox

นี้เป็น เวอร์ชั่นของ Firefox ของเดียวกัน ตอบสนองเครื่องมือนักพัฒนาซอฟต์แวร์ที่สร้างโดย Facebook. เพียงเพิ่ม เป็นส่วนเสริมสำหรับเบราว์เซอร์ Firefox ของคุณ, และเริ่มตรวจสอบโครงสร้างลำดับชั้นของแอป React ของคุณในครั้งเดียว.

แพคเกจ React.js สำหรับ Atom

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

React.js ความรู้พื้นฐาน - หลักสูตรออนไลน์ฟรี

มีหลักสูตรที่ยอดเยี่ยมและราคาไม่แพงอย่างที่คุณสามารถทำได้ เรียนรู้การพัฒนา React, อย่างไรก็ตามคุณสามารถลงทะเบียนได้ React.js ความรู้พื้นฐาน หลักสูตรออนไลน์สำหรับสมบูรณ์ฟรี มันถูกสร้างขึ้นจาก 12 บทเรียน, เริ่มต้นด้วย พื้นฐานของ React, และมี หลักสูตรที่ดี ที่ครอบคลุมทุกสิ่งที่สำคัญ.