diff --git a/src/content/roadmap/frontend-beginner.md b/src/content/roadmap/frontend-beginner.md index 24ba081..f29666a 100644 --- a/src/content/roadmap/frontend-beginner.md +++ b/src/content/roadmap/frontend-beginner.md @@ -54,6 +54,8 @@ Tips: อย่าลืมทำความรู้จักกับกา JavaScript นั้นถือว่าเป็นภาษาที่ยากที่สุดใน 3 ภาษา แต่ก็เป็นภาษาที่เราจะได้ใช้งานและต่อยอดต่อไปในเนื้อหาต่อ ๆ ไป +- [JavaScript Crash Course - PasaComputer](https://youtu.be/Tz5Wk1yPlBE?si=LF1miZGscb60gEPB) +- [JavaScript ใน 21 วัน - PasaComputer](https://www.youtube.com/watch?v=oKY8tJLA5nU&list=PLOgiLP3tCaPXc9-whn0on3tDT9rQdXAWL) - [JavaScript Tutorial for Beginners: Learn JavaScript in 1 Hour](https://www.youtube.com/watch?v=W6NZfCO5SIk) - [Learn JavaScript - Full Course for Beginners](https://www.youtube.com/watch?v=PkZNo7MFNFg) - [The Modern JavaScript Tutorial](https://javascript.info/) diff --git a/src/content/roadmap/frontend-react.md b/src/content/roadmap/frontend-react.md new file mode 100644 index 0000000..5c43c48 --- /dev/null +++ b/src/content/roadmap/frontend-react.md @@ -0,0 +1,190 @@ +--- +title: 'Frontend Developer | React¸' +description: 'เรียนรู้การใช้ React ฉบับพื้นฐาน' +level: 'intermediate' +--- + +หลังจากที่ได้เรียน[พื้นฐานของการทำ Frontend Development](https://knowledge.thinc.in.th/roadmap/backend-beginner/) กันไปแล้ว ขั้นตอนต่อไปก็คือการใช้ UI Library ในการช่วยเราพัฒนาเว็บไซต์ ซึ่งเราจะมาเรียนรู้เกี่ยวกับ Library ยอดฮิตอย่าง [React](https://react.dev/) กัน + +โดยในบทความนี้จะมีลิงก์ไปยังเว็บไซต์อื่น ๆ ซึ่งจะส่วนใหญ่จะเป็นลิงก์ไปที่ Documentation ของ React ซึ่งเขียนดีมาก ๆ แล้ว หากใครอยากดูคอนเทนต๋์ที่เป็นภาษาไทย หรืออยากเรียนจากในคลิป เราจะมีลิงก์คลิปที่แนะนำให้ดังต่อไปนี้ + +## แนะนำ Course สอน React + +หากใครมีเวลาประมาณ 1-2 ชั่วโมง แล้วอยากเรียน React เป็นตั้งแต่ต้นจนจบภายในรวดเดียว แนะนำให้เข้าไปดู Resources เหล่านี้เลย + +- [Quick Start - React Docs](https://react.dev/learn) +- [React Tutorial for Beginners](https://youtu.be/SqcY0GlETPk?si=ScVwMzAF1zrw772I) +- [React for Everyone | สอน React ตั้งแต่เริ่มจนเขียนแอปได้ | Crash Course Series](https://youtu.be/mXjxKhWNHNo?si=dwItFFXvYbUbtoj1) + +## What is React? + +React คืออะไร ? ทำไมถึงเป็น Library ที่ทุกคนพูดถึงในทุกวันนี้ได้ ? หาคำตอบได้จากคลิปเหล่านี้ + +- [React in 100 Seconds](https://youtu.be/Tn6-PIqc4UM?si=5iVyglNLst9cRAem) +- [The Story of React](https://youtu.be/Wm_xI7KntDs?si=QHI6w8qvpTxgkR4c) + +## Installation + +ก่อนจะติดตั้ง React ได้ เราจะต้องติดตั้ง Node.js กันก่อน - [วิธีติดตั้ง Node.js และ NPM ในทุก Platform](https://medium.com/@betichhh/%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B8%95%E0%B8%B4%E0%B8%94%E0%B8%95%E0%B8%B1%E0%B9%89%E0%B8%87-node-js-%E0%B9%81%E0%B8%A5%E0%B8%B0-npm-%E0%B9%83%E0%B8%99%E0%B8%97%E0%B8%B8%E0%B8%81-platform-windows-macos-linux-cb17de1b68e0) + +วิธีการติดตั้ง React - [Start a new React Project - React Docs](https://react.dev/learn/start-a-new-react-project) + +## Describing UI in React - Components + +React มีวิธีการจัดการกับพัฒนา User Interface (UI) ด้วยการแยกของแต่ละส่วนใน UI อออกมาเป็นชิ้นเล็ก ๆ (เช่น buttons, cards) โดยแต่ละชิ้นเล็ก ๆ นั้นเราจะเรียกว่า Component + +[๋JSX (JavaScript Syntax Extension)]() เป็น Syntax Extension ของ React ที่ทำให้เรา จะทำให้เราสามารถผสม Logic ของ JavaScript ไปพร้อมกับการเขียน Markup ที่คล้ายกับ HTML ได้ + +- [Describing the UI - React Docs](https://react.dev/learn/describing-the-ui) + +### Declaring Components + +วิธีการสร้าง Component ใน React + +- [Your First Component - React Docs](https://react.dev/learn/your-first-component) +- [Importing and Exporting Components - React Docs](https://react.dev/learn/importing-and-exporting-components) + +### JSX + +Syntax เบื้องต้นของ JSX - เครื่องมือที่สามารถทำให้เราใช้ Logic เหมือน JavaScript ได้ในตัว UI ของเรา + +- [Writing Markup with JSX - React Docs](https://react.dev/learn/writing-markup-with-jsx) +- [JavaScript in JSX with Curly Braces - React Docs](https://react.dev/learn/javascript-in-jsx-with-curly-braces) + +### Props & Children + +วิธีการส่งข้อมูลของ Component + +- [Passing Props to a Component - React Docs](https://react.dev/learn/passing-props-to-a-component) + +### Conditional Rendering + +JSX ทำให้เราสามารถใส่ Logic ของ React ข้างในตัว UI ของเราได้ เราจึงสามารถใช้ logic เหล่านั้นเพื่อเลือกที่จะแสดงข้อมูลบางส่วนหรือไม่ได้ + +- [Conditional Rendering - React Docs](https://react.dev/learn/conditional-rendering) + +### Rendering Lists + +เราสามารถ​ Render ตัว List ข้อมูลจาก JavaScript มาเป็น UI ได้ ซึ่งเป็นหนึ่งเครื่องมือที่สำคัญที่สุดในการสร้าง UI ได้ React + +- [Rendering Lists - React Docs](https://react.dev/learn/rendering-lists) + +## Interactivity - การตอบสนองกับ User + +จุดเด่นของ React คือการที่ User Interface (UI) สามารถ render ใหม่ได้เรื่อย ๆ ตามค่าตัวแปรที่เปลี่ยนไป (เรียกได้ว่าตัว UI จะ 'React' ต่อการเปลี่ยนค่าของตัวแปร) ซึ่งเราสามารถ declare และแก้ตัวแปรเหล่าได้โดยการสร้าง 'state' ใน Component ของเรา + +โดย State จะทำให้ Component นั้นสามารถเก็บค่าตัวแปรได้ เหมือนเป็นความทรงจำของ Component นั้น ๆ และสามารถส่งต่อค่าเหล่านั้นเป็น Props ได้ ซึ่งคอนเซปต์ของการสร้าง State จะเป็นรากฐานของการสร้าง Web Application ใน React ที่สามารถตอบสนองกับ User Input ได้ + +- [Adding Interactivity - React Docs](https://react.dev/learn/adding-interactivity) +- [Managing State - React Docs](https://react.dev/learn/managing-state) + +### Responding to Events + +เราสามารถเขียน Logic ด้วย JavaScript เพื่อรองรับ Event ที่เกิดขั้นใน UI ได้ ซึ่งใน React จะมีวิธีการส่ง Event Handlers ที่แตกต่างจากการใช้ Vanilla JavaScript นิดหน่อย + +- [Responding to Events - React Docs](https://react.dev/learn/responding-to-events) + +### Declaring States - ควาทรงจำของ Component + +วิธีการประกาศ State - ควาทรงจำของ Component + +- [State: A Component's Memory - React Docs](https://react.dev/learn/state-a-components-memory) + +### UI Rendering in React + +เมื่อมีการ Update State แล้ว React จะมีการ Re-render ยังไงบ้าง ? ทำไมบางทีเราลอง `setState` หลายรอบแล้ว State ไม่อัปเดตตามล่ะ ? หาคำตอบได้ที่นี่ + +- [Render and Commit - React Docs](https://react.dev/learn/render-and-commit) +- [State as a Snapshot - React Docs](https://react.dev/learn/state-as-a-snapshot) +- [Queueing a Series of State Updates - React Docs](https://react.dev/learn/queueing-a-series-of-state-updates) + +### Updating State + +States ใน React สามารถเป็น Object และ Array ได้ ซึ่งเราจะได้ใช้ State ที่เป็น Type เหล่านี้ใน UI ของเราบ่อยครั้ง มาเรียนรู้วิธีการอัปเดต State ประเภทเหล่านี้กัน (ระวังเรื่อง mutation นะ !) + +- [Updating Objects in State - React Docs](https://react.dev/learn/updating-objects-in-state) +- [Updating Arrays in State - React Docs](https://react.dev/learn/updating-arrays-in-state) + +### Keeping Components Pure + +คอนเซปต์สำคัญที่สุดของการสร้าง UI ใน React คือการที่ทุก Component เป้น pure function​ ซึ่งแปลว่าทุก function จะไม่มีการแก้ค่าของตัวแปรนอก scope ของตัวเอง โดยการแก้ตัวแปรที่ประกาศด้วย `let` ใน scope ข้างนอก Component ใน React เป็นสิ่งที่ไม่ควรทำ เนื่องจากจะทำให้เกิด mutation ซึ่งจะทำให้เกิด side effect ที่ตามหาที่มาของ Bug ได้ยาก + +- [Keeping Components Pure - React Docs](https://react.dev/learn/keeping-components-pure) + +## Syncing with External Systems and Data + +อีกหนึ่งคอนเซปต์ที่สำคัญของ React คือการดึงและ Synchronize ข้อมูลจากนอกระบบนอก React (เช่น การดักฟัง Input จาก Browser, หรือการดึงข้อมูลด้วยการ Fetch) โดย React จะมีวิธีการจัดการกับข้อมูลเหล่านี้หลัก ๆ คือด้วยการใช้ Effect, Ref หรือการสร้าง Custom Hooks + +- [Escape Hatches - React Docs](https://react.dev/learn/escape-hatches) + +### Refs + +Ref เป็นการเก็บข้อมูลแบบหนึ่งของ React (คล้ายกับ State) ที่จะไม่ทำให้ Component Re-render เมื่อค่าเปลี่ยนไป โดย ref จะใช้บ่อยในการจัดการกับ API ที่เกี่ยวกับ Browser เช่น การดึงข้อมูลจาก Element + +- [Referencing Values with Refs - React Docs](https://react.dev/learn/referencing-values-with-refs) +- [Manipulating the DOM with Refs - React Docs](https://react.dev/learn/manipulating-the-dom-with-refs) +- [useRef - React Docs](https://react.dev/reference/react/useRef) + +### Effects + +React มี Hook ที่ชื่อว่า `useEffect` ที่สามารถทำให้เราจัดการกับ Side Effects ใน Component ของเราได้ + +"Side Effect" หมายถึงการเปลี่ยนแปลงหรือการกระทำใด ๆ ที่เกิดขึ้นใน Component นอก Scope ของ React เช่นการดึงข้อมูลจาก API, การเปลี่ยน DOM หรือการตั้ง Timer เป็นต้น (เพิ่มเติม : [What is a React Side-Effect?](https://medium.com/@remoteupskill/what-is-a-react-side-effect-a5525129d251#:~:text=A%20React%20side%2Deffect%20occurs,e.g.%20Web%20APIs%20like%20localStorage.)) + +- [Synchronizing with Effects - React Docs](https://react.dev/learn/synchronizing-with-effects) +- [You Might Not Need an Effect - React Docs](https://react.dev/learn/you-might-not-need-an-effect) +- [Lifecycle of Reactive Effects - React Docs](https://react.dev/learn/lifecycle-of-reactive-effects) +- [Separating Events from Effects - React Docs](https://react.dev/learn/separating-events-from-effects) +- [Removing Effect Dependencies - React Docs](https://react.dev/learn/removing-effect-dependencies) +- [Reusing Logic with Custom Hooks - React Docs](https://react.dev/learn/reusing-logic-with-custom-hooks) +- [useEffect - React Docs](https://react.dev/reference/react/useEffect) +- [useRef - React Docs](https://react.dev/reference/react/useRef) + +## Further Reading + +สุดท้ายนี้่ การจะเขียน React หากใครอยากเขียน React ให้คล่อง แนะนำให้ลองสร้าง Project แล้วลองเขียนดูเลย โดยจะต้องอาศัยความเข้าใจใน JavaScript (และ HTML) ประมาณหนึ่ง หากใครยังไม่แม่นคอนเซปต์สามารถกลับไปอ่านอีกรอบได้ที่ [Roadmap พื้นฐานของ Frontend Developer - Thinc.](https://knowledge.thinc.in.th/roadmap/backend-beginner/) + +ทั้งนี้ ข้อดีของ React หนึ่งคือการมี Ecosystem ของเครื่องมือที่ผู้พัฒนาสามารถนำไปใช้ได้อย่างกว้างขวาง หัวข้อดังกล่าวจะพาทุกคนไปรู้จักกับ Library ที่จะทำให้การเขียน React ของเราง่ายยิ่งขึ้น + +### Build Tools + +- [ViteJS](https://vitejs.dev/) +- [Turbo](https://turbo.build/) + +### Router (For Client Side Rendering - CSR) + +- [React Router](https://reactrouter.com/en/main) + +### State Management + +- [Nanostores](https://github.com/nanostores/nanostores) +- [Jotai](https://jotai.org/) +- [Redux](https://redux.js.org/) + +### Styling + +- [TailwindCSS](https://tailwindcss.com/) +- [Bootstrap]() +- [Styled Components](https://styled-components.com/) +- [Stitches](https://stitches.dev/) + +### Web Frameworks (Server Side Rendering, Static Site Generation) + +- [Next.js (SSR, SSG)](https://nextjs.org/) +- [Astro (Compatible with React)](https://astro.build/) +- [Gatsby (SSG)](https://www.gatsbyjs.com/) + +### UI Libraries + +- [ShadCN](https://ui.shadcn.com/) +- [Radix UI](https://www.radix-ui.com/) +- [MUI](https://mui.com/) + +### Testing + +### `useMemo` and `useCallback` + +- [useMemo - React Docs](https://react.dev/reference/react/useMemo) +- [useCallback - React Docs](https://react.dev/reference/react/useCallback) +- [Understanding when to use useMemo](https://maxrozen.com/understanding-when-use-usememo) +- [When to useMemo and useCallback](https://kentcdodds.com/blog/usememo-and-usecallback)