MUI หรือ Material UI ใช้งานง่าย สะดวก และช่วยให้พัฒนาเว็บแอปพลิเคชันได้เร็ว มีประสิทธิภาพมากกว่าการมาเขียน Style ด้วยตัวเอง รวมถึงตัว MUI มีการดีไซน์ที่สวยงามอยู่แล้วไม่ต้องปรับเยอะ MUI จึงเป็นไลบรารี ที่คนเขียน React ส่วนมากนิยมใช้ 

Material UI (MUI) คืออะไรและทำไมต้องใช้?

บทความนี้ผมจะอธิบาย Built-in components ที่ React มีมาให้ครับ ซึ่งได้แก่ Fragment, Profiler, StrictMode และ Suspense ที่ต้องบอกเลยครับว่า Built-in บางตัวช่วยให้ชีวิตชาว React developer สดวกสบายขึ้นเยอะเลยครับ

React Built-in components เครื่องมือเทพที่ React มีให้

เรียนรู้วิธีการ debug custom hook ด้วยใช้ Hook useDebugValue ใน React เพื่อการแสดงข้อมูลใน DevTools และช่วยแก้ไขปัญหา bug ในการพัฒนาเว็บ React อย่างมืออาชีพ

หมดปัญหาเรื่อง bug ด้วย  useDebugValue

เรียนรู้การใช้ useSyncExternalStore ใน React เพื่อเชื่อมต่อข้อมูลภายนอกแบบเรียลไทม์อย่างมืออาชีพ

เชื่อมต่อข้อมูลภายนอกแบบ realtime อย่างโปรด้วย react hook useSyncExternalStore

เรียนรู้วิธีใช้ useDeferredValue สุดยอด react hook ที่ไว้ปรับปรุงประสิทธิภาพของ React webapp  เพื่อลดการกระตุกของ UI และจัดการการแสดงผลอย่างราบรื่น

จัดการการแสดงผลใน React อย่างมีประสิทธิภาพด้วย react hook useDeferredValue

ปรับปรุงประสิทธิภาพ จัดการ state ของ webapp ให้ราบลื่นไม่กระตุกด้วย ด้วยสุดยอด react hook useTransition ที่จะสร้างความรู้สึกที่ดีต่อผู้ใช้งาน

เขียน react ให้ smooth ด้วย react hook useTransition

เคล็ดลับและวิธีการใช้งานที่ช่วยเพิ่มประสิทธิภาพในการอัพเดตสไตล์และปรับปรุง DOM อย่างรวดเร็วด้วย React Hook ตัวใหม่ useInsertionEffect ที่เร็วยิ่งกว่า useLayoutEffect และ  useEffect

อัพเดต dom อย่างรวดเร็วด้วย react hook useInsertionEffect

เรียนรู้วิธีการจัดการ ref นอก component ใน React อย่างง่ายดายด้วย react hook useImperativeHandle เครื่องมือขั้นเทพเพื่อสร้าง ref ที่กำหนดเองและปรับปรุงประสิทธิภาพของแอปพลิเคชันของคุณอย่างมืออาชีพ

จัดการ ref นอก component ใน React ง่ายๆ ด้วย useImperativeHandle

ผมจะมาแชร์ บรรยากาศ พร้อมอัพเดต feature ใหม่ของ line ที่ได้รู้จากการไปร่วมงาน Line Conference Thailand 2023 หรือ LCT2023 เมื่อวันที่ 26 กันยายน 2023 ผมรับรองได้เลยห้ามพลาดสำหรับสาย developer ที่ต้องทำงานที่เกี่ยวกับ line

Line Conference Thailand 2023

Docker Swarm หรือที่เรียกว่า (Swarm mode) คือ หนึ่งในเครื่องมือสำหรับการทำ Container Orchestration กับ Docker ที่ช่วยให้สามารถจัดการและควบคุมระบบคอนเทนเนอร์ในรูปแบบของ Cluster ได้โดยง่ายและมีประสิทธิภาพ โดยมี manager node เป็นตัวจัดการและสั่งงาน และ worker node เป็นตัวทำงานที่รับคำสั่งจาก manager node เพื่อสร้างและจัดการกับคอนเทนเนอร์

การติดตั้ง Docker Swarm

Portainer คือ เครื่องมือที่ช่วยให้จัดการสภาพแวดล้อมต่างๆ ใน Docker ผ่าน WebUI เช่นการ สร้าง,ลบ,แก้ไข,ดู logs ของ conatiner และ Portainer ยังรองรับ Docker swarm, Kubernetes อีกด้วย

Portainer บน Docker

รู้มั้ยครับว่า useLayoutEffect คืออะไร ทำไมถึงต้องเอามาจัดการ side effects ของ dom useLayoutEffect คือ react hook ตัวนึงที่ใช้งานคล้ายกับ useEffect 
ในบทความนี้ผมจะพาไปเรียนรู้การใช้งาน useLayoutEffect แบบเจาะลึก

ดักจับ side effects ใน dom แบบขั้นเทพด้วย useLayoutEffect

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

React hook: useRef ที่ทำได้มากกว่าที่คุณคิด

บทความนี้จะ อธิบายการเขียน test ใน react โดยแบ่ง เป็น 4 รูปแบบหลักๆ คือ unit test, integration test, functional test, end-to-end test และเครื่องมีที่ใช้ คือ jest และ react testing library

React Testing เขียน Unit Tests ใน react ใครว่ายาก

เรียนรู้วิธีการจัดการ State ในระดับ global ด้วย useContext ใน React  บทความนี้จะแนะนำผู้อ่านเข้าสู่เส้นทางในการใช้ React hooks สำหรับการจัดการ state ระหว่าง components

จัดการ State แบบ Global ใน React ด้วย useContext

ในบทความนี้ จะอธิบายวิธีการสร้าง Global State โดยใช้ useReducer และ useContext เพื่อเรียนรู้วิธีการสร้าง Global State Management ใน React โดยใช้แค่ react hooks แบบไม่ต้องพึ่ง redux, recoil หรือ libraries อื่นๆ

สร้าง Global State Management แบบคูลๆ ใน React ด้วย useReducer และ useContext

จัดการ State Management ใน React อย่างมืออาชีพ ด้วย useReducer รวมเทคนิค ข้อดี ข้อเสีย และทุกขั้นตอนในการใช้ react hook useReducer เข้าใจ State Management พัฒนา React ให้ก้าวไปอีกขั้น

จัดการ State Management ขั้นเทพ ใน react  ด้วย useReducer

Optimizing React ให้ดียิ่งขึ้นด้วย useMemo รวมเทคนิคและแนวทางที่ดีในการใช้ useMemo ใน React Hooks และเรียนรู้เกี่ยวกับการประยุกต์ใช้เพื่อเพิ่มประสิทธิภาพของแอพพลิเคชัน React

ปรับปรุงประสิทธิภาพ React ด้วย Hook useMemo

ศึกษาการทำงานและวิธีใช้ useCallback ใน React Hooks ที่จะช่วยให้ประหยัดทรัพยากรและเพิ่มประสิทธิภาพในการทำงานของ React แอปพลิเคชัน  เสริมความรู้เรื่อง React Hook และวิธีการใช้งาน useCallback ด้วยความเข้าใจที่ถูกต้องและการนำไปใช้จริงให้มีประสิทธิภาพ

customize Function ใน React ให้มีประสิทธิภาพด้วย Hook useCallback

เรียนรู้ React Hook useEffect และวิธีการจัดการ side effects และ data fetching รวมถึง กฏการใช้งาน และสิ่งที่ต้องรู้ ได้อย่างมืออาชีพครบจบในที่เดียว