ไลบรารีที่แนะนำเมื่อพัฒนาแอปด้วย React ณ ปี 2022

• การสร้างโปรเจกต์ React : ฝั่งไคลเอนต์ใช้ Vite/CRA, ฝั่งเซิร์ฟเวอร์ใช้ Next.js/Remix/Gatsby
• การจัดการ State ใน React : useState/useReducer, useContext, Redux
• การดึงข้อมูลใน React : React Query (REST APIs, GraphQL APIs) + axios, Apollo Client
• Routing ด้วย React Router
• การจัดการ CSS ใน React : CSS-in-CSS, CSS-in-JS/Emotion/Stitches, Functional CSS with Tailwind CSS
• React UI Libraries : Material UI(ได้รับความนิยมมากที่สุด), Mantine(แนะนำ), Chakua UI(แนะนำ), Ant Design, Radix, Primer, NextUI, Tailwind UI (ไม่ฟรี), Semantic UI, React Bootstrap
• ไลบรารีแอนิเมชันสำหรับ React : Framer Motion (แนะนำมากที่สุด), react-spring (มักถูกแนะนำ), react-motion, react-move, Animated (React Native)
• ไลบรารี Visualization และ Chart ใน React : Recharts, react-chartjs, nivo, visx, Victory
• ไลบรารีฟอร์มใน React : React Hook Form + yup/zod
• การตรวจสอบ Type ใน React : ใช้ TypeScript ไปเลย
• โครงสร้างโค้ด React: สไตล์และฟอร์แมต : ESLint + Prettier
• การยืนยันตัวตนใน React : เลือกใช้บริการ/BaaS อย่าง Firebase, Auth0, AWS Cognito
• การโฮสต์ React : ถ้าจะดูแลทั้งหมดเองใช้ Digital Ocean, ไม่เช่นนั้นใช้ Cloudflare Workers, Netlify, หรือ Vercel (โดยเฉพาะ Next.js), ถ้าใช้ Firebase ก็ใช้ Firebase Hosting
• การทดสอบใน React : Jest + React Testing Library (ได้รับความนิยมมากที่สุด), Cypress
• React และโครงสร้างข้อมูลแบบ Immutable : Immer
• การทำ Internationalization ใน React : FormatJS, react-i18next
• Rich Text Editor ใน React : Draft.js, Slate.js, ReactQuill
• การชำระเงินใน React : PayPal, React Stripe Elements หรือ Stripe Checkout
• การจัดการเวลาใน React : date-fns, Day.js, Luxon
• แอปเดสก์ท็อปด้วย React : Electron, Tauri, NW.js, Neutralino.js
• การพัฒนามือถือด้วย React : React Native, Expo
• React VR/AR : react-three-fiber, react-360, aframe-react
• การทำต้นแบบดีไซน์สำหรับ React : Figma, Zeplin, Excalidraw, InVision
• เอกสารประกอบคอมโพเนนต์ React : Storybook, Docusaurus, Docz, Styleguidist

[rinae]

ดูเหมือนว่าขอบเขตของการทำต้นแบบดีไซน์ที่ผู้เขียนต้นฉบับนึกไว้อาจจะอยู่แค่ระดับ mockup แต่ถ้าเป็นการทำ interactive prototyping ก็รู้สึกว่าคงขาด Framer ไปไม่ได้

https://www.framer.com/

[sujang]

ช่วงนี้นอกจาก redux แล้ว ไลบรารีอย่าง recoil และ zustand ก็ได้รับความนิยมเช่นกัน

[00001]

ในส่วน React Desktop Applications ก็น่าจะต้องใส่ electron เข้าไปด้วยนะครับ

[rtyu1120]

อันนี้ดูเหมือนว่าแม้แต่แอปเดสก์ท็อป ในเนื้อหาก็แนะนำให้ใช้ Electron เป็นตัวเลือกหลักมากที่สุดเหมือนกันนะ 555

[xguru]

แก้ไขไว้แล้ว ขอบคุณครับ 555

[spilist2]

ในเอกสารประกอบ React component ล่าสุด เขาบอกว่าตัวเองเคยใช้แค่ Storybook เลยไม่สามารถแนะนำ Storybook ได้ แต่ได้ยินมาว่า Docusaurus, Docz และ Styleguidist ก็ดี ดังนั้นน่าจะต้องรวม Storybook ไว้ด้วยครับ

[xguru]

อ๋อ จริงด้วยครับ แก้ไขไว้แล้ว~