React

P’ Oat

P’ Neng

Outline

• What is React
• JSX
• JSX attributes
• Export/Import
• Component

​

• Props
• Rendering
• Handling Events
• State
• Hooks

​

​

What is React ?

What is React

React คือ JavaScript Library ที่ใช้สําหรับสร้าง User Interface (UI) โดยลักษณะที่เห็นได้ชัดของ React คือ รูปแบบการเขียน code ที่มีความซับซ้อนแบ่งเป็นส่วนเล็ก ๆ ออกจากกันได้ ซึ่งแต่ละส่วนก็จะสามารถทำงานแยกกันได้อย่างอิสระ และสามารถนำไปใช้ซ้ำใน UI ส่วนอื่น ๆ ได้ หรือหน้าจอของแอปพลิเคชั่น ซึ่งถูกพัฒนาขึ้นโดย Facebook (META)

แนวคิด React

ข้อดีของ React

Easy to learn and understand

หนึ่งในข้อดีที่ดีที่สุดของการใช้ ตอบสนองการพัฒนา JS คือห้องสมุดที่เรียนรู้และเข้าใจได้ง่าย ไวยากรณ์ React JS นั้นเข้าใจง่ายกว่าเมื่อเปรียบเทียบกับเฟรมเวิร์กและไลบรารี JavaScript อื่นๆ หากคุณมีความเข้าใจในทักษะการเขียน HTML คุณไม่จำเป็นต้องกังวล เพียงแค่ตัดสินใจ คุณไม่จำเป็นต้องกังวลเกี่ยวกับภาวะแทรกซ้อนที่สำคัญ เช่น TypeScript JS ใน Angular

Virtual DOM

คุณสามารถใช้ DOM เสมือน ซึ่งเป็นที่รู้จักว่าสามารถจัดระเบียบเอกสารในรูปแบบ XML, HTML หรือ XHTML ได้ตามต้องการในแผนผัง เป็นรูปแบบที่ต้องการมากที่สุดโดยเว็บเบราว์เซอร์เมื่อแยกวิเคราะห์ส่วนประกอบต่างๆ ของเว็บแอปพลิเคชันใดๆ

Continuous evolvement

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

SEO Friendly

โดยปกติ เฟรมเวิร์กและไลบรารีจะมีปัญหาในการจัดการกับ การเพิ่มประสิทธิภาพกลไกค้นหา (SEO). แต่ในทางกลับกัน ReactJS สามารถเอาชนะปัญหานี้ได้ ซึ่งช่วยให้นักพัฒนาสามารถสืบค้นได้อย่างง่ายดายบนเสิร์ชเอ็นจิ้นต่างๆ

สร้าง React project

ในการสร้าง React project ขึ้นมาในการทำงาน เราจะต้องมี Node.js และ NPM ก่อน โดยการสร้าง React project เราจะใช้คำสั่งดังนี้

“npx create-react-app <ชื่อโฟลเดอร์ของ project>”

ใช้คำสั่งเพื่อเริ่ม Project

cd<ชื่อโปรเจค>

npm start

JSX

What is JSX

เป็นส่วนเสริมของ JavaScript ทำให้เราสามารถสร้าง element ด้วยการเขียน HTML tags ได้ และยังสามารถใช้ความสามารถของ JavaScript ในการดำเนินตรรกะต่าง ๆ ได้

JSX ที่เราเขียนจะถูกแปลงให้เป็น React.createElement ก่อนจะถูกนำไปใช้

​

ตัวอย่างเช่น

​

​

จะถูกแปลงเป็น

JSX attributes

JSX attributes

​

เราสามารถกำหนด JSX attribute ได้เหมือนกับการใช้ HTML attribute

​

Export / Import

Export / Import คือ

คือ statement ที่ใช้เพื่อแบ่งปัน components ระหว่างไฟล์ JavaScript

**เราเรียกไฟล์ JavaScript ที่มี export/import ว่า module

รูปแบบการใช้งานที่พบได้บ่อยจะมีอยู่ 2 แบบ คือ

1. Named export/import

2. Default export/import

1. Named export/import

• import ต้องใช้ชื่อเดียวกันกับตอน export
• import ต้องอยู่ภายใน { }

2. Default export/import

• export default ได้แค่ครั้งเดียวในแต่ละ module โดย import เป็นชื่ออะไรก็ได้

Component

Component คืออะไร ?

Component ทำให้เราสามารถแบ่งส่วน user interface ออกมาเป็นส่วนเล็ก ๆ ที่สามารถจัดการตัวมันเองได้ โดย component ใน React จะมีสองแบบ คือ

1.Class component

2.Function component

Class components

เป็นจุดเริ่มต้นของการเขียน react ซึ่งต่อมา มี react hook ทำให้ function components สามารถเขียนได้แบบ class components เช่นกัน

Function components

คือ component ที่เขียนด้วย function โดยจะต้อง return ค่าออกมาเป็น React element ที่จะให้ React นำไปแสดงผล

External Component

คือ การสร้าง Component ไว้เป็นไฟล์ด้านนอกที่มีนามสกุล .js จากนั้นก็นําเข้ามาทํางาน ในหน้าเว็บ

Props

Props คืออะไร ?

คือ ตัวแปรที่สามารถส่งเข้าไปใน Components ได้ ผ่านการกําหนด Attribute ส่งผลให้ Component แต่ละตัวสามารถรับ ค่าจากด้านนอกเข้าไปทํางานได

​

​

​

​

​

​

**function component จะรับ props เป็น argument 1 ตัว (นิยมใช้ชื่อ parameter เป็น props แต่สามารถใช้ชื่ออื่นได้)

props.children

component ที่เราสร้างสามารถมี tag เปิดและปิดได้เหมือน HTML โดยทุกอย่างที่อยู่ข้างในจะถูกส่งมาใน props.children (รวมไปถึง JavaScript expression)

Rendering

Rendering คืออะไร ?

คือ การนำ React element ที่เราสร้างไปแสดงผลในเบราว์เซอร์ด้วยการใช้ ReactDOM

​

• element คือ React element ที่เราจะนำไปแสดงผล
• rootElement คือ HTML element ที่เราเลือกซึ่งจะเป็นเหมือน container ที่ยอมให้ ReactDOM จัดการทุกอย่างที่อยู่ภายใน และใช้แสดงผล element

​

สิ่งที่แตกต่างระหว่าง React กับ pure HTML คือ React จะมี DOM ของตัวเองและจะมี

virtual DOM ในการ process components ที่แตกต่างภายในหน้าเว็บ React จะเป็นแปลงเฉพาะ components ที่เปลี่ยนไป จะไม่เปลี่ยนทั้งหน้า จะส่งผลให้เว็บไซด์ Render เร็วขึ้น

Re-rendering

• จะเกิดขึ้นเมื่อ React element ที่ถูก render ไปแล้วมี props หรือ state ที่เปลี่ยนไปจาก render ครั้งก่อน
• React element นั้น ๆ จะถูก render อีกรอบด้วยค่า props และ state ชุดใหม่

Handling Events

การรับมือกับ event ใน React

​

ต่างกับใน HTML ตรงที่

• ชื่อของ event attribute จะเป็นแบบ case-sensitive และอยู่ในรูปแบบของ camelCase เช่น onClick , onChange, onMouseOver

State

State คืออะไร ?

​

State คือ ตัวแปรที่เก็บข้อมูลภายใน Component คล้ายๆกับ Props แต่การใช้งาน Props นั้น ข้อมูลจะไม่สามารถเปลี่ยนแปลงค่าได้ แต่ State สามารถทําได้ ฉะนั้น ถ้าต้องการให้ข้อมูลภายในแอพสามารถเปลี่ยนแปลงค่าได้ ในระหว่างรันแอพก็จะใช้ State ซึ่งรูปแบบเดิมจะเขียนภายใน

Stateless vs Stateful

​

● Stateless คือ State ที่ไม่มีการเปลี่ยนแปลงค่า

● Stateful คือ State ที่มีการเปลี่ยนแปลงค่า

Hooks

Hooks คืออะไร ?

ไว้ให้เราเรียกใช้เพื่อเพิ่ม state หรือความสามารถอื่น ๆ ของ React ให้กับ function component โดย hook ที่เราพบเห็นได้บ่อยจะมี 2 ตัว คือ

1.useState

2.useEffect

useState

ใช้ประกาศตัวแปร state ให้กับ function component โดยใน 1 component จะประกาศกี่ครั้งก็ได้

*ค่าของตัวแปร state จะถูกเก็บไว้กับ React

ข้อกำหนดในการใช้งาน

• ต้องเรียกใช้ภายใน function component เท่านั้น
• ต้องเรียกใช้อยู่ด้านบนสุดของ function component
• ต้องมีลำดับการเรียกที่เหมือนเดิมทุก ๆ render (ไม่เรียกใช้ใน condition หรือ loop)

ค่าที่ useState รับได้

• [ไม่ใส่ก็ได้] ค่าเริ่มต้นของตัวแปร state (ถ้าไม่กำหนดจะมีค่าเริ่มต้นเป็น undefined)

ค่าที่ useState จะ return

array ที่มีสมาชิก 2 ตัว คือ

• ค่าปัจจุบันของตัวแปร state
• function ที่ใช้เปลี่ยนแปลงตัวแปร state

useState จะทำงานเมื่อ ?

• เมื่อ component render ครั้งแรก : useState จะประกาศตัวแปร state และ return เป็น array ที่มีสมาชิกเป็นค่าเริ่มต้นที่เราส่งไปพร้อมกับ function ที่ใช้เปลี่ยนแปลงตัวแปร state

render ครั้งต่อๆ ไป

ตัวอย่างการใช้งาน

​

จากตัวอย่าง เราประกาศตัวแปร state ชื่อ count มีค่าเริ่มต้นเป็น 0 และใช้ array destructuring เพื่อหยิบค่าออกมาจาก array ที่ useState return มาให้เรา

​

ตัวอย่างการใช้งาน

​

จากนั้นเรานำ count มาแสดงผล และมี button ที่เมื่อคลิกแล้ว จะเพิ่มค่า count ด้วย 1 ผ่านการเรียกใช้ setCount

​

**การเปลี่ยนแปลงค่าตัวแปร state จะทำให้ component เกิดการ re-render เพื่อนำ state ล่าสุดไปใช้

​

useEffect

ใช้ในการจัดการกับ side effect ของ function component เช่น การดึงข้อมูลมาแสดง การอัปเดต title ให้กับหน้าเว็บไซต์ เป็นต้น

​

​​ข้อกำหนดในการใช้งาน

​

• ต้องเรียกใช้ภายใน function component เท่านั้น
• ต้องเรียกใช้อยู่ด้านบนสุดของ function component
• ต้องมีลำดับการเรียกที่เหมือนเดิมทุก ๆ render (ไม่เรียกใช้ใน condition หรือ loop)

ค่าที่ useEffect รับได้

1. [ต้องใส่] effect (function ที่จะให้ทำงานหลัง render)

2. [ไม่ใส่ก็ได้] dependency array

​

effect จะทำงานหลังจาก render เสร็จแล้วเท่านั้น

useEffect จะทำงานเมื่อ ?

• เมื่อ component render ครั้งแรก : effect จะทำงาน 1 ครั้ง
• render ครั้งต่อ ๆ ไป : ขึ้นอยู่กับ dependency array

1.ถ้าเป็น array ที่มีสมาชิก : effect จะทำงานเมื่อมีค่าของสมาชิกตัวใดตัวหนึ่งเปลี่ยนไปจาก render ครั้งก่อน

2.ถ้าเป็น array เปล่า ๆ : effect จะไม่ทำงานอีกเลย

Workshop

Workshop #1

1. ให้ทำการสร้าง component header && component footer ของตัวเอง

2. สามารถใส่รูปลงไปในเว็บได้

3. ตกแต่งโดยใช้ css external and internal style เป็น

​

​

Workshop #2

1. optimize components โดยใช้ tailwind + Mui

2. ใช้ Flexbox & card components

Workshop #3

1. รู้จัก JSON map data จาก json ออกมาเป็น cards components

2. รู้จัก props and state

​

Workshop #4

1. สร้าง page ต่อไป และทำการ rout โดน react.router DOM

2. หน้า about , showcase , contact

3. prop & state components สู่อีก components

​

Workshop #5

1. handle form & onclick & onchange

2. ทำการ valid form กับ disable button

​