บทความ IT เจ๋งๆ

React เป็นหนึ่งใน Platform ที่ยอดเยี่ยมซึ่งถูกใช้ในการพัฒนาทั้ง Mobile Apps และ Web Apps และด้วยความสามารถที่หลากหลาย ทำให้ React ถูกใช้งานโดย Brand ใหญ่ ๆ ระดับโลกอย่าง Tesla, Facebook, Airbnb, Skype และอื่น ๆ อีกมากมาย ในบทความนี้จะมาแนะนำ 10 React Developer Tools ที่ช่วยคุณพัฒนา React ได้เร็วยิ่งขึ้น 

1. Bit

มันเป็น Tool ที่ดีมากในการ Create และ Share React Components โดย Bit จะช่วยให้ Developers สามารถใช้งาน Online Platform และ CLI Tool ที่พวกเขาสามารถ Publish React Components และ Share กับผู้อื่นได้

ยิ่งกว่านั้นคุณสามารถค้นหา Components ที่ Create และ Publish โดย Third Parties ซึ่งการใช้ Third Parties Stores คุณจะสามารถเข้าถึง Marketplace ของ Components คุณสามารถเข้าใจได้ง่ายว่า Components เหล่านี้ดูเหมือนจะแค่อ่าน Code ได้เท่านั้น

ดูรายละเอียดของแต่ละ Component และ Edit Code ที่ใช้ในการแสดง Preview จากนั้นตรวจสอบให้แน่ใจว่า Components นั้นสอดคล้องกับความต้องการของคุณก่อนที่จะทำการ Download และ Install Bit สำหรับ Project ของคุณ

Bit มี Command-Line Tool ที่ช่วยให้ Developers สามารถ Track การเปลี่ยนแปลงในแต่ละ Component โดยไม่สนใจว่ามันเป็น Project ที่แยกจากกัน นอกจากนี้ Tool นี้ยังอนุญาตให้คุณสร้าง Component Library ของคุณเอง

2. React Sight

มันเป็น Chrome Extension ที่คุณสามารถ Install เพื่อแสดงในส่วนที่เกี่ยวข้องกับการ Inspect React หลังจากที่ Install ตัว React Developer Tools Extension ใน Chrome แล้ว ให้ Install React Sight Extension

React Sight จะแสดง React App ของคุณด้วย Live Component Hierarchy Tree ของ App ทั้งหมด นอกจากนี้มันยังรองรับ Redux, React Fiber และ React-Router

ในขณะที่ใช้งาน URLs File ในเครื่อง คุณต้องแน่ใจว่าได้ทำการ Enable “Allow access to file URLs” สำหรับทั้ง React Sight และ React Developer Tools จากนั้น Install Extension ใน Chrome แล้ว Run React App และเปิด Website ที่ใช้ React 

มันเป็น React Visualization Tool ที่มี Prop Tree Viewer และ Live State ที่ช่วยเติมเต็ม React Dev Tools

3. React Developers Tools

ถือเป็น React Tool ที่ใช้สร้าง React Apps อย่างแท้จริง เพียงแค่คุณ Install React Developer Tools Extension ที่เป็น Version ล่าสุด (Version 4) ลงใน Chrome ซึ่งภายใน Dev Tools จะมี Tab ของ Components ที่แสดงผลบน Screen นอกจากนี้ยังมี Subcomponents อื่น ๆ อีกมากมาย

เลือก Components และ Inspect หรือ Edit Props และ State ของพวกมัน เมื่อใช้ Profiler Tab คุณสามารถ Track Performance ของ App ได้เช่นกัน มันช่วยให้เห็นว่าการเปลี่ยนแปลงของ Component หนึ่งส่งผลกระทบต่อ Components อื่น ๆ อย่างไรบ้าง และช่วยให้พวกมันสร้าง Component Structure ที่ดีขึ้นกว่าเดิม ปัจจุบันมี Users ที่ใช้ Tool ซึ่งคิดค้นโดย Facebook นี้เกือบ 1 ล้านรายแล้ว

4. Create React App

Create React App ก็เป็นอีก Tool ที่ถูกคิดค้นขึ้นโดย Facebook โดยมันเป็น Single Command-Line Tool ที่ช่วยให้ Developers ทำการ Setup Environment ของการพัฒนา React App ได้รวดเร็วยิ่งขึ้น React Developer Tool จะช่วย Optimize App ให้เหมาะสมที่สุดสำหรับ Production, Setup Environment ของการพัฒนา รวมทั้งช่วยให้ Programmers กำหนด Pipeline ในการสร้าง Front-end 

Tool นี้จะช่วยให้ Developer สาสามารถใช้ภาษา Programming ใดก็ได้ในการพัฒนา Back-end และช่วยประหยัดเวลาในการทำงานอีกด้วย

5. Storybook

React อนุญาตให้สร้าง UI โดยใช้ Advanced Components เมื่อคุณต้องการสร้าง UI ที่แยกต่างหากจาก Business Logic, Tool นี้จะเตรียม Sandbox ให้คุณ โดย Sandbox ก็เป็นเหมือน ส่วนที่ใช้ในการทดสอบการสร้าง Components

เหตุผลที่ถูกเรียกว่า Storybooks ก็เพราะ Sandbox มีการสร้าง Document ของ Components เป็น Story โดยแต่ละ Story  จะมี Stats และแต่ละ Stats สามารถนำมาเปรียบเทียบกับ Visual Test Case ได้ สำหรับ Story นั้นเป็น Function ที่จะส่ง Value และนำไปแสดงบน Screen

6. React Bootstrap

Bootstrap เป็น CSS Framework ยอดนิยมซึ่งมีชุดของ JavaScript Functions และ CSS Classes ที่ใช้สร้าง UI ที่ยอดเยี่ยม คุณสามารถใช้งานพวกมันได้อย่างง่ายดาย โดยที่ไม่ต้องมีความรู้ด้าน Technical ของเทคโนโลยีเหล่านี้แต่อย่างใด 

React Bootstrap จะทำการ Re-write JavaScript Bits เพื่อให้เข้ากันได้กับ React 

7. React Styleguideist

นี่เป็นอีก UI Tool ที่มี Interactive และมีความน่าสนใจเป็นอย่างมาก รวมทั้งสามารถใช้ในการสร้างและแสดง UI Components มันช่วยให้ Developers สามารถเขียน UI Code และสร้าง UI ไปด้วยพร้อม ๆ กัน คุณสามารถทดสอบ Code และเปลี่ยนแปลง Code ใน Rendered Version ได้ในกรณีที่คุณต้องการ​

8. Proton Native

Proton Native ช่วยให้คุณสามารถพัฒนา Native Desktop Applications ได้โดยใช้ React ก่อนหน้านี้ Developers จะต้องใช้ JavaScript เพื่อสร้าง Desktop React Apps แต่ Tool ตัวนี้จะช่วยให้คุณกำหนด GUI Elements และ React Components ได้ React Developer Tool นั้นสามารถเข้ากันได้กับ Node.js Modules ทั้งหมดเนื่องจาก Proton นั้นมีคุณสมบัติที่สามารถใช้งานข้าม Platform ได้เป็นอย่างดี

9. React-Proto

นี่ถือเป็น React Developer Tool ที่ดีที่สุดสำหรับ Engineers ที่ Focus ในส่วนของ Visual Design เป็นส่วนใหญ่และไม่เน้น Coding มากนัก มันช่วยให้คุณสร้าง Prototype UI โดยใช้การ Drag & Drop แทนที่จะเขียน Code 

แต่นั่นก็ไม่ได้หมายความว่า มันจะช่วยให้คุณสร้าง UI ของ App ได้โดยที่ไม่ต้องเขียน Code เอาเสียเลย มันมี Prototyping Components ที่ Developers ต้องการ คุณสามารถเลือกรูปภาพและใช้ React Proto เพื่อทำเครื่องหมาย Components ที่เป็นไปได้ทั้งหมดจากรูปภาพเหล่านั้น รวมทั้งการ Set Props, Names และ Hierarchy ของ Components

เมื่อคุณมี Components ทั้งหมดแล้ว ให้ Export พวกมันลงใน Auto-Generated Code ซึ่งคุณสามารถ Customize Code ได้เองในภายหลัง หากคุณกำลังทำงานกับ Project ที่ได้รับการออกแบบมาแล้ว React Proto ถือเป็น Tool ที่ดีที่สุดที่ช่วยให้คุณประหยัดเวลาสำหรับการตั้งค่าเริ่มต้นของ Project นอกจากนี้ App ที่พัฒนาโดยใช้ Tool นี้ยังสามารถทำงานร่วมกับ Systems หลัก ๆ ที่สำคัญได้แทบทั้งหมด

10. Why did you render

เมื่อคุณต้องการที่จะ Debug Behavior ของ Component ของคุณ นี่เป็น Tool ที่ดีที่สุดที่คุณควรลองใช้ มันสำคัญอย่างยิ่งสำหรับ Developer ที่จะต้องเข้าใจเมื่อต้อง Render และ Re-Render Components เนื่องจากบางครั้งพวกมันก็ใช้งานไม่ง่ายนักโดยเฉพาะถ้าคุณเพิ่งเริ่มต้นพัฒนา React 

React Tools ทั้งหมดข้างต้น ถูกใช้เพื่อจุดประสงค์ที่แตกต่างกัน เช่น สร้าง Web Applications, สร้าง Visuals หรือเขียน Code และ Tools เหล่านี้ไม่ได้มีไว้เพื่อจุดประสงค์ใดจุดประสงค์หนึ่งเท่านั้น คุณสามารถใช้พวกมันร่วมกันเพื่อให้เกิดประสิทธิภาพและตรงกับความต้องการของคุณ

ที่มา:  https://www.credencys.com/

รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert

อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ

บทความล่าสุด

• IT & Digital Events in March 2020 
• 9 Online Developer Tools ที่ช่วยเพิ่ม Productivity ของคุณ
• 15 VS Code Extensions ที่ช่วยให้คุณ Develop ได้เร็วขึ้น