Menggambarkan Antarmuka Pengguna (UI)

Komponen Pertama Anda

Aplikasi React dibangun dari potongan-potongan antaramuka pengguna (UI) yang terisolasi yang disebut komponen. Komponen React adalah sebuah fungsi JavaScript yang dapat Anda tambahkan dengan markup. Komponen dapat sekecil tombol atau sebesar halaman utuh. Berikut adalah contoh komponen Gallery yang me-render tiga komponen Profile:

function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3As.jpg"
      alt="Katherine Johnson"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Ilmuwan yang luar biasa</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

Siap mempelajari topik ini?

Baca Komponen Pertama Anda untuk mempelajari cara mendeklarasikan dan menggunakan komponen React.

Baca selengkapnya

---

Mengimpor dan Mengekspor Komponen

Anda dapat mendeklarasikan banyak komponen dalam satu file, tetapi file yang besar dapat sulit untuk dinavigasi/dibaca. Untuk memecahkan masalah ini, Anda dapat mengekspor sebuah komponen ke dalam file sendiri, dan kemudian mengimpor komponen tersebut dari file lain:

import Profile from './Profile.js';

export default function Gallery() {
  return (
    <section>
      <h1>Ilmuwan yang luar biasa</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

Siap mempelajari topik ini?

Baca Mengimpor dan Mengekspor Komponen untuk belajar bagaimana memecah komponen ke dalam file-file terpisah.

Baca selengkapnya

---

Menulis markup dengan JSX

Setiap komponen React adalah fungsi JavaScript yang dapat berisi beberapa markup yang di-render oleh React ke browser. Komponen React menggunakan ekstensi sintaksis bernama JSX untuk merepresentasikan markup tersebut. JSX terlihat mirip dengan HTML, tetapi sedikit lebih ketat dan dapat menampilkan informasi yang dinamis.

Jika kita menempel markup HTML yang sembarang ke dalam komponen React, itu tidak selalu akan berfungsi:

export default function TodoList() {
  return (
    // Ini tidak cukup berhasil
    <h1>Hedy Lamarr's Todos</h1>
    <img
      src="https://i.imgur.com/yXOvdOSs.jpg"
      alt="Hedy Lamarr"
      class="photo"
    >
    <ul>
      <li>Ciptakan lampu lalu lintas baru
      <li>Latih adegan film
      <li>Meningkatkan teknologi spektrum
    </ul>

Jika Anda memiliki HTML seperti ini, Anda dapat memperbaikinya menggunakan konverter:

export default function TodoList() {
  return (
    <>
      <h1>Hedy Lamarr's Todos</h1>
      <img
        src="https://i.imgur.com/yXOvdOSs.jpg"
        alt="Hedy Lamarr"
        className="photo"
      />
      <ul>
        <li>Ciptakan lampu lalu lintas baru</li>
        <li>Latih adegan film</li>
        <li>Meningkatkan teknologi spektrum</li>
      </ul>
    </>
  );
}

Siap mempelajari topik ini?

Baca Menulis Markup dengan JSX untuk mempelajarai cara menulis JSX yang valid.

Baca selengkapnya

---

JavaScript di JSX dengan kurung kurawal

JSX memungkinkan Anda menulis markup mirip HTML di dalam file JavaScript, menjaga logika rendering dan konten di tempat yang sama. Terkadang Anda ingin menambahkan sedikit logika JavaScript atau merujuk pada properti dinamis di dalam markup tersebut. Dalam situasi ini, Anda dapat menggunakan kurung kurawal di JSX Anda untuk “membuka jendela” ke JavaScript:

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person.name}'s Todos</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Meningkatkan videophone</li>
        <li>Menyiapkan kuliah aeronautika</li>
        <li>Mengerjakan mesin berbahan bakar alkohol</li>
      </ul>
    </div>
  );
}

Siap mempelajari topik ini?

Baca JavaScript di JSX dengan Kurung Kurawal untuk mempelajari cara mengakses data JavaScript dari JSX.

Baca selengkapnya

---

Mengoper Props ke Komponen

Komponen React menggunakan props untuk berkomunikasi satu sama lain. Setiap komponen induk dapat memberikan informasi ke komponen anaknya dengan memberikan props. Props mungkin mengingatkan Anda pada atribut HTML, tetapi Anda dapat mengoper nilai JavaScript apa pun melalui props, termasuk objek, senarai, fungsi, dan bahkan JSX!

import { getImageUrl } from './utils.js'

export default function Profile() {
  return (
    <Card>
      <Avatar
        size={100}
        person={{
          name: 'Katsuko Saruhashi',
          imageId: 'YfeOqp2'
        }}
      />
    </Card>
  );
}

function Avatar({ person, size }) {
  return (
    <img
      className="avatar"
      src={getImageUrl(person)}
      alt={person.name}
      width={size}
      height={size}
    />
  );
}

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

Siap mempelajari topik ini?

Baca Mengoper Props ke sebuah Komponen untuk mempelajari cara mengoper dan membaca props.

Baca selengkapnya

---

Merender Kondisional

Komponen Anda seringkali perlu menampilkan hal-hal yang berbeda tergantung pada kondisi yang berbeda. Di React, Anda dapat me-render JSX secara kondisional menggunakan sintaks JavaScript seperti if statements, &&, dan ?: operator.

Dalam contoh ini, operator && JavaScript digunakan untuk me-render centang secara kondisional:

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {name} {isPacked && '✔'}
    </li>
  );
}

export default function PackingList() {
  return (
    <section>
      <h1>Daftar Perlengkapan Mengemudi Sally</h1>
      <ul>
        <Item
          isPacked={true}
          name="Pakaian luar angkasa"
        />
        <Item
          isPacked={true}
          name="Helm dengan daun emas"
        />
        <Item
          isPacked={false}
          name="Foto Tam"
        />
      </ul>
    </section>
  );
}

Siap mempelajari topik ini?

Baca Merender Kondisional untuk mempelajari cara merender konten secara kondisional.

Baca selengkapnya

---

Merender List

Anda akan sering ingin menampilkan beberapa komponen serupa dari koleksi data. Anda dapat menggunakan filter() dan map() dari JavaScript dengan React untuk memfilter dan mentransformasikan senarai data Anda menjadi senarai komponen.

Untuk setiap item pada senarai, Anda perlu menentukan sebuah kunci key. Biasanya, Anda ingin menggunakan ID dari basisdata sebagai key. Key memungkinkan React untuk melacak posisi setiap item di dalam daftar bahkan jika daftar berubah.

import { people } from './data.js';
import { getImageUrl } from './utils.js';

export default function List() {
  const listItems = people.map(person =>
    <li key={person.id}>
      <img
        src={getImageUrl(person)}
        alt={person.name}
      />
      <p>
        <b>{person.name}:</b>
        {' ' + person.profession + ' '}
        yang terkenal dengan {person.accomplishment}
      </p>
    </li>
  );
  return (
    <article>
      <h1>Ilmuwan</h1>
      <ul>{listItems}</ul>
    </article>
  );
}

Siap mempelajari topik ini?

Baca Merender List untuk mempelajari cara me-render daftar komponen dan cara memilih key.

Baca selengkapnya

---

Menjaga Komponen Murni

Beberapa fungsi JavaScript adalah murni (pure). Sebuah fungsi murni:

• Memperhatikan urusannya sendiri. fungsi tidak mengubah objek atau variabel apa pun yang ada sebelumnya dipanggil.
• Input sama, output sama. Dengan input yang sama, sebuah fungsi murni harus selalu mengembalikan hasil yang sama.

Dengan secara ketat hanya menulis komponen Anda sebagai fungsi murni, Anda dapat menghindari seluruh bug yang membingungkan dan perilaku yang tidak dapat diprediksi saat kode Anda berkembang. Berikut ini adalah contoh komponen tidak murni:

let guest = 0;

function Cup() {
  // Buruk: memodifikasi variabel yang sudah ada sebelum cup dipanggil!
  guest = guest + 1;
  return <h2>Gelas teh untuk tamu #{guest}</h2>;
}

export default function TeaSet() {
  return (
    <>
      <Cup />
      <Cup />
      <Cup />
    </>
  );
}

Anda dapat membuat komponen ini menjadi murni dengan melewatkan sebuah prop daripada memodifikasi variabel yang sudah ada:

function Cup({ guest }) {
  return <h2>Gelas teh untuk tamu #{guest}</h2>;
}

export default function TeaSet() {
  return (
    <>
      <Cup guest={1} />
      <Cup guest={2} />
      <Cup guest={3} />
    </>
  );
}

Siap mempelajari topik ini?

Baca Menjaga Komponen Murni untuk mempelajari cara menulis komponen sebagai fungsi yang murni dan dapat diprediksi.

Baca selengkapnya

---

Apa selanjutnya?

Lanjut ke Komponen Pertama Anda untuk mulai membaca halaman bab ini dari awal!

Atau, jika Anda sudah familiar dengan topik ini, mengapa tidak membaca tentang Menambahkan Interaktivitas?