DEV Community: 21aki

การสร้าง UI ด้วย React (IV) - ใช้ปีกกาใน JSX

21aki — Wed, 28 Feb 2024 01:57:59 +0000

JSX ช่วยให้เราเขียนภาษาที่เหมือน HTML ในไฟล์ JavaScript โดยรวมการทำงานและเนื้อหาเอกสารไว้ด้วยกัน หากเราต้องการใส่ค่าที่มีการเปลี่ยนแปลงได้ในเนื้อหา เราสามารถใช่ ปีกกา เพื่อใช้แสดงข้อมูลได้ใน JSX ได้

ในซีรีย์นี้:

การสร้าง React Component
Import และ Export Component
เขียน JSX
ใช้ ปีกกา ใน JSX
ส่งค่าผ่าน Props
การแสดง Component แบบมีเงื่อนไข (Conditional Rendering)
การแสดงข้อมูลเป็น List
แยก Component (สร้าง Pure Component)
มอง UI ให้เป็นแผนภูมิต้นไม้ (Tree Structure)

ใช้ตัวแปรแทน string

เมื่อเราต้องการใส่ค่าที่เป็น string ใน attribute ของ JSX เราสามารถใช้ได้ทั้ง single (') หรือ double quote (")

export default function Avatar() {
  return (
    <img
      className="avatar"
      src="https://i.imgur.com/7vQD0fPs.jpg"
      alt="Gregorio Y. Zara"
    />
  );
}

จะเห็นว่า "https://i.imgur.com/7vQD0fPs.jpg" และ "Gregorio Y. Zara" เป็นค่า string ที่ถูกใส่ใน attribute

หากเราต้องการให้ค่าสามารถเปลี่ยนแปลงได้ เราสามารถกำหนดให้มันเป็นตัวแปร และเปลี่ยน " และ " เป็น { และ }

export default function Avatar() {
  const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
  const description = 'Gregorio Y. Zara';
  return (
    <img
      className="avatar"
      src={avatar}
      alt={description}
    />
  );
}

ใช้ปีกกา: เปิดใช้งาน JavaScript

ใน JSX เราสามารถเรียกใช้งาน JavaScript ได้ โดยการใส่คำสั่ง JavaScript ในปีกกา { }. เช่น หากเราต้องการใช้ตัวแปร name ใน <h1> สามารถทำได้ตามตัวอย่างดังนี้:

export default function TodoList() {
  const name = 'Gregorio Y. Zara';
  return (
    <h1>{name}'s To Do List</h1>
  );
}

ทั้งนี้สามารถใส่คำสั่ง JavaScript แบบอื่นๆ เช่นตัวอย่างคือฟังค์ชั่น formatDate() ก็ได้:

const today = new Date();

function formatDate(date) {
  return new Intl.DateTimeFormat(
    'en-US',
    { weekday: 'long' }
  ).format(date);
}

export default function TodoList() {
  return (
    <h1>To Do List for {formatDate(today)}</h1>
  );
}

ใช้ปีกกาตอนไหน

เราสามารถใช้ปีกกาใน JSX ได้ 2 วิธีได้แก่:

ใช้เป็นข้อความ โดยใส่เข้าไปในแท็กของ JSX โดยตรง:
- ✅ <h1>{name}'s To Do List</h1> ใช้งานได้
- ❌ <{tag}>Gregorio Y. Zara's To Do List</{tag}> ไม่ทำงาน
ใช้เป็น Attribute หลังเครื่องหมาย =:
- ✅ src={avatar} จะเป็นการแทนค่าตัวแปร avatar ใน src
- ❌ src="{avatar}" จะเป็นการใช้ string "{avatar}"

ใช้ปีกกาสองชั้น: สำหรับ CSS และ Object ใน JSX

หากเราต้องการส่ง Object เช่น { name: "Hedy Lamarr", inventions: 5 } เป็นค่าใน Attribute ของ JSX สามารถส่งเป็นค่าได้ดังนี้ person={{ name: "Hedy Lamarr", inventions: 5 }}

กรณีเดียวกับการใส่ CSS ใน JSX สามารถใส่ Object ของ CSS ใน attribute style ได้:

⚠️ ผิดกันง่ายๆ
property ของ css จะต้องเป็น camelCase. เช่นหาก HTML <ul style="background-color: black"> จะต้องเขียนเป็น <ul style={{ backgroundColor: 'black' }}>.

วิธีใช้ Object ในปีกกาแบบอื่นๆ

จากตัวอย่าง สังเกตุว่า Object person มี string name และ object theme:

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

ซึ่งเราสามารถนำค่าของ person ไปใช้ใน Component เช่นดังตัวอย่าง:

<div style={person.theme}>
  <h1>{person.name}'s Todos</h1>

สรุป

หากเราใช้ " ครอบข้อความใน attribute ของ JSX จะเป็นการส่งค่า string.
แต่ถ้าเราใช้ ปีกกา จะเป็นการแทนค่าของ JavaScript เพื่อกำหนดเงื่อนไข หรือ แสดงค่านั้นๆ แทนได้.
{{ และ }} ไม่ใช่คำสั่งพิเศษ: แต่เป็นการซ้อน Object ของ JavaScript เพื่อส่งค่าไปยังปีกกาของ JSX.

การสร้าง UI ด้วย React (III) - การเขียน JSX

21aki — Tue, 27 Feb 2024 08:48:06 +0000

JSX เป็นส่วนขยายของ JavaScript ที่ ทำให้เราเขียนภาษา Markup แบบเดียวกับ HTML ในไฟล์ JavaScript ได้

ในซีรีย์นี้:

การสร้าง React Component
Import และ Export Component
เขียน JSX
ใช้ ปีกกา ใน JSX
ส่งค่าผ่าน Props
การแสดง Component แบบมีเงื่อนไข (Conditional Rendering)
การแสดงข้อมูลเป็น List
แยก Component (สร้าง Pure Component)
มอง UI ให้เป็นแผนภูมิต้นไม้ (Tree Structure)

JSX: HTML เวอร์ชั่น JavaScript

ปกติหากเราพัฒนาเว็บ เราจะเขียน HTML, CSS และ JavaScript แยกไฟล์เป็นส่วนๆ:

แต่ใน React เราสามารถรวมทั้งหมด เพื่อ Render พร้อมๆ กันได้ใน Components:

เมื่อเป็นแบบนี้ เราสามารถแยกส่วนแต่ละ UI ให้โค้ดแยกกันได้ เช่น โค้ดทั้งหมดของปุ่ม จะถูกแยกจาก โค้ดทั้งหมดของ sidebar อย่างชัดเจน

ในแต่ละ React Component จะเป็นฟังค์ชั่น JavaScript ที่รวม JSX ซึ่งเป็น HTML เวอร์ชั่น JavaScript วิธีที่จะเข้าใจ JSX ง่ายที่สุดคือลองแปลง HTML ไปเป็น JSX

📝 ข้อสังเกตุ
JSX กับ React เป็นคนละอย่างกัน แต่มักถูกใช้ร่วมกัน, เราสามารถเลือกใช้อย่างใดอย่างหนึ่งได้. JSX เป็นส่วนขยายสำหรับการเขียนโปรแกรม, ส่วน React เป็น library ในภาษษ JavaScript.

แปลง HTML ไปเป็น JSX

จากตัวอย่าง ภาษา HTML:

<h1>Hedy Lamarr's Todos</h1>
<img 
  src="https://i.imgur.com/yXOvdOSs.jpg" 
  alt="Hedy Lamarr" 
  class="photo"
>
<ul>
    <li>Invent new traffic lights
    <li>Rehearse a movie scene
    <li>Improve the spectrum technology
</ul>

เราต้องการนำมาใส่ใน Component นี้:

export default function TodoList() {
  return (
    // ???
  )
}

หากเราก้อป แปะ ไปตรงๆ โค้ดจะใช้ไม่ได้

เพราะ JSX มีกฎเพิ่มเติมจาก HTML หากเราอ่านข้อความ error ด้านบน ก็จะบอกใบ้เราแล้วว่าจะต้องแก้ยังไง

📝 ข้อสังเกตุ
เมื่อเรารัน React แล้วเกิดข้อความ error บนหน้าจอ จะช่วยเราหาว่าปัญหาอยู่ตรงไหน หากติดก็ให้อ่านข้อความ error ดูดีๆ

กฎของ JSX

1. ต้อง return ออกมาเป็น Element เดียว

หากเราต้องการแสดง Element หลายๆ Element พร้อมๆ กัน ให้เราคลุมด้วย Tag สัก Tag เพื่อให้มันออกมาชั้นนอกสุดเพียง Element เดียว เช่นตัวอย่างนี้ใช้ <div> ครอบ

<div>
  <h1>Hedy Lamarr's Todos</h1>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    class="photo"
  >
  <ul>
    ...
  </ul>
</div>

หรือเราสามารถครอบด้วย <> และ </> แทน <div> ก็ได้:

<>
  <h1>Hedy Lamarr's Todos</h1>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    class="photo"
  >
  <ul>
    ...
  </ul>
</>

Tag ที่ว่างๆ นี้ (<> และ </>) เราจะเรียกว่า Fragments

2. ปิดทุก Tags

ใน JSX จะต้องมีการปิด Tag ทั้งหมด, หากเป็น Tag เดี่ยวๆ เช่น <img> ต้องเปลี่ยนเป็น <img /> และ Tag ที่มีการเปิดและปิดอย่าง <li>oranges จะต้องเขียนปิด Tag เป็น <li>oranges</li> เสมอ ดังตัวอย่าง:.

<>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    class="photo"
   />
  <ul>
    <li>Invent new traffic lights</li>
    <li>Rehearse a movie scene</li>
    <li>Improve the spectrum technology</li>
  </ul>
</>

3. ใช้ camelCase กับทั้งหมดเกือบทุกอย่าง

JSX จะถูกแปลงเป็น JavaScript และ attribute ของ Tag HTML จะถูกแปลงเป็น Key ของ object ใน JavaScript และใช้ attribute เหล่านั้นเป็นตัวแปร แต่ด้วยข้อจำกัดในการตั้งชื่อตัวแปรของ JavaScript เราจะไม่สามารถตั้งชื่อที่มีขีด หรือใช้คำสงวนอย่าง class ได้

ด้วยเหตุนี้ ทำให้ใน React, attribute ของ HTML และ SVG จะถูกเขียนเป็น camelCase เช่น stroke-width จะต้องเขียนเป็น strokeWidth และเนื่องจาก class เป็นคำสงวน ใน React จะถูกเปลี่ยนเป็น className แทนตามชื่อใน DOM:

<img 
  src="https://i.imgur.com/yXOvdOSs.jpg" 
  alt="Hedy Lamarr" 
  className="photo"
/>

Pro-tip: ใช้ตัวแปลง JSX

เราสามารถเอา HTML หรือ JSX ไปแปลงผ่านตัวแปลงได้

เมื่อแปลง HTML เป็น JSX แล้ว จะได้ผลลัพท์ดังนี้ :

สรุป

Components ใน React จะถูก render พร้อมกับเงื่อนไขต่างๆ กับ JSX.
JSX คล้ายคลึงกับ HTML, โดยมีข้อแตกต่างเล็กน้อย. โดยแปลงได้โดยใช้ตัวแปลงได้ .
หากพบปัญหา ให้ดูข้อความ Error จะช่วยแนะนำแนวทางแก้ไข JSX ให้ถูกต้องได้.

การสร้าง UI ด้วย React (II) - Import และ Export Component

21aki — Tue, 27 Feb 2024 06:04:23 +0000

Components ถูกสร้างมาเพื่อใช้ซ้ำ แต่เมื่อสร้างไปแล้ว โค้ดอาจจะยาวไปและจัดการยาก การแบ่งเป็นหลายๆ ไฟล์จะทำให้ง่ายต่อการจัดการและใช้ซ้ำได้ง่าย.

ในซีรีย์นี้:

การสร้าง React Component
Import และ Export Component
เขียน JSX
ใช้ ปีกกา ใน JSX
ส่งค่าผ่าน Props
การแสดง Component แบบมีเงื่อนไข (Conditional Rendering)
การแสดงข้อมูลเป็น List
แยก Component (สร้าง Pure Component)
มอง UI ให้เป็นแผนภูมิต้นไม้ (Tree Structure)

ไฟล์ Component หลัก

จาก การสร้าง React Component เราจะได้โค้ดแบบนี้

แต่โค้ดทั้งหมดจะอยู่ใน App.js ซึ่งเป็นไฟล์ Component หลักของโปรแกรม โดยชื่อไฟล์จะขึ้นอยู่กับวิธีการตั้งค่า และ Framework ที่ใช้

Exporting และ importing ตัว component

เพื่อให้ง่ายต่อการจัดการ เราสามารถแบ่ง ขั้นตอนการแยก Component Gallery และ Profile ออกจาก ไฟล์ Component หลักได้ ดังนี้:

สร้างไฟล์ JS ใหม่ เพื่อใส่ Components
Export ฟังค์ชั่นจากไฟล์ (สามารถใช้ได้ทั้ง export default หรือ ตาม ชื่อฟังค์ชั่น ก็ได้)
Import ในไฟล์ที่ต้องการใช้ Component (ตามฟังค์ชั่นที่ทำไว้)

ตัวอย่าง การ Gallery และ Profile ออกจาก App.js ไปยังไฟล์ใหม่ Gallery.js

จากตัวอย่างสามารถแจกแจงเป็น 2 ไฟล์ Component:

Gallery.js:
- การประกาศ Profile Component ที่ใช้เฉพาะในไฟล์เดียวกัน จึงไม่จำเป็นต้อง export
- Export Gallery Component เป็น default
App.js:
- Import Gallery ที่เป็น default
- Export App ที่เป็น Component หลักของโปรแกรม ให้เป็น default.

📝 ข้อสังเกตุ
สังเกตุว่าเราสามารถละ .js ออกจากชื่อไฟล์ได้:
import Gallery from './Gallery';
ใน React สามาถใช้งานได้ทั้ง './Gallery.js' หรือ './Gallery'.

การ Export และ Import หลายๆ Component จาก ไฟล์เดียวกัน

หากเราต้องการใช้ เฉพาะ Profile แทน Gallery เราสามารถทำได้ 2 แบบ คือ สร้างไฟล์ใหม่แล้ว export แบบ default ให้ Profile หรือ เราสามารถใส่ export หน้าชื่อฟังค์ชั่น (Name) เพื่อมาใช้ต่อได้เลย

แต่ default export สามารถใช้ได้ 1 ครั้งต่อ 1 ไฟล์ เท่านั้น

📝 ข้อสังเกตุ
เพื่อลดความสับสันที่อาจจะเกิดขึ้น บางทีมพัฒนาเลือกที่จะใช้การ export default หรือ export ชื่อฟังค์ชั่น แบบใดแบบ เพียงหนึ่งแบบเดียว

ขั้นตอนการ export แบบชื่อฟังค์ชั่น (Name):

เริ่มจาก export Profile จาก Gallery.js โดยการใส่ export หน้าชื่อฟังค์ชั่น (ไม่ใช้ default):

export function Profile() {
  // ...
}

จากนั้น, import Profile จาก Gallery.js ใน App.js โดย import ด้วยชื่อฟังค์ชั่น (ใช้ ปีกกาครอบ):

import { Profile } from './Gallery.js';

สุดท้าย, สั่ง render <Profile /> ใน App:

export default function App() {
  return <Profile />;
}

โดยจะออกมาหน้าตาแบบนี้:

ตอนนี้ เราจะเข้าใจการใช้ exports แบบ default และ ชื่อฟังค์ชั่น (name) ทั้งสองแบบแล้ว:

Gallery.js:
- Profile เป็นการ Exports Component แบบ ชื่อฟังค์ชั่น (name) Profile.
- Gallery เป็นการ Exports Component แบบ default.
App.js:
- Profile เป็นการ Imports Component แบบ ชื่อฟังค์ชั่น Profile จาก Gallery.js.
- Gallery เป็นการ Imports Component แบบ default จาก Gallery.js.
- App เป็นการ Exports Component หลักของโปรแกรม แบบ default

สรุป

ไฟล์ component หลักของโปรแกรมคืออะไร
import และ export ตัว componentได้ยังไง
เราควรใช้ default และ imports และ exports แบบไหน เมื่อไหร่
วิธี export components หลายตัวพร้อมกันจากไฟล์เดียวกัน

การสร้าง UI ด้วย React (I) - การสร้าง React Component

21aki — Mon, 26 Feb 2024 15:01:32 +0000

เนืองจากมีหลายคนที่มาให้สอน React แต่เนื่องด้วยสอนแล้วมันไม่มีที่ที่จะเก็บเป็นหลักแหล่ง เลยจะมาเขียนเป็นโพสซีรี่ย์ตอนยาว โดยอ้างอิงจาก react.dev ในส่วนของ Learn React แม้เอกสารจะอธิบายอย่างละเอียดแล้ว แต่เป็นภาษาอังกฤษ จึงขอแปลภาษาไทย ในภาษาของเราเอง และย่อเนื้อหาไม่ให้ยืดมาก

การสร้าง UI ด้วย React

React เป็น Library สำหรับการสร้าง UI เพื่อนำส่วนต่างๆ ไปใช้ซ้ำ ในบทนี้เราจะเรียนรู้วิธีสร้าง, ปรับแต่ง และ การแสดง UI แบบมีเงื่อนไข ของ React Component

ในซีรีย์นี้:

การสร้าง React Component
Import และ Export Component
เขียน JSX
ใช้ ปีกกา ใน JSX
ส่งค่าผ่าน Props
การแสดง Component แบบมีเงื่อนไข (Conditional Rendering)
การแสดงข้อมูลเป็น List
แยก Component (สร้าง Pure Component)
มอง UI ให้เป็นแผนภูมิต้นไม้ (Tree Structure)

การสร้าง React Component

การเขียน React เป็นการสร้าง UI ส่วนย่อยๆ เรียกว่า Components, เขียนเป็นฟังก์ชั่น JavaScript ที่สามารถใช้ HTML ได้

Components: คือการประกอบร่าง UI

ใน HTML เราสามารถสร้างหน้าตาเว็บด้วยแท็กต่างๆ เช่น <h1> และ <li>:

<article>
  <h1>My First Component</h1>
  <ol>
    <li>Components: UI Building Blocks</li>
    <li>Defining a Component</li>
    <li>Using a Component</li>
  </ol>
</article>

React จะช่วยในการรวม HTML, CSS และ JavaScript เป็น Component และนำไปใช้ซ้ำได้

การใช้ Component ของ React เหมือนการใช้แท็กของ HTML เช่นเมื่อรวมโค้ด HTML ด้านบนเป็น Component ชื่อว่า <TableOfContents /> สามารถนำ Component นี้ไปใช้ซ้ำที่ไหนได้ ดังตัวอย่าง:

<PageLayout>
  <NavigationHeader>
    <SearchBar />
    <Link to="/docs">Docs</Link>
  </NavigationHeader>
  <Sidebar />
  <PageContent>
    <TableOfContents />
    <DocumentationText />
  </PageContent>
</PageLayout>

การประกาศ Component

ปกติการสร้างเว็บ เราจะเขียน HTML ก่อนแล้วใส่ JavaScript ไปกำกับ แต่ React จะเปลี่ยนเป็น เขียนฟังค์ชั่น JavaScript เพื่อแสดง HTML แทน (ดังตัวอย่างข้างล่าง):

Step 1: Export ตัว Component

ใช้คำสั่ง JavaScript export default ในการประกาศฟังค์ชั่นหลักของไฟล์ เพื่อใช้ในการนำฟังค์ชั่นไปใช้ในไฟล์อื่นในภายหลัง

Step 2: ตั้งชื่อฟังค์ชั่น

ใช้ function Profile() { } เพื่อสร้างฟังค์ชั่น JavaScript ชื่อ Profile

⚠️ ผิดกันง่ายๆ
Component ของ React ก็คือฟังค์ชั่น JavaScript แต่จะต้องตั้งชื่อ ด้วยตัวพิมพ์ใหญ่นำหน้าเสมอ

Step 3: ใส่ HTML เวอร์ชั่น JavaScript

จากนั้นเราจะ return แท็ก <img />แต่จะต้องเป็นเวอร์ชั่นของ JavaScript ที่เรีกว่า JSX

ถ้าเราจะ return บรรทัดเดียว:

return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;

ถ้าจะ return หลายบรรทัด ให้ใส่วงเล็บครอบ:

return (
  <div>
    <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  </div>
);

⚠️ ผิดกันง่ายๆ
ถ้าไม่ครอบวงเล็บ โค้ดบรรทัดอื่นๆ หลัง return จะไม่ถูกใช้งาน

ใช้ Component

เมื่อเราสร้าง Component Profile แล้ว สามารถเอามันไปใช้ใน Component อื่นๆ ได้ เช่นเราจะสร้าง Component Gallery ทีใช้ Component Profile หลายอันข้างใน

สิ่งที่ Browser แสดง

เมื่อ Browser นำไปแสดง จะถูกแปลงเป็น HTML ปกติ:

<section>
  <h1>Amazing scientists</h1>
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
</section>

การซ้อน และ การจัดการ Components

Component เป็นฟังค์ชั่น JavaScript ธรรมดา ฉนั้น เราจะเขียน Component ไว้ในไฟล์เดียวกันได้ แต่ถ้าโค้ดของ Component เริ่มเยอะการแบ่ง 1 Component ต่อ 1 ไฟล์ จะทำให้จัดการง่ายกว่า

จากโค้ดที่ผ่านมา จะเห็นว่าเราใช้ Component Profile หลายๆ อันใน Component Gallery เราจะเรียกความสัมพันธ์แบบนี้ว่า Gallery เป็น Component แม่ (parent) และ Profile เป็น Component ลูก (child)

⚠️ ผิดกันง่ายๆ
Component สามารถ render อีก Component ได้ แต่ไม่ควรประกาศซ้อนไว้ในอีก Component:
export default function Gallery() {
  // 🔴 อย่าประกาศอีก Component ข้างใน Component แบบนี้!
  function Profile() {
    // ...
  }
  // ...
}
แบบนี้ Bug จะเยอะและทำให้ช้า ทางที่ดีความประกาศแยกในชั้นบนสุด
export default function Gallery() {
  // ...
}

// ✅ ประกาศ Component ในชั้นบนสุด
function Profile() {
  // ...
}
หาก Component ลูกต้องการข้อมูลจากแม่ ให้ส่งผ่าน Props แทนการประการฟังค์ชั่นซ้อน

สรุป

React ทำให้เราสร้าง Component หรือ UI ที่สามารถใช้ซ้ำได้
ใน React ทุกส่วนย่อยๆ ของ UI เรียกว่า Component
Component ของ React เป็นฟังค์ชั่น JavaScript ธรรมดา แต่:
1. ต้องตั้งชื่อขึ้นต้นด้วยตัวพิมพ์ใหญ่
2. ต้อง return ด้วย JSX