Tag: Client Components

  • Road to Next.js: เส้นทางสู่การเป็น Fullstack Web Developer

    Road to Next.js: เส้นทางสู่การเป็น Fullstack Web Developer

    Road to Next.js (เส้นทางสำหรับศึกษา Fullstack web framework) การเริ่มต้นเส้นทางสู่การเป็น Fullstack Web Developer อาจดูซับซ้อน แต่ด้วย Next.js ทุกอย่างจะง่ายขึ้น บทความนี้จะพาคุณไปสำรวจเส้นทางสู่การเรียนรู้ Next.js อย่างละเอียด ตั้งแต่พื้นฐาน Front-End และ Back-End ไปจนถึงการประยุกต์ใช้เทคโนโลยีต่างๆ เพื่อสร้างเว็บแอปพลิเคชันที่ทันสมัยและมีประสิทธิภาพ Next.js คืออะไร? Next.js คือ Full Stack Framework ที่สร้างขึ้นบน React ซึ่งเป็น JavaScript library ยอดนิยมสำหรับการสร้าง User Interface (UI) Next.js ช่วยให้คุณสามารถพัฒนาทั้ง Front-End และ Back-End ของเว็บแอปพลิเคชันได้ในที่เดียว ทำให้กระบวนการพัฒนาเป็นไปอย่างรวดเร็วและมีประสิทธิภาพมากขึ้น Front-End และ Back-End ทำงานร่วมกันอย่างไร? ในการพัฒนาเว็บแอปพลิเคชัน เรามักจะแบ่งออกเป็นสองส่วนหลักๆ คือ Front-End…

  • พัฒนาเว็บด้วย React 17.x สำหรับผู้เริ่มต้น [Phase1] ฉบับสมบูรณ์

    พัฒนาเว็บด้วย React 17.x สำหรับผู้เริ่มต้น [Phase1] ฉบับสมบูรณ์

    พัฒนาเว็บด้วย React 17.x | สำหรับผู้เริ่มต้น [Phase1] สวัสดีครับทุกท่าน ในบทความนี้เราจะมาเริ่มต้นการเรียนรู้ React 17.x สำหรับผู้เริ่มต้นกันครับ เนื้อหาชุดนี้เป็นการปรับปรุงจากเนื้อหา React เบื้องต้นฉบับปี 2021 ที่ได้รับความนิยมอย่างมากในช่อง YouTube ของผม เนื่องจาก React มีการเปลี่ยนแปลงและพัฒนาอยู่เสมอ เนื้อหาชุดเก่าจึงอาจไม่ตรงกับปัจจุบันเท่าไหร่นัก ผมจึงได้ทำการสำรวจความคิดเห็นและตัดสินใจอัปเดตเนื้อหา React สำหรับผู้เริ่มต้นใหม่ เพื่อให้ทุกท่านได้รับความรู้ที่ทันสมัยและสามารถนำไปประยุกต์ใช้ได้จริง เนื้อหา React เบื้องต้นฉบับปรับปรุง 2021 ในบทความนี้ เราจะมาทำความรู้จักกับ React กันอย่างละเอียด ตั้งแต่พื้นฐานไปจนถึงแนวคิดหลักๆ ที่จำเป็นสำหรับการเริ่มต้นพัฒนาเว็บด้วย React 17.x เราจะมาดูว่า React คืออะไร มีความสำคัญอย่างไร และทำไม React ถึงเป็นที่นิยมในปัจจุบัน นอกจากนี้ เราจะมาทบทวนพื้นฐาน JavaScript ES6 ที่จำเป็นสำหรับการใช้งาน React อีกด้วย React คืออะไร? React…

  • Introduction to Web dev (แนะนำโลกของการพัฒนาเว็บ) | Web Development 101 EP. 1

    Introduction to Web dev (แนะนำโลกของการพัฒนาเว็บ) | Web Development 101 EP. 1

    Introduction to Web dev (แนะนำโลกของการพัฒนาเว็บ) | Web Development 101 EP. 1 สวัสดีครับทุกคน ยินดีต้อนรับสู่ช่อง mikerobster วันนี้เราจะมาเริ่มต้นการเดินทางในโลกของการพัฒนาเว็บ (Web Development) ไปด้วยกัน ในซีรีส์ Web Development 101 นี้ เราจะมาทำความเข้าใจตั้งแต่พื้นฐานที่สุด เพื่อให้คุณที่สนใจอยากเริ่มต้นในสายงานนี้ ได้เห็นภาพรวมของอุตสาหกรรมนี้อย่างชัดเจน พร้อมทั้งแนะนำเครื่องมือและแนวคิดสำคัญต่างๆ ที่จำเป็นต่อการเริ่มต้น เว็บไซต์คืออะไร? เว็บไซต์คืออะไร? หลายคนอาจจะเคยใช้เว็บไซต์มานับครั้งไม่ถ้วน แต่เคยสงสัยไหมว่าเบื้องหลังการทำงานของมันเป็นอย่างไร? ในบทความนี้ เราจะมาทำความเข้าใจว่าเว็บไซต์ทำงานอย่างไร ตั้งแต่ผู้ใช้งาน (User) พิมพ์ชื่อเว็บไซต์ใน Browser จนถึงการแสดงผลข้อมูลบนหน้าจอ กระบวนการทำงานของเว็บไซต์ กระบวนการทำงานของเว็บไซต์เริ่มต้นเมื่อผู้ใช้งาน (User) เปิด Browser และพิมพ์ชื่อเว็บไซต์ เช่น shopee.com ลงไป สิ่งที่เกิดขึ้นหลังจากนั้นคือ User และ Browser: ผู้ใช้งาน (User) คือตัวเราที่ต้องการเข้าชมเว็บไซต์…

  • API Architecture มีอะไรบ้าง: รูปแบบ API ยอดนิยมที่คุณต้องรู้

    API Architecture มีอะไรบ้าง: รูปแบบ API ยอดนิยมที่คุณต้องรู้

    API Architecture มีแบบไหนบ้าง ในโลกของการเขียนโปรแกรม API (Application Programming Interface) เป็นพื้นฐานสำคัญที่ช่วยให้ระบบต่างๆ สามารถสื่อสารและแลกเปลี่ยนข้อมูลกันได้ บทความนี้จะพาคุณไปทำความรู้จักกับ API Architecture หรือสถาปัตยกรรม API ที่หลากหลาย พร้อมเจาะลึกรูปแบบ API ยอดนิยมที่คุณควรรู้ เพื่อให้คุณเข้าใจถึงวิธีการทำงาน จุดเด่น และข้อควรพิจารณาในการนำไปประยุกต์ใช้ API คืออะไร API คือ การสื่อสารระหว่าง 2 ระบบผ่านข้อตกลง (protocol) ซึ่งเป็นเหมือนข้อกำหนดที่ทำให้ระบบหนึ่งสามารถร้องขอข้อมูลหรือบริการจากอีกระบบหนึ่งได้ นิยาม API API เปรียบเสมือนตัวกลางที่ช่วยให้โปรแกรมต่างๆ สามารถโต้ตอบกันได้ โดยไม่ต้องรู้รายละเอียดภายในของแต่ละระบบ Protocol Protocol หรือข้อตกลง คือ กฎเกณฑ์ที่กำหนดรูปแบบการสื่อสารระหว่างระบบ เช่น รูปแบบข้อมูลที่ส่ง รูปแบบการร้องขอ และรูปแบบการตอบสนอง Client Client คือ โปรแกรมหรือระบบที่ทำการร้องขอข้อมูลหรือบริการจาก API เช่น เว็บเบราว์เซอร์, แอปพลิเคชันบนมือถือ หรือโปรแกรมอื่นๆ…

  • มาเรียน React 18 ฉบับ Guideline แบบด่วนจี๋กัน

    มาเรียน React 18 ฉบับ Guideline แบบด่วนจี๋กัน

    มาเรียน React 18 ฉบับ Guideline แบบด่วนจี๋กัน สวัสดีครับทุกคน วันนี้เราจะมาทำความรู้จักกับ React 18 กันแบบเจาะลึกและรวดเร็ว เพื่อให้คุณสามารถเริ่มต้นพัฒนาเว็บแอปพลิเคชันได้อย่างมีประสิทธิภาพ React เป็นหนึ่งใน JavaScript library ที่ได้รับความนิยมอย่างสูงในการพัฒนา Front-End ด้วยความยืดหยุ่นและประสิทธิภาพที่ยอดเยี่ยม ทำให้ React กลายเป็นตัวเลือกอันดับต้น ๆ ของนักพัฒนาทั่วโลก มาเรียนรู้ React 18 ฉบับ Guideline ไปพร้อม ๆ กันเลย React คืออะไร React คือ Library สำหรับพัฒนาเว็บแอปพลิเคชัน Front-End ที่ถูกพัฒนาโดย Facebook React ช่วยให้เราสร้าง User Interface (UI) ที่มีความซับซ้อนได้อย่างง่ายดายและมีประสิทธิภาพ React ใช้แนวคิด Component-based ซึ่งหมายความว่าเราสามารถแบ่ง UI ออกเป็นส่วนประกอบเล็ก ๆ ที่เรียกว่า…

  • ลอง Next.js 14 แบบ Quick overview กัน: React Framework สำหรับ Full Stack

    ลอง Next.js 14 แบบ Quick overview กัน: React Framework สำหรับ Full Stack

    ลอง Next.js 14 แบบ Quick overview กัน สวัสดีครับทุกคน วันนี้เราจะมาเจาะลึก Next.js กันครับ Next.js คืออะไร มีความสัมพันธ์กับ React อย่างไร และทำไมถึงเป็น React Framework ที่ได้รับความนิยมในการพัฒนา Full Stack Web App ในปัจจุบัน เราจะมาดูภาพรวมของ Next.js 14 พร้อมทั้งสำรวจฟีเจอร์เด่น ๆ ที่ทำให้ Next.js แตกต่างจาก React ทั่วไป รวมถึงการใช้งาน Server Components, App Router, การจัดการ Routing และการสร้าง API Next.js คืออะไร และความสัมพันธ์กับ React Next.js คือ React Framework ที่ถูกสร้างขึ้นมาเพื่อช่วยให้การพัฒนาเว็บแอปพลิเคชันด้วย React เป็นเรื่องง่ายและมีประสิทธิภาพมากยิ่งขึ้น…