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

#webdev #beginners #react

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