14 Libraries สำหรับชาว React ที่ควรมีติดตัว

ทุกวันนี้หากอยากจะเขียนแอพดีๆ สักตัว โดยที่ไม่ใช้ library ช่วยเลยนี่แทบจะเป็นไปไม่ได้ และการที่จะหา lib ดีๆ สักตัวก็ใช้เวลานาน เพราะมี lib ให้เลือกใช้มากมายเหลือเกิน การหยิบเลือกมาใช้เลยต้องพิถีพิถันกันสักหน่อย ครั้นจะนั่งหาเองก็ต้องเสียเวลาไปกับการทดลองใช้และเปรียบเทียบจากหลายๆ ตัวที่ความสามารถคล้ายๆ กัน

…ผมมีโอกาสได้เริ่มโปรเจกต์ใหญ่ๆ เองอยู่หลายโปรเจกต์ทำให้เจอกับปัญหามากมาย ผมเลยขอเสียสละเวลาตรงนั้นมานั่งหา lib ที่ตอบโจทย์การทำงานของผม และคิดว่าน่าจะมีประโยชน์แก่ท่านอื่นไม่มากก็น้อย

axios

— Promise based HTTP client for the browser and node.js

สำหรับใครที่เรียกใช้งาน api อยู่บ่อยๆ ก็แนะนำตัวนี้เลยครับ น่าจะตอบโจทย์กับ restful api มากที่สุดแล้ว

lodash

— A modern JavaScript utility library delivering modularity, performance, & extras.

ตัวนี้เป็นตัวที่มาเสริมความสามารถของ javascript ที่มันควรมีแต่มันกลับไม่มี เช่นจัดการพวก arrray, object,string , number, และ utils ต่างๆ

react-router

— Declarative routing for React

สำหรับคนที่มีหน้าหลายหน้าพลาดไม่ได้เลยกับตัวนี้ ที่จะช่วยจัดการ route สำหรับ react

path-to-regexp

— Turn a path string such as `/user/:name` into a regular expression

สำหรับ route ของ react ที่มีความซับซ้อนมากๆ react-router จะทำไม่ค่อยได้เช่น /:user/works/:id ซึ่งต้องใช้ตัวนี้ช่วยจัดการ

react-redux

— a predictable state container for JavaScript apps.

สำหรับแอพขนาดกลางๆ จนถึงขนาดใหญ่ ควรมีตัวจัดการ state ไม่งั้น ส่ง props กันมันส์เลย แถมมีความซับซ้อน จัดการยากอีก redux เป็นอีกตัวหนึ่งที่จะมาช่วยจัดการตรงนี้ แต่ช่วงแรกอาจจะทำความเข้าใจกับมันยากสักหน่อย

redux-form

— A Higher Order Component using react-redux to keep form state in a Redux store

สำหรับคนใช้ redux และมีฟอร์มกรอกข้อมูลที่ต้องจัดการเยอะๆ พลาดตัวนี้ไมไ่ด้เลยครับ ช่วยทั้งเรื่องการ validate, state และการ custom component

joi

— Object schema description language and validator for JavaScript objects.

สำหรับคนที่ทำ form ก็จะต้องมีการทำ validation ต่างๆ ครั้นจะมาเขียนเงื่อนไขหรือ functionในการตรวจสอบเองก็จะยากไปสักหน่อย ตัวนี้เป็นตัวที่ครอบคลุมเรื่องการทำ validation มากที่สุดแล้ว

recompose

— A React utility belt for function components and higher-order components.

สำหรับคนที่ชอบเขียนอะไรที่สั้นๆ แต่ความสามารถเท่าเดิม หรือไม่อยากเขียน component ในรูปแบบ class แต่อยากใช้ความสามารถที่มีอยู่ใน class ห้ามพลาดตัวนี้เด็ดขาด

styled-components

— Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress

ยุคนี้เป็นยุคของ component แม้แต่ style ก็ต้องเป็น components 55 ช่วยให้เราจัดระเบียบได้ดี สามารถยัด logic ไปใน css ได้ รูปแบบการเขียนจะคล้ายๆ scss

react-helmet

— A document head manager for React

เอาไว้สำหรับจัดการ tag ที่อยู่ภายใต้ tag head เช่น title หรือ พวก meta tag ต่างๆ ที่อยู่ใน html

react-intl

— Internationalize React apps. This library provides React components and an API to format dates, numbers, and strings, including pluralization and handling translations.

ระบบจัดการหลายภาษาที่เป็นมากกว่าจัดการแค่ภาษา สำหรับคนที่ต้องการเขียนระบบหลายภาษาบน react ตัวนี้น่าจะตอบโจทย์มากที่สุดแล้ว แถมยังจัดการเรื่องเวลาและ ตัวเลขได้อีกด้วย

classnames

— A simple JavaScript utility for conditionally joining classNames together.

สำหรับคนที่ใช้พวก css framework เช่น bootstrap, bulma จะต้องมีการจัดการ class มากมายในเงื่อนไขต่างๆ ตัวนี้จะช่วยให้จัดการง่าย แถม clean อีกด้วย

moment

— Parse, validate, manipulate, and display dates in javascript.

เพราะเวลาเป็นสิ่งสำคัญตัวนี้จะช่วยเรื่องการแสดงผลของเวลา จัดการ format ต่างๆ

Fuse

— Lightweight fuzzy-search, in JavaScript

สำหรับคนที่ต้องการระบบ search ที่เป็นแบบ full text search ตัวนี้ตอบโจทย์สุดๆ

แถมๆ

1. reapop — A React and Redux notifications system
2. react-select — A Select control built with and for React JS
3. react-js-pagination — A ReactJS dumb component to render a pagination.
4. react-block-ui — Easy way to block the user from interacting with your UI.

แถมอีกรอบเอ้า

1. next.js — Framework for server-rendered or statically-exported React apps
2. react-static — A progressive static-site generator for React.
3. gatsby — Blazing fast static site generator for React