ความรู้เบื้องต้นเกี่ยวกับคอมโพเนนต์ React

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

หากดูที่ส่วนหัวเดียวกัน สิ่งที่อยู่ในนั้น สามารถแยกออกเป็นบล็อกที่มีโลโก้, บล็อกข้อมูลติดต่อ, บล็อกที่มีเมนู และอื่นๆ นั่นคือคอมโพเนนต์ สามารถประกอบด้วยคอมโพเนนต์ย่อยอื่นๆ ได้

ในทำนองเดียวกันใน React - เว็บไซต์ถูกสร้างขึ้นจากชุดของคอมโพเนนต์ ซึ่ง ในทางกลับกันสามารถมีคอมโพเนนต์อื่นๆ อยู่ภายใน

ใน React แต่ละคอมโพเนนต์แสดงถึง โมดูลแยกต่างหาก โดยปกติการพัฒนาเริ่มต้น จากคอมโพเนนต์หลัก App ซึ่ง มีคอมโพเนนต์อื่นๆ อยู่ภายใน

มาลองฝึกสร้างคอมโพเนนต์ใหม่กัน

สมมติสำหรับตัวอย่าง เราต้องการคอมโพเนนต์ที่แสดง ข้อมูลผลิตภัณฑ์ สำหรับสิ่งนี้เราต้องสร้างไฟล์ Product.js ในโฟลเดอร์งาน และเพิ่มโค้ดต่อไปนี้ลงไป:

jsximport React from 'react';

function Product() {
  return <p>
    ผลิตภัณฑ์
  </p>;
}

export default Product;

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

ตอนนี้มาลองแสดงคอมโพเนนต์ที่เราสร้างขึ้น ในคอมโพเนนต์ App สมมติว่าตอนนี้ App ของเรามีโค้ดต่อไปนี้:

jsximport React from 'react';

function App() {
  return <div>
    ข้อความ
  </div>;
}

export default App;

เริ่มต้นเราต้องนำเข้าคอมโพเนนต์ ผลิตภัณฑ์ที่เราสร้างขึ้น:

jsximport React from 'react';
import Product from './Product'; // นำเข้าผลิตภัณฑ์

function App() {
  return <div>
    ข้อความ
  </div>;
}

export default App;

หลังจากนำเข้าเช่นนี้ ภายในคอมโพเนนต์ App คุณสามารถใช้คอมโพเนนต์ Product ได้