Komponen: perlengkapan pembuatan web

Bangun komponen khusus pertama kamu dan susun halaman dari komponen tersebut seperti LEGO.

Tunjukkan pada saya: komponen khusus pertama kamu

Komponen adalah fungsi dengan huruf kapital pertama yang mengembalikan JSX. Merupakan kebiasaan untuk memasukkan masing-masing file ke dalam filenya sendiri. Buat 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;

Dan gunakan di 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 ... dari ... – “meminjam komponen dari file lain.” Ini berpasangan dengan default ekspor.
<Header /> – tag khusus! Huruf kapital memberitahu React: ini bukan HTML, ini komponen saya.

Ingat rasa sakit dari Level 1 – menu disalin ke setiap halaman? Itu menghilang begitu saja. Header ada sekali, dalam satu file.

Tunjukkan pada saya: komponen dengan data yang dapat ditukar (props)

Stempel dengan huruf yang dapat ditukar – data diteruskan ke komponen sebagai props (properti). File src/PlayerCard.jsx:

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

export default PlayerCard;

Digunakan di 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} />

Alat peraga ditulis seperti atribut HTML. Teks dimasukkan dalam tanda kutip, angka, dan JavaScript dalam {}. Komponen membongkarnya dalam ({ nama, posisi, nomor }) dan menggunakannya.

Tunjukkan pada saya: daftar dari array

Tiga kartu dengan tangan – baiklah. Tapi bagaimana jika jumlahnya dua puluh? Masukkan data ke dalam array dan gunakan .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() menelusuri array dan membuat kartu untuk setiap item. Menambahkan pemain = menambahkan baris ke array. Tidak ada HTML yang disalin. (key hanyalah sebuah bantuan bagi React untuk membedakan kartu – letakkan sesuatu yang unik di sana.)

Giliran kamu 💪

Bangun kit komponen untuk proyek kamu sendiri di proyek React kamu:

Komponen Header dengan nama dan menu situs web kamu.
Komponen kartu dengan properti yang cocok dengan proyek kamu: 🏫 TeacherCard (nama, subjek) · 🙋 HobbyCard (nama, deskripsi) · 🌍 TripCard (tempat, deskripsi) · ⚽ PlayerCard (nama, posisi, nomor).
Masukkan data ke dalam array dan render dengan .map() – setidaknya 4 item.
Salin gaya kartu kamu dari situs web lama ke src/App.css – pengetahuan CSS kamu tidak berubah!

✅

Periksa diri kamu sendiri: Halaman ini disusun dari tag kamu sendiri (

, …), kartu dihasilkan dari array data, dan menambahkan item ke array akan menambahkan kartu ke halaman. Ini adalah bagaimana aplikasi sebenarnya dibangun.

Apa yang bisa diambil dari pelajaran ini

Komponen = file + fungsi dengan huruf kapital + default ekspor; digunakan melalui impor dan <Tag />.
Props = data komponen yang dapat ditukar: <Card name="Jake" number={1} />.
Daftar digambar dengan array.map() – data menggerakkan layar.