มาเรียน 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 ออกเป็นส่วนประกอบเล็ก ๆ ที่เรียกว่า Component และนำ Component เหล่านี้มาประกอบกันเป็น UI ที่สมบูรณ์

React กับ Vue แตกต่างกันอย่างไร

React และ Vue เป็น JavaScript framework ที่ได้รับความนิยมทั้งคู่ แม้ว่าทั้งคู่จะมีเป้าหมายเดียวกันคือการสร้าง UI แต่ก็มีความแตกต่างกันในหลายด้าน React ใช้แนวคิด JSX (JavaScript XML) ในการเขียน HTML ใน JavaScript ในขณะที่ Vue ใช้ Single File Component ที่รวม HTML, CSS และ JavaScript ไว้ในไฟล์เดียว React มี community ที่ใหญ่กว่าและมี library ให้เลือกใช้มากมาย Vue มี learning curve ที่ง่ายกว่าและมี documentation ที่เข้าใจง่าย

โครงสร้างพื้นฐานของ React

โครงสร้างพื้นฐานของ React ประกอบด้วย Component, JSX, Props, State และ Event Handling Component คือส่วนประกอบหลักในการสร้าง UI JSX คือ syntax extension ของ JavaScript ที่ช่วยให้เราเขียน HTML ใน JavaScript ได้ Props คือข้อมูลที่ส่งผ่านระหว่าง Component State คือข้อมูลภายใน Component ที่สามารถเปลี่ยนแปลงได้ Event Handling คือการจัดการกับเหตุการณ์ที่เกิดขึ้นบน UI เช่น การคลิกปุ่ม

การสร้าง Component

Component คือบล็อกพื้นฐานในการสร้าง UI ใน React Component สามารถเป็นได้ทั้ง Function Component และ Class Component Function Component คือฟังก์ชันที่ return HTML Class Component คือ class ที่ extends React.Component การสร้าง Component ช่วยให้เราสามารถนำ code กลับมาใช้ใหม่ได้ง่ายขึ้นและทำให้ code ของเราเป็นระเบียบมากขึ้น

JSX คืออะไร

JSX คือ Extension ของ Javascript ที่ทำให้เขียน HTML ใน Javascript ได้ JSX ช่วยให้เราสามารถเขียน HTML ได้โดยตรงใน JavaScript code ทำให้ code ของเราอ่านง่ายขึ้นและเข้าใจง่ายขึ้น JSX จะถูก compile เป็น JavaScript code โดย Babel ก่อนที่จะถูกนำไปใช้งานใน browser

การส่ง Property (Props)

การส่ง Property (Props) คือการส่งค่าผ่าน attribute ของ Tag Props ช่วยให้เราสามารถส่งข้อมูลจาก parent component ไปยัง child component ได้ Props เป็น immutable หมายความว่าค่าของ props ไม่สามารถเปลี่ยนแปลงได้ภายใน child component

การทำสไตล์ (CSS) ใน React

การทำสไตล์ (CSS) ใน React มี 2 วิธีหลัก ๆ คือ Import CSS และ CSS Module Import CSS คือการ import ไฟล์ CSS เข้าไปใน Component โดยตรง CSS Module คือการใช้ CSS class ที่มี scope จำกัดเฉพาะ Component นั้น ๆ CSS Module ช่วยป้องกันไม่ให้ CSS class ชนกันระหว่าง Component

การจัดการ Condition

การจัดการ Condition ใน React ทำได้หลายวิธี เช่น การใช้ Javascript (if/else) หรือ inline ใน JSX การใช้ if/else เหมาะสำหรับเงื่อนไขที่ไม่ซับซ้อน การใช้ ternary operator (?:) เหมาะสำหรับเงื่อนไขที่สั้นและกระชับ

การวน Loop

การวน Loop ใน React ส่วนใหญ่ใช้ .map() .map() ช่วยให้เราสามารถวน loop ผ่าน array และ return element ใหม่ได้ .map() เหมาะสำหรับสร้าง list ของ element จาก array ของข้อมูล

React คือ Library สำหรับทำอะไร

React เป็น Library สำหรับพัฒนาเว็บแอปพลิเคชัน Front-End React ช่วยให้เราสร้าง UI ที่มีความซับซ้อนได้อย่างง่ายดายและมีประสิทธิภาพ React เหมาะสำหรับสร้าง Single Page Application (SPA) และ Progressive Web App (PWA)

Use Case ของ React

React ถูกนำไปใช้ในหลากหลาย Use Case เช่น การสร้างเว็บแอปพลิเคชัน, การสร้าง Mobile App (โดยใช้ React Native), การสร้าง UI library และการสร้าง Interactive UI React เหมาะสำหรับโปรเจกต์ที่มีขนาดใหญ่และต้องการประสิทธิภาพสูง

React Hook

React Hook เป็นฟังก์ชันที่ช่วยให้เราสามารถใช้ state และ features อื่น ๆ ของ React ใน Function Component ได้ Hook ทำให้เราสามารถเขียน code ที่อ่านง่ายขึ้นและนำ code กลับมาใช้ใหม่ได้ง่ายขึ้น Hook ที่สำคัญ ได้แก่ useState, useEffect และ useContext

React Router

React Router เป็น library ที่ช่วยให้เราสามารถจัดการ routing ใน React ได้ React Router ช่วยให้เราสามารถสร้าง multi-page application (MPA) ใน React ได้ React Router มี features ที่หลากหลาย เช่น การจัดการ route, การ redirect และการส่ง parameter

การ Export Component

การ Export Component คือการทำให้ Component สามารถนำไปใช้ในไฟล์อื่นได้ การ Export Component ทำได้โดยใช้ keyword export หรือ export default export เหมาะสำหรับ export หลาย Component ในไฟล์เดียว export default เหมาะสำหรับ export Component หลักในไฟล์

การ Import Component

การ Import Component คือการนำ Component ที่ export มาจากไฟล์อื่นมาใช้งานในไฟล์ปัจจุบัน การ Import Component ทำได้โดยใช้ keyword import

การใช้ className

การใช้ className ใน React ใช้สำหรับกำหนด class ให้กับ HTML element className ทำงานเหมือนกับ attribute class ใน HTML ทั่วไป className ช่วยให้เราสามารถกำหนด style ให้กับ element ได้โดยใช้ CSS

CSS Module

CSS Module เป็นวิธีในการทำสไตล์ใน React ที่ช่วยให้ CSS class มี scope จำกัดเฉพาะ Component นั้น ๆ CSS Module ช่วยป้องกันไม่ให้ CSS class ชนกันระหว่าง Component CSS Module ทำให้ code ของเราเป็นระเบียบและง่ายต่อการจัดการ

การใช้ Prop Types

การใช้ Prop Types เป็นวิธีในการตรวจสอบชนิดของ props ที่ Component ได้รับ Prop Types ช่วยให้เราสามารถตรวจสอบได้ว่า props ที่ส่งมาถูกต้องหรือไม่ Prop Types ช่วยป้องกันข้อผิดพลาดที่อาจเกิดขึ้นจากการส่ง props ที่ไม่ถูกต้อง

การใช้ if/else

การใช้ if/else ใน React ใช้สำหรับจัดการ condition ใน JSX เราสามารถใช้ if/else เพื่อแสดงหรือซ่อน element ตามเงื่อนไขที่กำหนดได้ การใช้ if/else ช่วยให้เราสามารถสร้าง UI ที่มีความยืดหยุ่นและตอบสนองต่อการเปลี่ยนแปลงของข้อมูลได้

การใช้ .map()

การใช้ .map() ใน React ใช้สำหรับวน loop ผ่าน array และสร้าง list ของ element .map() เป็นวิธีที่นิยมใช้ในการแสดงข้อมูลจาก array ใน UI การใช้ .map() ช่วยให้เราสามารถสร้าง UI ที่ dynamic และ responsive ได้

เริ่มต้นกับ React

การติดตั้ง Vite

Vite เป็น build tool ที่รวดเร็วสำหรับการพัฒนา React Vite ช่วยให้เราสามารถสร้าง project React ได้อย่างรวดเร็วและง่ายดาย การติดตั้ง Vite ทำได้โดยใช้คำสั่ง npm create vite@latest

โครงสร้างโปรเจกต์ React

โครงสร้างโปรเจกต์ React โดยทั่วไปประกอบด้วยไฟล์และโฟลเดอร์ต่าง ๆ เช่น src, public, node_modules, package.json และ index.html โฟลเดอร์ src เป็นที่เก็บ code ของเรา โฟลเดอร์ public เป็นที่เก็บไฟล์ static เช่น รูปภาพ และ index.html เป็นไฟล์ HTML หลักของแอปพลิเคชัน

ไฟล์ main.jsx และ App.jsx

ไฟล์ main.jsx เป็นไฟล์ entry point ของแอปพลิเคชัน React ไฟล์นี้จะทำการ render Component หลัก (App.jsx) ไปยัง DOM ไฟล์ App.jsx เป็น Component หลักของแอปพลิเคชัน React ไฟล์นี้จะประกอบด้วย Component อื่น ๆ และจัดการ logic หลักของแอปพลิเคชัน

การสร้าง Component Function

การสร้าง Component Function คือการสร้าง Component โดยใช้ function Function Component จะ return HTML ที่จะถูกแสดงใน UI Function Component สามารถรับ props และใช้ hook ได้

การ Export และ Import Component

การ Export และ Import Component เป็นขั้นตอนที่สำคัญในการนำ Component มาใช้ในไฟล์อื่น ๆ การ Export Component ทำได้โดยใช้ keyword export หรือ export default การ Import Component ทำได้โดยใช้ keyword import

JSX และ Component

ทำความเข้าใจ JSX

JSX คือ syntax extension ของ JavaScript ที่ช่วยให้เราเขียน HTML ใน JavaScript ได้ JSX ทำให้ code ของเราอ่านง่ายขึ้นและเข้าใจง่ายขึ้น JSX จะถูก compile เป็น JavaScript code โดย Babel

การสร้าง Header และ Footer Component

การสร้าง Header และ Footer Component เป็นตัวอย่างของการสร้าง Component ที่นำกลับมาใช้ใหม่ได้ Header และ Footer Component จะแสดงส่วนหัวและส่วนท้ายของ UI ตามลำดับ

การใช้ Export Default และ Export

การใช้ Export Default และ Export เป็นวิธีในการ export Component Export Default เหมาะสำหรับ export Component หลักในไฟล์ Export เหมาะสำหรับ export หลาย Component ในไฟล์เดียว

การสร้าง Image Component

การสร้าง Image Component เป็นตัวอย่างของการสร้าง Component ที่รับ props และแสดงรูปภาพ Image Component จะรับ props ที่เป็น URL ของรูปภาพ

การส่ง Property (Props) ไปยัง Component

การส่ง Property (Props) ไปยัง Component เป็นการส่งข้อมูลจาก parent component ไปยัง child component Props เป็น immutable และสามารถใช้เพื่อปรับแต่งลักษณะของ child component ได้

การใช้ Prop Types สำหรับ Validation

การใช้ Prop Types สำหรับ Validation เป็นวิธีในการตรวจสอบชนิดของ props ที่ Component ได้รับ Prop Types ช่วยให้เราสามารถตรวจสอบได้ว่า props ที่ส่งมาถูกต้องหรือไม่ Prop Types ช่วยป้องกันข้อผิดพลาดที่อาจเกิดขึ้นจากการส่ง props ที่ไม่ถูกต้อง

การทำสไตล์ด้วย CSS

การทำสไตล์ด้วย CSS ใน React สามารถทำได้หลายวิธี เช่น การ import ไฟล์ CSS หรือการใช้ CSS Module การเลือกวิธีที่เหมาะสมขึ้นอยู่กับความต้องการของโปรเจกต์

การใช้ CSS Module

การใช้ CSS Module เป็นวิธีในการทำสไตล์ใน React ที่ช่วยให้ CSS class มี scope จำกัดเฉพาะ Component นั้น ๆ CSS Module ช่วยป้องกันไม่ให้ CSS class ชนกันระหว่าง Component

การจัดการ Condition และ Loop

การใช้ Condition (if/else) ใน JSX

การใช้ Condition (if/else) ใน JSX ช่วยให้เราสามารถแสดงหรือซ่อน element ตามเงื่อนไขที่กำหนดได้ เราสามารถใช้ if/else, ternary operator หรือ logical && operator เพื่อจัดการ condition

การใช้ Loop (.map()) ใน JSX

การใช้ Loop (.map()) ใน JSX ช่วยให้เราสามารถวน loop ผ่าน array และสร้าง list ของ element .map() เป็นวิธีที่นิยมใช้ในการแสดงข้อมูลจาก array ใน UI

การใช้ Key ในการวน Loop

การใช้ Key ในการวน Loop เป็นสิ่งสำคัญในการเพิ่มประสิทธิภาพของ React Key ช่วยให้ React สามารถติดตาม element ใน list ได้อย่างถูกต้อง Key ควรเป็น unique identifier สำหรับแต่ละ element ใน list

💬 ปรึกษาการเงินฟรีกับผู้เชี่ยวชาญ คลิกเพื่อแอดไลน์

👉 แอดไลน์เพื่อปรึกษาฟรี

หรือสแกน QR เพื่อแอด