หมวดหมู่: React

1. สร้าง QRCode แบบง่าย ๆ ลองตัวนี้
▸ https://github.com/zpao/qrcode.react

.
2. สร้าง rich text editor ง่าย ๆ ด้วย React Quill
▸ https://zenoamaro.github.io/react-quill

.
3. ครอบตัดรูปภาพด้วย React Image Crop
▸ https://github.com/DominicTobias/react-image-crop

.
4. drag and drop รูปภาพ เพื่อเตรียมอัปโหลดด้วย react-dropzone
▸ https://react-dropzone.js.org/

.
5. สร้างปฏิทินกิจกรรม หรือ events calendar ด้วย react-big-calendar
▸ https://github.com/jquense/react-big-calendar

.
6. จัดการข้อมูลรูปแบบตารางสวยๆ ด้วย react-bootstrap-table2 (สำหรับคนใช้ Bootstrap)
▸ https://react-bootstrap-table.github.io/react-bootstrap-tab…

.
7. Datepicker ไว้สำหรับ input ข้อมูลแบบปฏิทิน
▸ https://github.com/Hacker0x01/react-datepicker

.
8. ทำ notification สวยๆ ปรับได้หลายแบบ ด้วย React-Toastify
▸ https://github.com/fkhadra/react-toastify

.
9. สร้าง Chart สวยๆ ด้วย Recharts
▸ https://github.com/recharts/recharts

.
10. พรีวิว pdf ด้วย React PDF viewer
▸ https://github.com/phuoc-ng/react-pdf-viewer

.
11. custom ส่วน head ของ html ง่ายๆ ด้วย React Helmet
▸ https://github.com/nfl/react-helmet

.
12. ตัวนี้สำหรับทำ drag and drop รายการต่างๆ
▸ https://github.com/atlassian/react-beautiful-dnd

.
13. ทำ input mask ด้วย React IMask Plugin
▸ https://github.com/…/imask…/tree/master/packages/react-imask

.
14. สำหรับคนที่ใช้ Redux สามารถจัดเก็บข้อมูลแบบ persist ได้ง่ายๆ เช่น localStorage เป็นต้น ด้วย Redux Persist (ไม่ต้องเขียน set, get เอง)
▸ https://github.com/rt2zz/redux-persist

.
15. สร้างตัวอย่างรอโหลดสวยๆ ด้วย react-loading-skeleton
▸ https://github.com/dvtng/react-loading-skeleton

.
ใครใช้ตัวไหนอยู่บ้าง แนะนำเพื่อนๆ ได้นะครับ

โค้ชเอก

สำหรับคนที่เขียน React หรือ React Native อยู่ ลองใช้ไลบรารีฟอร์มตัวนี้ได้ครับ “React Hook Form”

.
ปกติคนที่เขียน React หรือ React Native น่าจะเคยใช้ Formik และ Redux Form กันมาบ้าง

วันนี้มาแนะนำอีก 1 ทางเลือกครับ และน่าจะเป็นทางเลือกใหม่ที่ดีด้วย มาดูกันว่า react-hook-form มีข้อดีอะไรบ้าง

.
1. re-render ที่่น้อยลง (ทำให้ประสิทธิภาพดีขึ้น) กว่า Formik และ Redux Form

.
2. ใช้เวลาเรียนรู้ไม่มาก เขียนโค้ดสั้นลงกว่า Formik และ Redux Form

.
3. ใช้ React Hooks

.
4. ขนาดเล็กมากแค่ 6.2KB

.
5. การทำ Validation มีทั้งแบบ built-in และหรือจะใช้ Yup ก็ได้

.
6. มีตัว Form Builder คลิกสร้างโค้ดอัตโนมัติให้เลย

.
มีใครใช้อยู่บ้างมั้ย ใครยังไม่ได้ใช้ก็ลองดูได้นะ

.
รายละเอียด => https://react-hook-form.com/

.
โค้ชเอก

Hooks เป็นฟีเจอร์ใหม่ที่มาพร้อมกับ React เวอร์ชัน 16.8 เพื่อให้เราสามารถใช้งาน state และเรียกใช้ features ต่างๆ ของ React ได้ โดยที่ไม่ต้องเขียนแบบ class component ยกตัวอย่าง เช่น เราสามารถใช้ useEffect แทน componentDidMount ได้ เป็นต้น

.
ส่วนคนที่เขียน React Native ก็เขียนได้เลยนะ แต่ต้องเป็นเวอร์ชัน 0.59 ขึ้นไปครับ

.
1. แนะนำให้เขียน React Hooks สำหรับโปรเจคใหม่เลย (ในหลักสูตรใหม่ที่ผมจะเปิดสอนจะพาเขียน Hooks เป็นหลักทั้งหมดครับ แต่จะพูดถึง class component ด้วยเช่นกัน) ถ้าโปรเจคเดิมใช้แบบ class component อยู่ก็ไม่ต้องตามแก้เป็น Hooks นะครับ ใช้ของเดิมได้เลย เพราะไม่มีแผนที่จะเอา class component ออกจาก React อยู่แล้ว

.
2. ทำไมเราต้องเปลี่ยนมาเขียน Hooks ด้วย เพราะช่วยป้องกันและแก้ไขปัญหาต่างๆ เช่น

– ถ้า component เรามีขนาดใหญ่ จะทำให้การ refactor และ test โค้ดต่างๆเป็นไปได้ยาก

– แก้ปัญหาเรื่อง Logic หรือ Lifecycle ซ้ำๆ กันระหว่างแต่ละ Component

– และหากเราใช้ Pattern เช่นพวก HOC หรือ render props ที่มีความซับซ้อน จะยากมากๆ ต่อการ debug ครับ และที่สำคัญอีกอย่างคือ การเขียน Hooks ทำให้ขนาดไฟล์เราเล็กลงด้วยนะ

.
3. กฏของการเขียน Hooks มี 2 ข้อ ได้แก่ ให้เขียนและใช้ Hooks ที่ top level เท่านั้น อย่าเขียนใน loops, conditions หรือ nested functions และ ต้องเขียนเป็น function component ของ React เท่านั้นนะ ห้ามเขียนในฟังก์ชันของ javascript ปกติ ยกเว้นจะเขียน custom Hooks ครับ

.
4. สำหรับคนที่ใช้ React Router และ React Redux อยู่ ตอนนี้ก็รองรับ Hooks แล้วนะครับ และคนที่ใช้ GraphQL และ Apollo ก็เขียนได้แล้ว ลองเปลี่ยนมาเขียนได้เลยนะ

.
ใครสนใจศึกษา React Hooks ก็ตามไปดูได้นะ => https://reactjs.org/docs/hooks-intro.html

ไว้มีโอกาสจะมาเขียนให้อ่านกันอีกครับ

.
โค้ชเอก

สำหรับคนที่เพิ่งเริ่มต้นศึกษา React ลองดูชีทสรุปเรียงตามนี้นะครับ จะทำให้เห็นภาพรวมของ JavaScript ES6+, React และ Redux ได้เป็นอย่างดี จะได้ดูด้วยว่าเราศึกษามาถูกทางหรือเข้าใจอย่างดีแล้วหรือไม่ ลองดูครับ 🙂

.
1. JavaScript ES6+ => https://devhints.io/es6

สำหรับคนที่เพิ่งเขียน React หรือ React Native ใหม่ๆ เวลาอ่านเอกสารของ React เรื่อง React Lifecycle Methods อาจจะงงๆ เรื่องลำดับ และขั้นตอนการทำงานของ method แต่ละตัว แนะนำให้เข้าไปดูไดอะแกรมในเว็บนี้ได้ครับ เราสามารถคลิกเข้าไปดูรายละเอียดของแต่ละ method ได้เลย

.
รายละเอียด: http://bit.ly/2I4Ngax