Component: bộ xây dựng cho web

Xem này: component tùy chỉnh đầu tiên

Component là function chữ cái đầu viết hoa trả về JSX. Thường mỗi cái một file. Tạo file src/Header.jsx:

function Header() {
  return (
    <header>
      <h1>FC Riverside</h1>
      <nav>
        <a href="#team">Team</a>
        <a href="#results">Results</a>
      </nav>
    </header>
  );
}

export default Header;

Và dùng trong src/App.jsx:

import Header from './Header.jsx';

function App() {
  return (
    <div>
      <Header />
      <main>
        <p>Welcome to our club's website!</p>
      </main>
    </div>
  );
}

export default App;

• import ... from ... – “mượn component từ file khác.” Đi với export default.
• <Header /> – thẻ tùy chỉnh! Chữ hoa báo React: không phải HTML, là component của tôi.

Nhớ nỗi đau Cấp 1 – menu copy mọi trang? Vừa biến mất. Header tồn tại một lần, một file.

Xem này: component với dữ liệu đổi được (props)

Con dấu đổi chữ – dữ liệu truyền vào component qua props (properties). File src/PlayerCard.jsx:

function PlayerCard({ name, position, number }) {
  return (
    <div className="card">
      <h3>{name} · #{number}</h3>
      <p>{position}</p>
    </div>
  );
}

export default PlayerCard;

Dùng trong App.jsx:

import PlayerCard from './PlayerCard.jsx';

<PlayerCard name="Jake" position="goalkeeper" number={1} />
<PlayerCard name="Alex" position="midfield" number={8} />
<PlayerCard name="Tom" position="forward" number={9} />

Props viết như thuộc tính HTML. Chữ trong ngoặc kép, số và JavaScript trong {}. Component mở trong ({ name, position, number }) và dùng.

Xem này: danh sách từ mảng

Ba thẻ làm tay – ổn. Nhưng hai mươi? Cho dữ liệu vào mảng và dùng .map():

const players = [
  { name: "Jake", position: "goalkeeper", number: 1 },
  { name: "Matt", position: "defense", number: 4 },
  { name: "Alex", position: "midfield", number: 8 },
  { name: "Tom", position: "forward", number: 9 },
];

function App() {
  return (
    <div className="cards">
      {players.map((player) => (
        <PlayerCard
          key={player.number}
          name={player.name}
          position={player.position}
          number={player.number}
        />
      ))}
    </div>
  );
}

.map() duyệt mảng và tạo thẻ mỗi mục. Thêm cầu thủ = thêm dòng vào mảng. Không copy HTML. (key giúp React phân biệt thẻ – đặt gì unique cũng được.)

Đến lượt bạn 💪

Làm bộ component cho dự án React:

1. Component Header với tên website và menu.
2. Component thẻ với props theo dự án: 🏫 TeacherCard (tên, môn) · 🙋 HobbyCard (tên, mô tả) · 🌍 TripCard (địa điểm, mô tả) · ⚽ PlayerCard (tên, vị trí, số).
3. Dữ liệu trong mảng, render bằng .map() – ít nhất 4 mục.
4. Copy style thẻ từ website cũ vào src/App.css – kiến thức CSS giữ nguyên!

Điều cần nhớ từ bài học này

• Component = file + function chữ hoa + export default; dùng qua import và <Tag />.
• Props = dữ liệu đổi của component: <Card name="Jake" number={1} />.
• Danh sách vẽ bằng array.map() – dữ liệu điều khiển màn hình.

© 2026 Ing. Martin Polak / AlgoRhino · Điều khoản sử dụng nội dung