React

Pustaka untuk antarmuka pengguna web dan native

Membuat antarmuka pengguna dari komponen

React memungkinkan Anda membangun antarmuka penguna dari bagian-bagian yang disebut komponen. Buat komponen React Anda sendiri seperti Thumbnail, LikeButton, dan Video. Kemudian gabungkan komponen-komponen tersebut ke dalam seluruh layar, halaman, dan aplikasi.

Video.js

function Video({ video }) {
  return (
    <div>
      <Thumbnail video={video} />
      <a href={video.url}>
        <h3>{video.title}</h3>
        <p>{video.description}</p>
      </a>
      <LikeButton video={video} />
    </div>
  );
}

Video saya

Deskripsi video

Baik Anda bekerja sendiri atau dengan ribuan pengembang lain, menggunakan React akan terasa sama. React dirancang untuk memungkinkan Anda menggabungkan komponen secara mulus yang dirancang oleh pengembang independen, tim, dan organisasi.

Menulis komponen dengan kode dan markup

Komponen React adalah fungsi JavaScript. Ingin menampilkan beberapa konten secara kondisional? Gunakan pernyataan if. Menampilkan sebuah daftar? Gunakan fungsi map() ke sebuah senarai (array). Belajar React adalah belajar pemrograman.

VideoList.js

function VideoList({ videos, emptyHeading }) {
  const count = videos.length;
  let heading = emptyHeading;
  if (count > 0) {
    const noun = 'Video';
    heading = count + ' ' + noun;
  }
  return (
    <section>
      <h2>{heading}</h2>
      {videos.map(video =>
        <Video key={video.id} video={video} />
      )}
    </section>
  );
}

3 Video

Video pertama

Deskripsi video

Video kedua

Deskripsi video

Video ketiga

Deskripsi video