React สำหรับผู้เริ่มต้น (ฉบับปี 2022)

React สำหรับผู้เริ่มต้น

สวัสดีครับ 👋

สำหรับ Tutorial นี้ผมสร้างมาเพื่อจุดประสงค์คือ ต้องการทบทวนตัวเอง เพราะว่าช่วงนี้ผมห่างหายจากการเขียนโค๊ดไปซักพัก เกือบๆ 1 ปี หรือแม้แต่ตอนที่ได้เขียนโค๊ด บางครั้งก็มีแค่ Code Review หรือดูแลโค๊ด ปรับแก้ ก็ใช้ Codebase เดิม มาแก้ๆ เพิ่ม feature เล็กๆน้อยๆ ทำให้ผมไม่แน่ใจว่า Skill ที่ตัวเองมีอยู่มันดีหรือเปล่า ก็เลยถือโอกาส ทบทวนตัวเองไปด้วย เลยเอามาทำเป็น Tutorial สอนทั้งตัวเอง และคนอื่นครับ

ซึ่งจริงๆ บล็อกผมก็เขียนเกี่ยวกับ React.js หลายบทความเหมือนกัน แต่ส่วนใหญ่ก็จะคาดหวังคนที่มาอ่านคือมีพื้นฐาน React มาบ้างนิดๆหน่อยๆ แต่ก็พบว่ามีบางส่วนเหมือนกัน ที่ไม่มีพื้นฐาน React เลย และมาอ่านบล็อก ก็จับต้นชนปลายไม่ถูก เลยลองทำเป็นแบบ tutorial กึ่งๆ course ดูว่าจะเป็นยังไง

ก่อนหน้านี้ผมเคยทำ คอร์สสอน React.js น่าจะปี 2018-2019 ไม่แน่ใจ เนื้อหาค่อนข้างเก่าแล้ว + ผมคิดว่า สกิลการสอนผมยังไม่ดี มีส่วนที่ต้องปรับปรุงอีกเยอะ ก็เลยคิดว่า Tutorial นี้ น่าจะดีกว่าที่เคยทำครับ และอยากพัฒนาทักษะการพูดของตัวเองให้ดีกว่านี้ด้วยครับ

Prerequisites

สิ่งที่ทุกคนต้องมี (ควรรู้) ก่อนที่จะศึกษา React.js นะครับ ไม่จำเป็นต้องรู้แบบเชี่ยวชาญครับ พอรู้บ้าง และก็เดี๋ยวก็ไปศึกษา ต่อยอด หรือลงลึกในเนื้อหา เมื่อได้เรียนรู้เรื่องนั้นๆครับ เช่น

• HTML & CSS - พื้นฐาน HTML & CSS รู้จักการสร้างเว็บไซต์เบื้องต้น เข้าใจ html tag, element และปรับแต่ง CSS เบื้องต้นได้
• JavaScript - เข้าใจพื้นฐาน JavaScript เช่น variables, function, if/else, array, object เป็นต้น (จริงๆ ก็เป็น fundamental พื้นฐานของ Programming language ทุกๆภาษาครับ)
• Text Editor - ตัว Text Editor หรือ IDE ก็ได้ แต่แนะนำเป็น Text Editor ชื่อ VS Code ครับ
• Debugging & Googling - มีสกิลในการดู Error ของโปรแกรม การค้นหา และแก้ปัญหาด้วยตัวเอง ผมว่ามันคือสกิลที่ค่อนข้างสำคัญนะ ไม่ว่าคุณจะเรียนตาม tutorial ตาม youtube ไหน คุณก็ต้องเจอปัญหา และต้องรู้จักกับการแก้ปัญหาเบื้องต้นด้วยตัวเอง ฉะนั้น การค้นหา การใช้ keyword ก็สำคัญ และมันฝึกฝนกันได้ครับ เช่น ปกติค้นหาแต่ภาษาไทย ก็ลองเปลี่ยนเป็นภาษาอังกฤษ หรือเอา keyword ที่เป็น error ไปค้นหาเลยก็ได้ (อย่างเช่น Program error เรารู้มั้ยว่ามัน error บรรทัดไหน? ไฟล์ไหน?)

Table of Contents

เนื้อหาใน Tutorial นี้ ต้องบอกเลยว่า ผมยังไม่แน่ใจว่าจะมีเนื้อหาอะไรบ้างนะครับ ส่วนใหญ่คงเป็น Basic พื้นฐาน เป็นแค่ Overview ไม่ได้ลงลึกในรายละเอียด เนื้อหาส่วนใหญ่เป็นแค่แนวทางครับ ที่เหลือคือผู้เรียน ต้องไปเรียนรู้ ฝึกฝนเพิ่มเติมเอง การจะเก่งได้ไม่ใช่การทำตาม tutorial ทุกอย่าง แต่คือการฝึกฝน อาจมีปรับนู้น แก้นี้นิดหน่อย เพื่อให้เราได้เรียนรู้ทีละนิดๆ

เนื้อหาที่วางแผนไว้คร่าวๆ คือ

• Setup VS Code & Prettier
• รู้จักกับ JSX, Props, State, Event
• การจัดการกับ Form และ Ref
• การทำงานร่วมกับ css / css module
• การ fetch ข้อมูล API
• การใช้งาน If Condition และ array map
• รู้จักกับ Context เบื้องต้น
• ใช้งาน React Router เบื้องต้น
• การ Deploy เว็บ ลง Netlify หรือ Vercel
• มีการทำระบบ Login ด้วย Firebase
• เนื้อหาเพิ่มเติม เช่น การใช้ TypeScript, ขึ้นโปรเจ็คด้วย Vite, Next.js, Library ที่น่าสนใจ

เท่าที่นึกออกก็ประมาณนี้ คร่าวๆ ก่อนนะครับ (เดี๋ยวจะมาอัพเดทเนื้อหาอีกครั้ง) และเนื้อหานอกเนื้อจากนี้ ก็อ่านเพิ่มเติมได้ในส่วน blog เหมือนเดิมครับ (เนื้อหาหลากหลาย แล้วแต่อารมณ์ครับ จริงๆ คือแล้วแต่ว่าช่วงนั้นสนใจอะไรมากกว่า 😅)

โดยที่เนื้อหา ผมจะทำคือ

1. เป็น Text Tutorial ลงบล็อก สำหรับเป็น Reference และคนชอบอ่าน (ที่นี่)
2. เป็นคลิปลง Youtube ครับ สำหรับคนชอบดูแบบ video

Resources

แนะนำแหล่งเรียนรู้อื่นๆ เพิ่มเติมครับ (ผมไม่ได้ดูทุกคลิปนะครับ ดูแบบข้ามๆบ้าง แต่จากที่ดูแล้วก็โอเคอยู่ครับ) แนะนำเป็นแหล่งศึกษาเพิ่มเติมครับ

แต่ละคนมีสไตล์การสอนแต่งต่างกันครับ บางคนเน้นกระชับ ไปเร็ว ผู้เรียนบางคนที่พื้นฐานน้อยอาจตามไม่ทัน บางคนสอนอาจจะอธิบายเยอะไปนิด คนมีพื้นฐานก็เบื่อ แต่คนหัวช้า หรือไม่ค่อยมีพื้นฐานอาจจะชอบ เพราะตามทันครับ ซึ่ง มันก็ไม่มีผิดถูกนะครับ ขึ้นอยู่กับความชอบแต่ละคน และพื้นฐานของผู้เรียนเองด้วย

ภาษาอังกฤษ

• Youtube - React Course - Beginner's Tutotirla for React JavaScript Library
• Learn React - React Docs Beta
• The React Beginner's Guide for 2022
• MDN - Getting started with React
• Microsoft - Get started with React
• Courses อื่นๆ จาก React Docs

สำหรับภาษาไทย

• PasaComputer - สอน React ตั้งแต่เริ่มจนเขียนแอปได้ | Crash Course Series
• Zinglecode - สอน React เบื้องต้น จนใช้ได้จริง #01
• React Docs แบบแปลภาษาไทย (แปลไม่หมดนะครับ)
• KongRuksiam - พัฒนาเว็บด้วย React | สำหรับผู้เริ่มต้น [Phase1] - ปูพื้นฐาน React

Happy Coding ❤️

สำหรับผู้ที่หลงเข้ามาอ่าน หากใครสนใจ Tutorial นี้ ก็รอติดตามนะครับ จะมาอัพเดทเนื้อหา หรือ comment หรือกด ❤️ เพื่อจะได้รู้ว่ามีคนสนใจมากน้อยแค่ไหนครับ (ต้อง login ด้วย Github)