#React

วันนี้จะมาแนะนำ Frontend Tooling ตัวนึงที่ชื่อว่า Vite อ่านว่า วีด อ่านคล้ายๆกับ veet โดย Evan You ผู้สร้าง Vue.js นั่นเอง แต่ตัว Vite ไม่ได้รองรับแ...

Cookie Consent เป็น JavaScript Plugin ที่ทำให้เราทำ Cookie Consent แสดง Popup เพื่อขอความยินยอมจากผู้ใช้งานได้แบบง่ายๆ เลย ตัว Plugin เป็น Vanilla JavaScript นั่นหมายความว่า ส...

Headlessui เป็น UI Components จากทีม Tailwind Labs ปัจจุบัน รองรับ React.js และ Vue.js โดยปัจจุบันมี Component ให้เลือก เช่น Dropdown, Menu, Tog...

API Routesใน Next.js เราสามารถทำตัวเป็น Backend APIs ได้เลย โดยที่ไม่ต้องมี Server เพิ่ม โดยเพียงแค่สร้างโฟลเดอร์ `api` ไว้ภายใน `page...

ปกติแล้ว Routing ใน Next.js จะเป็นแบบ file-system เพียงแค่เราสร้างไฟล์ในโฟลเดอร์ `pages` เราก็จะได้หน้าเว็บนั้นๆ เช่น สร้างไฟล์ `about.js` url เราก็จะเป็น `/about`ทีนี้ถ้าเรามีเ...

ตอนนี้จะเป็นเรื่องของ Fetching API เพื่อดึงข้อมูลจาก API มาแสดง ซึ่งจริงๆ แล้ว fetching data นั้นทำได้หลายท่ามากๆ เช่น Client Side - ด้วยการใช้ `useEffect` และทำการ `fetch` แ...

พอดีว่าผมห่างหายกับการเขียน React.js ไปพักใหญ่ๆ คือแทบไม่ได้เขียนโค๊ด หรือทำเว็บเลย ตั้งแต่ปีที่แล้ว และเพิ่งกลับมารื้อฟื้นใหม่ ก็ต้นปี 2022 ที่ผ่านมา ก็ได้ไปเจอตัว State Manageme...

สวัสดีครับ ตอนที่ 4 มาพูดถึงเรื่องของ Pre Rendering กันครับ บทนี้ส่วนใหญ่เป็นทฤษฎี พยายามอ่านทำความเข้าใจไปก่อนครับ ไม่เข้าใจทั้งหมดไม่เป็นไร รอบทถัดไปเรื่อง Data Fetching เพื...

มาต่อกันที่บทที่ 3 ครับ บทนี้ก็ยังใช้ source code ที่ได้จาก `create-next-app` นะครับ วันนี้ต่อด้วยเรื่องของ Assets และการจัดการ CSS โดย Assets ก็หมายถึงพวก static files ทั้งหลาย เ...

Create Pages & Routingสำหรับบทเรียนนี้ เรายังคงอ้างอิงจาก โค๊ด จาก `create-next-app` โดยเราจะทำหน้าเว็บขึ้นมาเพิ่ม 2 หน้าครับ คือ Index กับหน้า About ...

สวัสดีครับ มาเริ่มตอนแรกกันด้วย Next.js คืออะไร และการขึ้นโปรเจ็ค Next.js กันครับ Next.js คืออะไร?Next.js เป็น React Framework ที่ช่วยให้เราทำงานส...

ผมเคยเขียนบทความเกี่ยวกับ Next.js ไว้เมื่อปี 2020 ตอนที่ผมเพิ่งหัดใช้ Next.js ณ​ ตอนนั้นคือ version 9.3 และปัจจุบัน ก็มีพัฒนามาจน vers...

สวัสดีครับ ขอต้อนรับเข้าสู่เนื้อหา React.js ฉบับเริ่มต้น โดยเนื้อหา เหมาะสำหรับมือใหม่หัดเขียนนะครับ เน้นพื้นฐาน และมีตัวอย่างง่ายๆ ให้ลองทำ ลองฝึกครับ เตรียมความพร้...

React สำหรับผู้เริ่มต้นสวัสดีครับ 👋สำหรับ Tutorial นี้ผมสร้างมาเพื่อจุดประสงค์คือ ต้องการทบทวนตัวเอง เพราะว่าช่วงนี้ผมห่างหายจากการเขียนโค๊ดไปซักพัก เกือบๆ 1 ปี หรือแม้แต่...

Ahoy! สวัสดีครับวันนี้ผมจะมาเขียนบล็อกแชร์ประสบการณ์ และบันทึกการอัพเดท Blog ของผมกันนะครับ จริงๆ ไม่ได้ปรับแก้อะไรมากมาย ยังคงใช้ Gat...

วันนี้มาพบกับบทความเกี่ยวกับพื้นฐาน React.js ครับ ว่าด้วยเรื่องการของจัดการ Form และ Input ต่างๆ กันนะครับเนื่องจากว่าการทำ Web Application ปฎิเสธไม่ได้ว่า เราต้องใช้พวก Input F...

สวัสดีครับ วันนี้ผมมาลองทำ Example Project ด้วยการลองใช้งาน SWR นะครับ โดยปกิแล้ว เวลาเรา Fetch API จาก Server เราจะใช้พวก native `fetch` ที่มากับ Browser ห...

พอดีว่าได้มีโอกาสได้ทำ Single Page Application ด้วย React ของเว็บๆ นึง และที่นี้ปัญหาคือ เวลาเราไป Deploy เราต้องเอา SPA ของเราเนี่ย ไปเชื่อมต่อกับ Web ที่เค้ามีอยู่แล้ว โดยวางเป็...

สวัสดีครับ บทความนี้ผมจะมาแชร์ วิธีการทำ Search บนเว็บไซต์นะครับ เนื่องจากว่าผมเพิ่งลองใส่ช่อง ค้นหา ที่บล็อกนี้ โดยใช้ Algolia นั่นเองและตัวบล็อกของผมเป็น Gatsby ที่ built เป็น...

<ShareLink url="/tutorials/learn-nextjs/intro" title="บทความสอน Next.js อัพเดทเนื้อหา ปี 2022" />สวัสดีครับ บทความนี้จะพาไปรู้จักกับการเขียนเว็บด้วย Next.js กันนะครับซึ่งบทควา...

วันนี้จะมาบันทึกการลองใช้งาน React Router v6 ดูครับ ซึ่งจริงๆแล้วมันยังเป็น Alpha อยู่และอาจจะมี breaking change หรือ API บางอย่างที่มันเปลี่ยนก็ได้ ฉะนั้นบทความนี้ เป็นเพียงบทควา...

โดยปกติ ก่อนหน้านี้ เวลาที่เราสร้าง React Component แบบ Class เรามักจะใช้ `React.PureComponent` เพื่อให้ Component นั้นๆ render เฉพาะเวลาที่ Props มีการเปลี่ยนแปลง (การทำ Memoized...

สวัสดีครับ บล็อกนี้ดองไว้นานแล้วไม่ได้เขียนซักที เนื่องจากว่าตอนนี้บล็อกแห่งนี้ก็เปลี่ยนมาใช้ Gatsby มาได้ซักพักนึงแล้ว ก็เลยถือโอกาสเขียนถึง Gatsby ซักหน่อยละกันครับซึ่งบันทึกก...

สวัสดีครับ วันนี้จะพาไป Setup Server สำหรับ Deploy Backend และ Frontend คือ Node.js Application และ React App ไว้ในเครื่องเดียวกัน โดยใช้...

หลังจากบทความก่อนหน้านี้ 3 เดือนที่แล้ว ผมเขียนบอกไว้ว่า Migrate จาก Middleman มา Gatsby แล้ว ซึ่งต่อจากนั้น ก็ไม่ได้มีเวลาอัพเด...

สวัสดีครับ ห่างหายบทความไปพักใหญ่ๆเลย วันนี้มาพร้อมกับบทความว่าด้วยเรื่อง Devahoy เปลี่ยนจาก Middleman มาเป็น Gatsby เรียบร้อยแล้ว หลังจากใช้เวลาปรับแก้อยู่นานมากๆ (จริงๆคือดองไว้...

วันนี้มานำเสนอบทความเกี่ยวกับการ Deploy งานของเราขึ้น Hosting กันครับ โดยทั่วๆไปแล้ว เวลาเราทำเว็บไซต์ซักเว็บนึง และอยากให้มันออนไลน์ ให้ทุกๆคนเข้าถึงได้ สิ่งที่เราต้องมีก็คือ Dom...

วันนี้จะมาพูดถึงเรื่อง Hooks กันเนาะ เนื่องจากได้ลองอ่าน Introducing Hooks — React เหตุเพราะไปเห็น Repo ตัวนึง ใน Github ว่าทำไมมันขึ้...

สวัสดีครับ บทความนี้ผมจะมาพูดถึงเรื่อง Redux กันเนอะ แนะนำว่าควรมีความรู้ React เบื้องต้นมาบ้าง เข้าใจ Props และ State หรือใครไม่เคยเขียน React มาก่อน เริ่มอ่านได้จากบทความนี้ก็ได...

สวัสดีครับ วันนี้ผมมีตัวอย่างการทำเว็บ 2 ภาษา ด้วย React กันครับ เผื่อว่าบางคนเวลาทำเว็บด้วย React แล้วเวลาใช้งานฟังค์ชัน 2 ภาษา อาจจะต้องส่ง key `lang` แนบไปที่ header หรือว่าทุก...

สวัสดีครับ สำหรับบทความนี้เป็นภาคต่อจาก มาเริ่มต้นเขียน React ด้วย Create React App กันดีกว่า ละกัน ว่าด้วยเ...

สวัสดีครับ บทความนี้เป็นบทความที่ผมดองไว้ยาวนานมากๆ เนื่องจากว่าติดปัญหาหลายๆอย่างทำให้ไม่มีเวลาเขียนให้จบซะที ครั้นมีเวลามาเขียนต่อ ก็พบว่าเนื้อหามันอัพเดทไปไวเหลือเกิน ก็ต้องมาร...

ช่วง 2-3 วันนี้ได้มีโอกาสได้ลองเล่น React.js ดู หลังจากได้ยินมานานแล้ว แต่ไม่มีโอกาสได้ลองเล่น เนื่องจากก่อนหน้านี้ แว๊บๆไปเปิด Get Started ดูแล้วพบว่าโค๊ดมันรกจัง HTML ผสมกับ Jav...