Menggambarkan Antarmuka Pengguna (UI)

Komponen Pertama Anda

Aplikasi React dibangun dari potongan-potongan antarmuka 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 Lebih Lanjut

---

Mengimpor dan Mengekspor Komponen

Anda dapat mendeklarasikan banyak komponen dalam satu file, tetapi file yang besar dapat menjadi 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 Lebih Lanjut

---

Menulis markup dengan JSX

Setiap komponen React adalah sebuah fungsi JavaScript yang dapat berisi beberapa markup yang di-render oleh React ke peramban. 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.

Menempel markup HTML ke dalam komponen React 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 Lebih Lanjut

---

JavaScript di dalam 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 dalam JSX dengan Kurung Kurawal untuk mempelajari cara mengakses data JavaScript dari JSX.

Baca Lebih Lanjut

---

Mengoper Props ke sebuah 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 Lebih Lanjut

---

Me-render Secara 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 Sally Ride</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 Me-render Secara Kondisional untuk mempelajari cara me-render konten secara kondisional.

Baca Lebih Lanjut

---

Me-render List

Anda akan sering ingin menampilkan beberapa komponen serupa dari koleksi data. Anda dapat menggunakan filter() dan map() dari JavaScript dengan React untuk menyaring 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 Me-render List untuk mempelajari cara me-render daftar komponen dan cara memilih key.

Baca Lebih Lanjut

---

Menjaga Komponen Tetap Murni

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

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

Dengan hanya benar-benar 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>Cangkir teh untuk tamu #{guest}</h2>;
}

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

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

function Cup({ guest }) {
  return <h2>Cangkir 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 Tetap Murni untuk mempelajari cara menulis komponen sebagai fungsi yang murni dan dapat diprediksi.

Baca Lebih Lanjut

---

UI Anda sebagai pohon

React menggunakan pohon (tree) untuk menggambarkan hubungan antara komponen dengan modul.

Sebuah pohon render React adalah representasi dari hubungan induk dan anak di antara komponen.

Komponen-komponen yang berada dekat dari atas pohon, dekat dengan komponen root, disebut sebagai komponen tingkat atas (top-level). Komponen tanpa komponen anak disebut komponen daun (leaf). Pengkategorian komponen ini berguna untuk memahami aliran data dan kinerja rendering.

Memodel hubungan antara modul JavaScript juga cara lain yang berguna untuk memahami aplikasi Anda. Kami menyebutnya sebagai pohon dependensi (dependency tree).

Pohon dependensi seringkali digunakan build tools untuk membundel semua kode JavaScript yang relevan untuk diunduh dan di-render sebuah klien. Bundel berukuran besar akan memperburuk pengalaman pengguna dalam sebuah aplikasi React. Memahami pohon dependensi modul berguna untuk men-debug masalah tersebut.

Siap mempelajari topik ini?

Baca UI Anda sebagai pohon untuk mempelajari bagaimana cara membuat dan me-render pohon dependensi modul sebuah aplikasi React dan bagaimana ia merupakan model mental yang berguna untuk meningkatkan pengalaman pengguna dan performa aplikasi.

Baca Lebih Lanjut

---

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?