พัฒนาเว็บด้วย 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 คือ JavaScript Library ที่ถูกพัฒนาขึ้นโดย Facebook เพื่อใช้ในการสร้าง User Interface (UI) หรือส่วนติดต่อผู้ใช้สำหรับเว็บแอปพลิเคชัน React ช่วยให้เราสามารถสร้าง UI ที่ซับซ้อนได้อย่างง่ายดายและมีประสิทธิภาพ React ได้รับความนิยมอย่างแพร่หลายในวงการ Frontend Development เนื่องจากมีข้อดีหลายประการ เช่น การจัดการ UI ที่ง่ายขึ้น การนำกลับมาใช้ใหม่ได้ของ Component และประสิทธิภาพในการทำงานที่ดี

Javascript Library

React เป็น JavaScript Library ซึ่งหมายความว่าเป็นชุดของโค้ดที่ถูกเขียนขึ้นมาเพื่อช่วยให้เราทำงานบางอย่างได้ง่ายขึ้น ในกรณีของ React คือการสร้าง UI

UI (User Interface)

UI หรือ User Interface คือส่วนที่เราใช้โต้ตอบกับแอปพลิเคชัน เช่น หน้าจอ ปุ่ม เมนู และอื่นๆ React ช่วยให้เราสร้าง UI ที่สวยงาม ใช้งานง่าย และตอบสนองได้ดี

พัฒนาโดย Facebook

React ถูกพัฒนาขึ้นโดย Facebook และได้รับการสนับสนุนจากชุมชนนักพัฒนาทั่วโลกอย่างต่อเนื่อง ทำให้ React มีการพัฒนาและปรับปรุงอยู่เสมอ

Frontend Development

React ถูกนำมาใช้ในการพัฒนา Frontend หรือส่วนที่ผู้ใช้มองเห็นและโต้ตอบด้วยของเว็บแอปพลิเคชัน

Framework vs Library

หลายคนอาจจะสงสัยว่า React แตกต่างจาก Framework อย่างไร ในส่วนนี้เราจะมาทำความเข้าใจถึงความแตกต่างระหว่าง Framework และ Library กันครับ

Framework: Angular, Vue

ตัวอย่างของ Framework ที่ได้รับความนิยม ได้แก่ Angular และ Vue

Library: React, JQuery

ตัวอย่างของ Library ที่ได้รับความนิยม ได้แก่ React และ JQuery

Framework

Framework มีเครื่องมือและรูปแบบการทำงานที่ชัดเจน ช่วยให้เราทำงานเป็นทีมได้ง่ายขึ้น เนื่องจากมีมาตรฐานการเขียนโค้ดที่แน่นอน

Library

Library มีความยืดหยุ่นสูงกว่า เราสามารถเลือกใช้เครื่องมือต่างๆ ที่เราต้องการได้เอง

แนวคิดของ React

React มีแนวคิดหลักที่สำคัญคือ Component-Based ซึ่งจะช่วยให้เราสามารถจัดการ UI ได้ง่ายขึ้น

Component-Based

React ใช้หลักการ Component-Based ซึ่งหมายความว่า UI ของเราจะถูกแบ่งออกเป็นส่วนย่อยๆ ที่เรียกว่า Component

แบ่ง UI เป็นส่วนย่อยๆ

Component แต่ละตัวจะทำหน้าที่แสดงผลส่วนใดส่วนหนึ่งของ UI เช่น ปุ่ม เมนู หรือฟอร์ม

จัดการง่าย

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

JSX (JavaScript XML)

React ใช้ JSX ในการเขียน UI JSX เป็น Syntax extension ของ JavaScript ที่ช่วยให้เราเขียน UI ได้ง่ายขึ้นคล้ายกับ HTML

Component

Component คือบล็อกพื้นฐานในการสร้าง UI ใน React

State

State คือข้อมูลที่ Component ใช้ในการแสดงผล UI State สามารถเปลี่ยนแปลงได้และเมื่อ State เปลี่ยนแปลง UI จะถูกอัปเดตโดยอัตโนมัติ

Props

Props คือข้อมูลที่ถูกส่งผ่านไปยัง Component จาก Component อื่น Props เปรียบเสมือน Arguments ที่เราส่งให้กับฟังก์ชัน

การสร้าง Component

การสร้าง Component เป็นหัวใจสำคัญในการพัฒนาเว็บด้วย React เราจะมาดูวิธีการสร้าง Component และทำความเข้าใจเกี่ยวกับ JSX, State และ Props

JSX

JSX เป็น Syntax extension ของ JavaScript ที่ช่วยให้เราเขียน UI ได้ง่ายขึ้นคล้ายกับ HTML

คล้าย HTML

JSX มีลักษณะคล้ายกับ HTML ทำให้เราคุ้นเคยกับการเขียน UI ได้ง่าย

Component

Component คือบล็อกพื้นฐานในการสร้าง UI ใน React เราสามารถสร้าง Component ได้หลายแบบ เช่น Functional Component และ Class Component

State

State คือข้อมูลที่ Component ใช้ในการแสดงผล UI State สามารถเปลี่ยนแปลงได้และเมื่อ State เปลี่ยนแปลง UI จะถูกอัปเดตโดยอัตโนมัติ

Props

Props คือข้อมูลที่ถูกส่งผ่านไปยัง Component จาก Component อื่น Props เปรียบเสมือน Arguments ที่เราส่งให้กับฟังก์ชัน

การเตรียมเครื่องมือ

ก่อนที่เราจะเริ่มต้นพัฒนาเว็บด้วย React เราจำเป็นต้องเตรียมเครื่องมือต่างๆ ให้พร้อม

Node.js

Node.js เป็น Runtime environment ที่ใช้ในการรัน JavaScript บน Server-side เราจำเป็นต้องติดตั้ง Node.js เพื่อใช้ในการติดตั้งและจัดการ Package ต่างๆ ที่จำเป็นสำหรับ React

VS Code

VS Code เป็น Text editor ที่ได้รับความนิยมอย่างมากในหมู่ Developer VS Code มี Extension ที่ช่วยให้เราเขียนโค้ด React ได้ง่ายขึ้น เช่น React snippets และ ESLint

React Developer Tools

React Developer Tools เป็น Extension สำหรับ Browser ที่ช่วยให้เราสามารถ Debug และตรวจสอบ Component ใน React ได้ง่ายขึ้น

ทบทวน Javascript ES6

ก่อนที่เราจะเริ่มต้นพัฒนาเว็บด้วย React เราจำเป็นต้องทบทวนพื้นฐาน JavaScript ES6 ที่จำเป็นสำหรับการใช้งาน React

Let, Const

Let และ Const ใช้ในการประกาศตัวแปร Let ใช้สำหรับตัวแปรที่สามารถเปลี่ยนแปลงค่าได้ ส่วน Const ใช้สำหรับตัวแปรที่ไม่สามารถเปลี่ยนแปลงค่าได้

Block Scope

Block Scope คือขอบเขตการมองเห็นของตัวแปรที่ถูกประกาศภายใน Block เช่น ภายใน If statement หรือ Loop

Arrow Function

Arrow Function เป็นรูปแบบการเขียนฟังก์ชันแบบใหม่ที่กระชับและอ่านง่ายขึ้น

Object

Object คือโครงสร้างข้อมูลที่ใช้ในการเก็บข้อมูลแบบ Key-Value pair

String Template

String Template ช่วยให้เราสามารถสร้าง String ที่ซับซ้อนได้ง่ายขึ้น โดยใช้ Backtick (`) และ Interpolation

Block Scope

Block Scope คือขอบเขตการมองเห็นของตัวแปรที่ถูกประกาศภายใน Block

Var

Var เป็น Keyword ที่ใช้ในการประกาศตัวแปรใน JavaScript รุ่นเก่า ตัวแปรที่ประกาศด้วย Var จะมี Function scope หรือ Global scope

Let

Let ใช้ในการประกาศตัวแปรที่มี Block scope ตัวแปรที่ประกาศด้วย Let จะสามารถเข้าถึงได้เฉพาะภายใน Block ที่ถูกประกาศเท่านั้น

Const

Const ใช้ในการประกาศตัวแปรที่มี Block scope และไม่สามารถเปลี่ยนแปลงค่าได้

Arrow Function

Arrow Function เป็นรูปแบบการเขียนฟังก์ชันแบบใหม่ที่กระชับและอ่านง่ายขึ้น

รูปแบบการเขียนฟังก์ชัน

Arrow Function มีรูปแบบการเขียนที่แตกต่างจาก Function ทั่วไป

กระชับขึ้น

Arrow Function ช่วยให้เราเขียนฟังก์ชันได้กระชับและอ่านง่ายขึ้น

เครื่องหมายลูกศร

Arrow Function ใช้เครื่องหมายลูกศร (=>) ในการกำหนดฟังก์ชัน

Object

Object คือโครงสร้างข้อมูลที่ใช้ในการเก็บข้อมูลแบบ Key-Value pair

การสร้าง Object

เราสามารถสร้าง Object ได้โดยใช้ Curly braces ({})

Properties

Properties คือข้อมูลที่ถูกเก็บไว้ใน Object แต่ละ Property จะมี Key และ Value

การเข้าถึง Properties

เราสามารถเข้าถึง Properties ได้โดยใช้ Dot notation (.) หรือ Bracket notation ([])

String Template

String Template ช่วยให้เราสามารถสร้าง String ที่ซับซ้อนได้ง่ายขึ้น

Multi-line

String Template ช่วยให้เราสามารถสร้าง String ที่มีหลายบรรทัดได้ง่ายขึ้น

Interpolation

Interpolation ช่วยให้เราสามารถใส่ตัวแปรหรือ Expression ลงใน String ได้

Backtick (`)

String Template ใช้ Backtick (`) ในการสร้าง String

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

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

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