Components and Props

Components and Props

ลองดูการใช้ Components กับ Props ประกอบกับ Component and Props Official Doc

1. ลองสร้างโฟลเดอร์ที่ชื่อว่า Components ขึ้นมา ใน src/ จากนั้นลองสร้างไฟล์ Topbar.js ขึ้นมาใน src/Components แล้วสร้างไฟล์ร่าง ๆ ของ JSX ขึ้นมา ให้มีการ Return เป็น JSX HTML Element ออกไปเช่น

   //src/Components/Topbar.js
   import React from 'react';
   export default function Tobbar({}){
       return (<div>
           <h1> Hello This is topbar</h1>
       </div>)
   }
   

   แล้ว Import Component ตัวนี้เข้าไปใน App.js และเรียกใช้ Components นี้ เช่น

   import React from 'react';
   import Header from './Components/Topbar'
   
   export default function App(){
       return <div>
           <Header/>
       </div>
   }
   

   เวลาเราจะเรียก Component เราจะทำเหมือนกับว่ามันเป็น HTML Tag ใหม่ Tag หนึ่ง ที่มีโครงสร้างมากกว่า Tag ทั่ว ๆ ไป โดยใน JSX อย่าง React ถ้าสมมติว่าไม่มีข้อมูลตรงกลางระหว่าง Tag เราสามารถลดรูปได้ เช่น

   <div></div>
   

   สามารถเปลี่ยนเป็น

   <div/>
   

   ได้ เช่นเดียวกัน สามารถเขียน Header ในแบบ <Header></Header> ได้ แต่ไม่เป็นที่นิยม นิยมการเขียนแบบ <Header/> มากกว่า บันทึกแล้วลองดูผล

2. ลองนำ UI Component จาก Bootstrap เช่นพวก Navbar หรือตัวอื่น ๆ มาใส่ใน Header แต่จำไว้เสมอว่าอย่าลืมเปลี่ยน class เป็น className และทุก Tag ของ HTML มีเปิดแล้วต้องมีปิด ใน HTML ธรรมดา Tag บาทงตัวอาจจะไม่ต้องปิด เช่น <br>,<img> แต่ใน jsx จำเป็นต้องปิด เช่น <br/>,<img ... /> และจะต้องถูกครอบเสมอ ในการ Return ออกมาเช่น จะต้องออกมาเป็น Component เดียว เช่น

   • แบบนี้จะ Error

     export default function Topbar(){
         return <div>This is My Header</div><div>Do you like my header?</div>
     }
     

   • แบบนี้จะ Run ได้

   export default function Topbar(){
       return <div>
           <div>This is My Header</div>
           <div>Do you like my header?</div>
           </div>
   }
   

3. ลองโยนค่าลงไปใน Component ของเรา การเขียน Component แบบนี้เราสามารถส่งข้อมูล หรือ ค่าของตัวแปรไปยัง Component ได้ เพื่อให้เราไม่ต้องมาสร้าง Component ใหม่ทุกครั้ง โดยค่าที่เราส่งไป เรียกว่า Props เราสามารถสร้างให้คอมโพเนนท์ของเรารับค่าได้ โดยการไปแก้ฟังก์ชั่นที่ Export Default ออกมา ให้รับค่าพารามิตอร์

   export default function Tobbar({subtitle}){
       return <nav>
           <h1> {subtitle} </h1>
       </nav>
   }
   

   โดยเราสามารถสร้างตังแปรได้ และนำค่านั้นมาแสดงด้วยการใช้ {} และลองเรียกใช้ Component จากที่พัฒนาไป เกิดอะไรขึ้นบ้าง ลองส่งค่าไปโดยใช้

   <Tobbar subtitle="สวัสดีเราคือ Subtitle">