ตอนที่แล้วสังเกตว่าโค้ดของเราจะมีส่วนที่คล้ายๆกันกับ Tag ของ HTML อยู่ด้วยใช่มั้ยครับ (บรรทัดที่ 7–9)
ส่วนของตรงนี้เราเรียกว่า JSX มันคือรูปแบบการเขียน Component ด้วย React และใน React Native
อ่านมาถึงตรงนี้อาจจะสงสัยว่าอะไรคือ Component ใช่มั้ยครับ?
Component คือรูปแบบการแบ่งส่วนของ Content แต่ละอย่างบนหน้าเว็บ หรือในหน้า App ใน React, React Native Framework โดยเราจะแบ่งส่วนของแต่ละอย่างออกเป็นส่วนย่อยๆ เรียกว่า Component
อย่างแอพ Hello, World ง่ายๆในพาร์ทที่แล้วก็จะประกอบด้วย Component เหมือนกัน
โดย Component หลักจะเป็นตัวที่ไปเรียก Component อื่นๆมาแสดง (หลักในที่นี้หมายถึง App)
Component App จะไปเรียก View มาแสดง โดยใน View นั้นก็จะมี Text ที่ทำหน้าที่แสดงตัวอักษรอยู่ข้างในอีกที
ข้อดีของการสร้าง Component
- ได้แบ่งส่วนทำให้จัดการง่ายขึ้น
- สามารถนำมาใช้ซ้ำได้
ในการสร้าง Component เพื่อความง่ายในการจัดการเวลาแอพใหญ่ขึ้นมากๆ ผมจะแนะนำให้สร้างโฟลเดอร์ Components มาเก็บไฟล์ Component โดยเฉพาะ
เข้าไปที่ MyComponent.js โยนโค้ดนี้ลงไป
ใน index.js
ใน MyComponent.js เราสร้าง Component ขึ้นมาตัวนึง ซึ่งจะคืนค่า JSX ที่มีแท็ก View แล้วข้างในก็มี Text บอกว่า Hello, from MyComponent
ส่วน index.js ทำหน้าที่แค่เป็น index สำหรับโฟลเดอร์นี้ ทำให้ไฟล์อื่นๆจะมองเหมือนโฟลเดอร์นี้เป็นไฟล์ .js ไฟล์เดียว
ลองเอา MyComponent ไปใส่ใน App.js ดู
ลองรันแอพดู
สังเกตเห็น Hello, from MyComponent ตัวนี้มาจาก MyComponent ที่เราสร้างเองครับ
Medium ที่ 48
ปีนี้ผมตั้งใจว่าจะเขียน Medium ให้ได้เดือนละ 4–5 Medium ครับ สิ้นปีก็จะมี 52 Medium เท่ากับจำนวนสัปดาห์ใน 1 ปีพอดี ไม่รู้จะทำได้มั้ย แต่ก็ถือเป็น Passion เล็กๆน้อยๆของผมครับ 5555
ผมเขียนบทความหลายแนวแล้วแต่ว่าอยากเขียนยังไง ถ้าอยากให้กำลังใจช่วยกด Clap ให้ซักที สองทีด้วยนะครับ :D
เจอกันบทความหน้าครับ