Component React Pertama Anda

14 minitPertengahanReact

Dalam pelajaran ini

Tulis function component yang memulangkan JSX
Terangkan kenapa nama component mesti bermula dengan huruf besar
Gabungkan component dengan me-render satu di dalam yang lain
Guna export default dan import untuk memindahkan component ke failnya sendiri

Idea utama

Component ialah function bernama huruf besar yang memulangkan JSX. Tulis sekali, render ia seperti tag, dan letak component di dalam component lain untuk membina UI yang lebih besar.

Dalam pelajaran lepas anda memecahkan halaman kepada component. Sekarang mari kita lihat dengan teliti peraturan yang menjadikan sesuatu function itu component React. Tak banyak pun.

Greeting.jsx

export default function Greeting() {
  const hour = new Date().getHours();
  const word = hour < 12 ? "Selamat pagi" : "Hello";

  return (
    <section className="greeting">
      <h2>{word}!</h2>
      <p>Welcome to WANCode.</p>
    </section>
  );
}

Ia function JavaScript biasa. Anda boleh isytihar variable dan jalankan logik sebelum return.
Ia memulangkan JSX — satu elemen (yang boleh ada banyak anak). Pulangkan null kalau ia tak perlu paparkan apa-apa.
Namanya bermula dengan huruf besar: Greeting, bukan greeting.
Ia di-export supaya fail lain boleh menggunakannya. export default menandakan export utama fail itu.

Kenapa huruf besar penting

JSX menggunakan huruf pertama untuk menentukan maksud sesuatu tag. Tag huruf kecil seperti <div> atau <profilecard> dianggap elemen HTML. Tag huruf besar seperti <ProfileCard /> bermaksud "panggil function component saya". Kalau tersilap, React senyap-senyap mencipta elemen HTML yang tidak dikenali dan mencetak amaran dalam console.

Dianggap tag HTML

JSX

function profileCard() { … }

<profileCard />
// React: "<profileCard /> is using
// incorrect casing…"

Memanggil component anda

JSX

function ProfileCard() { … }

<ProfileCard />
// React calls ProfileCard()
// and renders what it returns

Component di dalam component

Component boleh me-render component lain — itulah composition, dan beginilah setiap aplikasi React berkembang. Takrifkan setiap component di peringkat atas fail (bukan di dalam component lain), kemudian guna di mana-mana anda perlukan.

JSX

function Avatar() {
  return <img className="avatar" src="https://i.pravatar.cc/80" alt="Aina" />;
}

function ProfileCard() {
  return (
    <article className="card">
      <Avatar />
      <h2>Aina Rahman</h2>
    </article>
  );
}

Satu component satu fail

Bila aplikasi membesar, setiap component utama biasanya duduk dalam failnya sendiri. export default menjadikannya export utama fail itu; import membawanya masuk ke tempat lain. Dalam projek sebenar (contohnya yang dibuat dengan Vite), fail kecil main.jsx meng-import App dan memasangnya — WANCode buat langkah itu untuk anda.

main.jsx

import { createRoot } from "react-dom/client";
import App from "./App.jsx";

createRoot(document.getElementById("root")).render(<App />);

Sebagai rujukan sahaja: apa yang memasang App dalam projek React biasa.

Export default lwn export bernama

export default function ProfileCard di-import tanpa kurungan kerinting: import ProfileCard from "./ProfileCard.jsx". Export bernama (export function ProfileCard) perlukan kurungan kerinting: import { ProfileCard } from "./ProfileCard.jsx". Kalau tercampur, anda dapat undefined dan bukannya component.

Pratonton memaparkan tajuk tetapi tiada kad profil. Buka tab Console: React sedang memberi amaran tentang sesuatu.

Baiki component itu supaya kad dipaparkan. Pastikan nama function dan tag yang menggunakannya sepadan.

Semakan

Kad profil ada pada halaman
Ia di-render oleh component ProfileCard
Tiada amaran huruf besar/kecil dalam console

Uji kefahaman

Anda takrifkan function navBar() { … } dan tulis <navBar />. Apa yang berlaku?

React memanggil navBar() seperti biasaReact menganggapnya tag HTML yang tidak dikenali, tidak memaparkan apa-apa yang berguna dan memberi amaran dalam consolePelayar tergendala

Yang manakah component React yang sah?

function Badge() { return New; }function Badge() { New; }const badge = "New";

Card.jsx ada export default function Card() {…}. Bagaimana anda import-nya?

import { Card } from "./Card.jsx";import Card from "./Card.jsx";include Card.jsx;

Apa yang anda pelajari

Component ialah function bernama huruf besar yang memulangkan JSX (atau null).
Tag huruf kecil ialah HTML; tag huruf besar memanggil component anda.
Component me-render component lain — itulah composition.
export default + import X from "./X.jsx" membolehkan setiap component duduk dalam failnya sendiri.

Pratonton

Output konsol daripada kod anda akan dipaparkan di sini.