Cara menggunakan react bootstrap template

Kita akan membangun sebuah gim kecil sepanjang tutorial ini. Anda bisa jadi tergoda untuk melewati tutorial ini karena Anda tidak benar-benar membuat gim — namun luangkanlah sedikit waktu untuk mencobanya. Teknik-teknik yang akan Anda pelajari pada tutorial ini adalah hal-hal dasar yang digunakan untuk membangun aplikasi React, dan menguasai teknik-teknik tersebut akan memberikan pemahaman terhadap React secara lebih mendalam.

Tips

Tutorial ini didesain untuk orang yang lebih suka belajar dengan mempraktikkan. Jika Anda lebih suka mempelajari konsep dari tingkat dasar sampai tingkat lanjut, lihat panduan langkah demi langkah kami. Anda akan menyadari bahwa tutorial dan panduan akan saling melengkapi.

Tutorial ini akan dibagi menjadi beberapa bagian:

• merupakan titik awal Anda untuk mengikuti tutorial.
• bagian ini berisi hal-hal mendasar React: komponen, props, dan state.
• bagian ini berisi teknik-teknik yang paling umum pada pengembangan aplikasi React.
• bagian ini akan memberikan pemahaman yang lebih mendalam pada kekuatan unik dari React.

Anda tidak perlu menyelesaikan semua bagian sekaligus untuk mendapatkan pembelajaran dari tutorial ini. Cobalah mengerjakan semampu Anda — walaupun hanya satu atau dua bagian.

Apa yang Kita Kembangkan?

Dalam tutorial ini, kami akan menunjukkan cara membuat permainan tic-tac-toe interaktif menggunakan React.

Anda dapat melihat gambaran aplikasi yang akan kita buat di sini: Hasil Akhir. Jika kode tersebut tidak masuk akal untuk Anda, atau Anda tidak akrab dengan sintaks kode tersebut, jangan khawatir! Tujuan dari tutorial ini adalah untuk membantu Anda mengerti React dan sintaksnya.

Kami merekomendasikan Anda untuk mencari tahu tentang permainan tic-tac-toe sebelum melanjutkan tutorial ini. Salah satu fitur yang akan Anda lihat adalah adanya daftar bernomor di sebelah kanan papan permainan. Daftar ini memberikan Anda semua riwayat langkah yang sudah terjadi dalam permainan, dan terus diperbarui selama permainan berlangsung.

Anda bisa menutup laman permainan tic-tac-toe setelah Anda paham dengan permainan tersebut. Kita akan memulai dari templat sederhana pada tutorial ini. Langkah selanjutnya adalah mempersiapkan Anda sehingga Anda dapat memulai mengembangkan permainan tic-tac-toe.

Prasyarat

Kami mengasumsikan bahwa Anda memiliki pemahaman akan HTML dan JavaScript, namun Anda seharusnya tetap dapat mengikuti tutorial ini jika Anda memiliki pemahaman pada bahasa pemrograman lainnya. Kami juga berasumsi bahwa Anda memiliki pemahaman akan konsep pemrograman seperti fungsi, objek, senarai, dan pada tingkat yang lebih rendah, kelas.

Jika Anda memerlukan pengingat tentang JavaScript, kami merekomendasikan Anda untuk membaca panduan ini. Perlu diperhatikan juga bahwa kita menggunakan beberapa fitur dari ES6 — versi terbaru JavaScript. Di tutorial ini, kita menggunakan statement arrow functions, kelas,

return React.createElement('div', {className: 'shopping-list'},
  React.createElement('h1', /* ... h1 children ... */),
  React.createElement('ul', /* ... ul children ... */)
);

return React.createElement('div', {className: 'shopping-list'},
  React.createElement('h1', /* ... h1 children ... */),
  React.createElement('ul', /* ... ul children ... */)
);

Mempersiapkan Tutorial

Ada dua cara untuk menyelesaikan tutorial ini: Anda dapat menulis kode pada browser Anda atau mempersiapkan local development environment pada komputer Anda.

Persiapan Cara 1: Menulis Kode pada Browser

Ini adalah cara tercepat untuk memulai!

Pertama, buka kode permulaan ini pada tab baru. Tab baru tersebut seharusnya menunjukan papan permainan tic-tac-toe yang kosong dan kode React. Kita akan mengedit kode React tersebut pada tutorial ini.

Anda dapat melewati cara kedua untuk persiapan dan menuju ke bagian untuk mendapatkan ikhtisar dari React.

Persiapan Cara 2: Local Development Environment

Cara ini murni opsional dan tidak wajib pada tutorial ini!

Persiapan ini membutuhkan lebih banyak langkah tetapi membuat Anda dapat menyelesaikan tutorial ini menggunakan editor teks pilihan Anda. Berikut adalah beberapa langkah yang harus diikuti:

1. Pastikan Anda sudah meng-install Node.js versi terbaru.
2. Ikuti untuk membuat project baru.

npx create-react-app my-app

1. Hapus semua file pada folder

   return React.createElement('div', {className: 'shopping-list'},
     React.createElement('h1', /* ... h1 children ... */),
     React.createElement('ul', /* ... ul children ... */)
   );

   6 dari project baru Anda.

Catatan: jangan hapus seluruh folder

return React.createElement('div', {className: 'shopping-list'},
  React.createElement('h1', /* ... h1 children ... */),
  React.createElement('ul', /* ... ul children ... */)
);

7, cukup file-file yang ada di dalamnya saja. Kita akan menggantikan file-file tersebut dengan contoh-contoh yang akan diberikan melalui tutorial ini.

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

1. Tambahkan file bernama

   return React.createElement('div', {className: 'shopping-list'},
     React.createElement('h1', /* ... h1 children ... */),
     React.createElement('ul', /* ... ul children ... */)
   );

   8 ke dalam folder

   return React.createElement('div', {className: 'shopping-list'},
     React.createElement('h1', /* ... h1 children ... */),
     React.createElement('ul', /* ... ul children ... */)
   );

   6 dengan kode CSS ini.
2. Tambahkan file bernama

   class Board extends React.Component {
     renderSquare(i) {
       return <Square value={i} />;  }
   }

   0 ke dalam folder

   return React.createElement('div', {className: 'shopping-list'},
     React.createElement('h1', /* ... h1 children ... */),
     React.createElement('ul', /* ... ul children ... */)
   );

   6 dengan kode JS ini.
3. Tambahkan tiga baris kode berikut pada bagian paling atas

   class Board extends React.Component {
     renderSquare(i) {
       return <Square value={i} />;  }
   }

   0 di dalam folder

   return React.createElement('div', {className: 'shopping-list'},
     React.createElement('h1', /* ... h1 children ... */),
     React.createElement('ul', /* ... ul children ... */)
   );

   6:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

Sekarang, jika Anda menjalankan

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

Kami merekomendasikan Anda untuk mengikuti instruksi ini untuk mengkonfigurasi syntax highlighting untuk editor Anda.

Tolong, Saya Mengalami Masalah!

Jika Anda mengalami masalah, silahkan kunjungi sumber dukungan komunitas. Secara khusus, Reactiflux Chat adalah langkah yang baik untuk mendapat bantuan dengan cepat. Jika Anda tidak mendapat jawaban, atau tetap mengalami masalah, maka silahkan mengajukan issue, dan kami akan membantu Anda.

Ikhtisar

Sekarang karena Anda sudah siap, mari mempelajari ikhtisar dari React!

Apa Itu React?

React adalah library JavaScript yang deklaratif, efisien, dan fleksibel untuk membangun antarmuka pengguna. React memungkinkan Anda untuk membuat antarmuka kompleks dari kumpulan kode yang kecil dan terisolasi yang disebut “komponen”.

React memiliki beberapa jenis komponen, tetapi kita akan memulai dengan subkelas

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Daftar Belanja untuk {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

// Contoh Penggunaan: <ShoppingList name="Mark" />

Kita akan membahas tag aneh yang seperti XML sesaat lagi. Kita menggunakan komponen untuk memberi tahu React yang ingin kita lihat pada layar. Ketika data kita berubah, React akan memperbarui dan me-render ulang komponen kita dengan efisien.

Di sini, ShoppingList adalah kelas komponen React atau tipe komponen React. Sebuah komponen dapat menerima parameter yang disebut dengan

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

Method

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}      </button>
    );
  }
}

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}      </button>
    );
  }
}

return React.createElement('div', {className: 'shopping-list'},
  React.createElement('h1', /* ... h1 children ... */),
  React.createElement('ul', /* ... ul children ... */)
);

Jika Anda penasaran,

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}      </button>
    );
  }
}

JSX hadir dengan kekuatan penuh dari JavaScript. Anda dapat menulis setiap ekspresi JavaScript di antara tanda kurung kurawal di dalam JSX. Setiap elemen React adalah objek JavaScript yang dapat Anda simpan di dalam variabel atau Anda oper ke seputar program Anda.

Komponen

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}      </button>
    );
  }
}

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}      </button>
    );
  }
}

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}      </button>
    );
  }
}

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}      </button>
    );
  }
}

Melihat Kode Permulaan

Jika Anda akan mengikuti tutorial ini di browser Anda, buka kode ini pada tab baru: Kode Permulaan. Jika Anda mengikuti tutorial ini dengan local environment Anda, bukalah

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { alert('click'); }}>        {this.props.value}
      </button>
    );
  }
}

Kode Permulaan ini berdasarkan pada aplikasi yang akan kita buat. Kami sudah menyediakan style CSS sehingga Anda bisa fokus mempelajari React dan memprogram permainan tic-tac-toe.

Dengan melihat kode permulaan, Anda akan melihat bahwa kita memiliki tiga komponen React:

• Square
• Board
• Game

Komponen Square akan me-render sebuah

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { alert('click'); }}>        {this.props.value}
      </button>
    );
  }
}

Mengoper Data Melalui Props

Untuk memulai mendalami React, mari kita mencoba untuk mengoper data dari komponen Board ke komponen Square kita.

Kami menyarankan mengetik kode-kode berikut secara manual selama Anda mengikuti tutorial ini dan menghindari menggunakan copy/paste. Ini akan membantu mengembangkan memori otot Anda dan meningkatkan pemahaman Anda mengenai React.

Di dalam method

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { alert('click'); }}>        {this.props.value}
      </button>
    );
  }
}

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { alert('click'); }}>        {this.props.value}
      </button>
    );
  }
}

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

Ubah method

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { alert('click'); }}>        {this.props.value}
      </button>
    );
  }
}

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { alert('click'); }}>        {this.props.value}
      </button>
    );
  }
}

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}      </button>
    );
  }
}

Sebelum:

Sesudah: Anda seharusnya melihat angka dari setiap persegi pada keluaran yang telah di-render.

Lihat kode lengkap sampai tahap ini

Selamat! Anda baru saja “mengoperkan sebuah prop” dari komponen Board ke komponen Square. Mengoperkan props adalah cara informasi dapat mengalir dalam aplikasi React dari (komponen) induk ke anak.

Membuat Komponen Interaktif

Mari mengisi komponen Square dengan sebuah “X” ketika kita mengklik komponen tersebut. Pertama, ubah button tag yang dikembalikan dari fungsi

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { alert('click'); }}>        {this.props.value}
      </button>
    );
  }
}

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { alert('click'); }}>        {this.props.value}
      </button>
    );
  }
}

Jika kita mengklik salah satu Square, kita akan mendapatkan alert pada browser kita.

Catatan

Untuk mempercepat proses mengetik dan menghindari perilaku membingungkan

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { alert('click'); }}>        {this.props.value}
      </button>
    );
  }
}

8, kita akan menggunakan sintaks arrow function untuk setiap event handler yang akan kita buat:

class Square extends React.Component {
 render() {
   return (
     <button className="square" onClick={() => alert('click')}>       {this.props.value}
     </button>
   );
 }
}

Perhatikan bahwa dengan

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { alert('click'); }}>        {this.props.value}
      </button>
    );
  }
}

9, kita mengoperkan sebuah fungsi sebagai prop

class Square extends React.Component {
 render() {
   return (
     <button className="square" onClick={() => alert('click')}>       {this.props.value}
     </button>
   );
 }
}

0. Fungsi tersebut hanya dieksekusi setelah klik. Lupa untuk menulis

class Square extends React.Component {
 render() {
   return (
     <button className="square" onClick={() => alert('click')}>       {this.props.value}
     </button>
   );
 }
}

1 dan menulis

class Square extends React.Component {
 render() {
   return (
     <button className="square" onClick={() => alert('click')}>       {this.props.value}
     </button>
   );
 }
}

2 adalah kesalahan yang sering terjadi, dan menyebabkan fungsi akan terus dijalankan setiap komponen di-render ulang.

Selanjutnya, kita ingin agar komponen Square “mengingat” bahwa komponen tersebut sudah diklik dan mengisinya dengan “X”. Untuk “mengingat” sesuatu, komponen menggunakan state.

Komponen React dapat memiliki state dengan mengatur

class Square extends React.Component {
 render() {
   return (
     <button className="square" onClick={() => alert('click')}>       {this.props.value}
     </button>
   );
 }
}

class Square extends React.Component {
 render() {
   return (
     <button className="square" onClick={() => alert('click')}>       {this.props.value}
     </button>
   );
 }
}

class Square extends React.Component {
 render() {
   return (
     <button className="square" onClick={() => alert('click')}>       {this.props.value}
     </button>
   );
 }
}

Pertama, kita akan menambahkan konstruktor pada kelas untuk menginisialisasi state:

class Square extends React.Component {
  constructor(props) {    super(props);    this.state = {      value: null,    };  }
  render() {
    return (
      <button className="square" onClick={() => alert('click')}>
        {this.props.value}
      </button>
    );
  }
}

Catatan

Pada kelas JavaScript, Anda harus selalu memanggil

class Square extends React.Component {
 render() {
   return (
     <button className="square" onClick={() => alert('click')}>       {this.props.value}
     </button>
   );
 }
}

6 ketika mendefinisikan konstruktor dari sebuah subkelas. Semua kelas komponen React yang memiliki

class Square extends React.Component {
 render() {
   return (
     <button className="square" onClick={() => alert('click')}>       {this.props.value}
     </button>
   );
 }
}

7 harus dimulai dengan

class Square extends React.Component {
 render() {
   return (
     <button className="square" onClick={() => alert('click')}>       {this.props.value}
     </button>
   );
 }
}

8.

Sekarang kita akan mengubah method

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

• Mengganti

  class Square extends React.Component {
    constructor(props) {    super(props);    this.state = {      value: null,    };  }
    render() {
      return (
        <button className="square" onClick={() => alert('click')}>
          {this.props.value}
        </button>
      );
    }
  }

  0 dengan

  class Square extends React.Component {
    constructor(props) {    super(props);    this.state = {      value: null,    };  }
    render() {
      return (
        <button className="square" onClick={() => alert('click')}>
          {this.props.value}
        </button>
      );
    }
  }

  1 di dalam

  class Square extends React.Component {
    render() {
      return (
        <button className="square" onClick={function() { alert('click'); }}>        {this.props.value}
        </button>
      );
    }
  }

  1 tag.
• Mengganti event handler

  class Square extends React.Component {
    constructor(props) {    super(props);    this.state = {      value: null,    };  }
    render() {
      return (
        <button className="square" onClick={() => alert('click')}>
          {this.props.value}
        </button>
      );
    }
  }

  3 dengan

  class Square extends React.Component {
    constructor(props) {    super(props);    this.state = {      value: null,    };  }
    render() {
      return (
        <button className="square" onClick={() => alert('click')}>
          {this.props.value}
        </button>
      );
    }
  }

  4.
• Pisahkan props

  class Square extends React.Component {
    constructor(props) {    super(props);    this.state = {      value: null,    };  }
    render() {
      return (
        <button className="square" onClick={() => alert('click')}>
          {this.props.value}
        </button>
      );
    }
  }

  5 dan

  class Square extends React.Component {
   render() {
     return (
       <button className="square" onClick={() => alert('click')}>       {this.props.value}
       </button>
     );
   }
  }

  0 pada baris yang berbeda agar lebih mudah dibaca.

Setelah perubahan di atas, tag

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { alert('click'); }}>        {this.props.value}
      </button>
    );
  }
}

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

Dengan memanggil

class Square extends React.Component {
  constructor(props) {    super(props);    this.state = {      value: null,    };  }
  render() {
    return (
      <button className="square" onClick={() => alert('click')}>
        {this.props.value}
      </button>
    );
  }
}

class Square extends React.Component {
 render() {
   return (
     <button className="square" onClick={() => alert('click')}>       {this.props.value}
     </button>
   );
 }
}

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { alert('click'); }}>        {this.props.value}
      </button>
    );
  }
}

class Square extends React.Component {
  constructor(props) {    super(props);    this.state = {      value: null,    };  }
  render() {
    return (
      <button className="square" onClick={() => alert('click')}>
        {this.props.value}
      </button>
    );
  }
}

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

Ketika Anda memanggil

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

Lihat kode lengkap sampai tahap ini

Developer Tools

Ekstensi React Devtools untuk Chrome dan Firefox memungkinkan Anda untuk melihat pohon komponen dari React dengan menggunakan perangkat pengembang browser Anda.

React Devtools memungkinkan Anda untuk mengecek props dan state dari komponen React Anda.

Setelah meng-install React Devtools, Anda dapat mengklik kanan elemen manapun pada halaman Anda, kemudian klik “Inspect” untuk membuka perangkat pengembang dan tab React (“⚛️ Components” and “⚛️ Profiler”) akan muncul sebagai tab terakhir di sebalah kanan. Gunakan “⚛️ Components” untuk menginspeksi pohon komponen.

Walaupun demikian, perlu diperhatikan bahwa ada beberapa langkah tambahan untuk membuat aplikasi Anda bekerja dengan CodePen:

1. Masuk atau daftar dan konfirmasi email Anda (diperlukan untuk mencegah spam)
2. Klik tombol “Fork”.
3. Klik “Change View” dan pilih “Debug mode”.
4. Pada tab baru yang terbuka, devtools saat ini seharusnya memiliki tab React.

Menyelesaikan Permainan

Sekarang kita sudah memiliki blok-blok dasar untuk membangun permainan tic-tac-toe. Untuk menyelesaikan permainan ini, kita memerlukan penempatan alternatif “X” dan “O” pada papan dan kita memerlukan cara untuk menentukan pemenangnya.

Menaikkan State

Saat ini, setiap komponen Square mengurus state dari permainan. Untuk menentukan pemenang, kita akan mengurus nilai dari setiap persegi di satu lokasi.

Kita dapat memikirkan Board seharusnya cukup mengambil state setiap Square. Walaupun pendekatan ini mungkin di React, tetapi kami tidak menyarankannya karena kodenya akan sulit untuk dimengerti, rentan terhadap bugs, dan sulit untuk di-refactor. Sebagai gantinya, pendekatan terbaik untuk adalah untuk menyimpan state dari permainan pada komponen Board. Komponen Board dapat memberitahu setiap Square untuk menampilkan data dengan memberikannya melalui prop .

Untuk mengambil data dari beberapa anak atau membuat dua komponen anak berkomunikasi satu sama lain, Anda perlu mendeklarasikan state pada komponen induk. Komponen induk dapat memberikan state ke anak dengan menggunakan props; pola ini dapat membuat komponen-komponen anak tetap sinkron satu sama lain dan dengan komponen induk.

Menaikkan state ke komponen induk lazim ketika me-refactor komponen React. Mari memanfaatkan kesempatan ini untuk mencobanya.

Kita akan menambahkan konstruktor ke Board dan menginisialisasi state dari Board berisi array dengan 9 null. Sembilan nilai ini melambangkan 9 persegi:

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

Ketika kita mengisi papan permainan nanti, senarai

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

Method

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { alert('click'); }}>        {this.props.value}
      </button>
    );
  }
}

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

Awalnya, kita dari Board untuk menampilkan angka 0 sampai 8 di setiap Square. Pada langkah berbeda sebelumnya, kita menggantikan angka dengan “X” yang . Ini sebabnya Square saat ini mengabaikan prop

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { alert('click'); }}>        {this.props.value}
      </button>
    );
  }
}

Sekarang kita akan menggunakan mekanisme pengoperan prop lagi. Kita akan memodifikasi Board untuk memberi instruksi pada setiap Square untuk mengubah nilai saat ini (

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { alert('click'); }}>        {this.props.value}
      </button>
    );
  }
}

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

Lihat kode lengkap sampai tahap ini

Setiap Square akan menerima prop

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { alert('click'); }}>        {this.props.value}
      </button>
    );
  }
}

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

Selanjutnya, kita perlu mengubah perilaku Square saat diklik. Komponen Board saat ini mengatur persegi yang sedang diisi. Kita perlu memikirkan sebuah cara agar Square dapat memperbarui state di Board. Karena state dianggap sebagai private di dalam suatu komponen, kita tidak dapat mengubah state Board melalui Square secara langsung.

Untuk mempertahankan state privacy dari Board, kita akan memberikan sebuah fungsi dari Board ke Square. Fungsi ini akan dipanggil ketika komponen Square diklik. Kita akan mengubah method

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { alert('click'); }}>        {this.props.value}
      </button>
    );
  }
}

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

Catatan

Kita membagi elemen yang dikembalikan menjadi beberapa baris agar lebih mudah dibaca. Kami juga menambahkan tanda kurung sehingga JavaScript tidak menyisipkan titik koma setelah

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

21 dan merusak kode kita.

Sekarang kita memberikan dua prop dari Board ke Square:

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { alert('click'); }}>        {this.props.value}
      </button>
    );
  }
}

class Square extends React.Component {
 render() {
   return (
     <button className="square" onClick={() => alert('click')}>       {this.props.value}
     </button>
   );
 }
}

class Square extends React.Component {
 render() {
   return (
     <button className="square" onClick={() => alert('click')}>       {this.props.value}
     </button>
   );
 }
}

• Mengganti

  class Square extends React.Component {
    constructor(props) {    super(props);    this.state = {      value: null,    };  }
    render() {
      return (
        <button className="square" onClick={() => alert('click')}>
          {this.props.value}
        </button>
      );
    }
  }

  1 dengan

  class Square extends React.Component {
    constructor(props) {    super(props);    this.state = {      value: null,    };  }
    render() {
      return (
        <button className="square" onClick={() => alert('click')}>
          {this.props.value}
        </button>
      );
    }
  }

  0 pada method

  class Board extends React.Component {
    renderSquare(i) {
      return <Square value={i} />;  }
  }

  9 Square.
• Mengganti

  cd my-app
  cd src
  
  # Jika Anda menggunakan Mac atau Linux:
  rm -f *
  
  # Atau jika Anda menggunakan Windows:
  del *
  
  # Kemudian, kembali ke folder project
  cd ..

  28 dengan

  cd my-app
  cd src
  
  # Jika Anda menggunakan Mac atau Linux:
  rm -f *
  
  # Atau jika Anda menggunakan Windows:
  del *
  
  # Kemudian, kembali ke folder project
  cd ..

  29 pada method

  class Board extends React.Component {
    renderSquare(i) {
      return <Square value={i} />;  }
  }

  9 Square.
• Menghapus

  class Square extends React.Component {
   render() {
     return (
       <button className="square" onClick={() => alert('click')}>       {this.props.value}
       </button>
     );
   }
  }

  7 Square karena Square sudah tidak menyimpan state dari permainan.

Setelah perubahan tersebut, komponen Square akan terlihat seperti ini:

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

Ketika sebuah Square diklik, fungsi

class Square extends React.Component {
 render() {
   return (
     <button className="square" onClick={() => alert('click')}>       {this.props.value}
     </button>
   );
 }
}

1. Prop

   class Square extends React.Component {
    render() {
      return (
        <button className="square" onClick={() => alert('click')}>       {this.props.value}
        </button>
      );
    }
   }

   0 pada komponen built-in DOM

   class Square extends React.Component {
     render() {
       return (
         <button className="square" onClick={function() { alert('click'); }}>        {this.props.value}
         </button>
       );
     }
   }

   1 memberi tahu React untuk menyiapkan event listener klik.
2. Ketika tombol diklik, React akan memanggil event handler

   class Square extends React.Component {
    render() {
      return (
        <button className="square" onClick={() => alert('click')}>       {this.props.value}
        </button>
      );
    }
   }

   0 yang sudah didefinisikan pada method

   class Square extends React.Component {
     render() {
       return (
         <button className="square" onClick={function() { alert('click'); }}>        {this.props.value}
         </button>
       );
     }
   }

   7 Square.
3. Event handler ini memanggil

   cd my-app
   cd src
   
   # Jika Anda menggunakan Mac atau Linux:
   rm -f *
   
   # Atau jika Anda menggunakan Windows:
   del *
   
   # Kemudian, kembali ke folder project
   cd ..

   29. Prop

   class Square extends React.Component {
    render() {
      return (
        <button className="square" onClick={() => alert('click')}>       {this.props.value}
        </button>
      );
    }
   }

   0 dari Square ditentukan oleh Board.
4. Karena Board mengoperkan

   cd my-app
   cd src
   
   # Jika Anda menggunakan Mac atau Linux:
   rm -f *
   
   # Atau jika Anda menggunakan Windows:
   del *
   
   # Kemudian, kembali ke folder project
   cd ..

   39 ke Square, Square memanggil

   cd my-app
   cd src
   
   # Jika Anda menggunakan Mac atau Linux:
   rm -f *
   
   # Atau jika Anda menggunakan Windows:
   del *
   
   # Kemudian, kembali ke folder project
   cd ..

   40 ketika diklik.
5. Kita belum mendefinisikan method

   cd my-app
   cd src
   
   # Jika Anda menggunakan Mac atau Linux:
   rm -f *
   
   # Atau jika Anda menggunakan Windows:
   del *
   
   # Kemudian, kembali ke folder project
   cd ..

   41, sehingga kode kita akan crash. Ketika Anda mengeklik sebuah persegi, Anda akan melihat teks error berwarna merah yang bertuliskan semacam “this.handleClick is not a function”.

Catatan

Atribut

class Square extends React.Component {
 render() {
   return (
     <button className="square" onClick={() => alert('click')}>       {this.props.value}
     </button>
   );
 }
}

0 pada elemen DOM

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { alert('click'); }}>        {this.props.value}
      </button>
    );
  }
}

1 memiliki arti khusus untuk React karena merupakan komponen built-in. Untuk komponen komponen custom seperti Square, penamaan bersifat bebas. Kita dapat menamakan prop

class Square extends React.Component {
 render() {
   return (
     <button className="square" onClick={() => alert('click')}>       {this.props.value}
     </button>
   );
 }
}

0 Square atau

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

45 Board dengan nama lain. Namun demikian, dalam React, hal ini adalah sebuah konvensi untuk menggunakan penamaan

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

46 pada props yang merepresentasikan event dan

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

47 untuk method yang menangani event tersebut.

Ketika kita mencoba untuk mengklik salah satu Square, kita seharusnya akan mendapatkan sebuah pesan error karena kita belum mendefinisikan

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

Lihat kode lengkap sampai tahap ini

Setelah perubahan ini, kita dapat mengklik Square kembali untuk mengisinya. Tetapi, sekarang state disimpan pada komponen Board, bukan pada setiap komponen Square. Ketika state Board berubah, komponen Square akan di-render ulang secara otomatis. Dengan menyimpan state dari setiap persegi pada komponen Board, kita dapat menentukan pemenangnya pada tahap berikutnya.

Karena komponen Square tidak lagi mengatur state, komponen Square menerima nilai dari komponen Board dan memberikan informasi ke komponen Board ketika diklik. Dalam istilah React, komponen Square sekarang disebut dengan controlled components. Komponen Board memiliki kontrol penuh pada komponen Square.

Perhatikan bahwa di dalam

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

Mengapa Immutablility Itu Penting

Pada contoh kode sebelumnya, kami menyarankan Anda untuk menggunakan

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

Secara umum, ada dua pendekatan untuk mengubah data. Pendekatan pertama adalah untuk me-mutate data dengan mengubah nilai dari data secara langsung. Pendekatan kedua adalah dengan mengganti data dengan kopi baru yang memiliki perubahan yang diinginkan.

Perubahan Data dengan Mutation

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

Perubahan Data Tanpa Mutation

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

Hasil akhir dari kedua pendekatan sama tetapi dengan tidak melakukan mutate (atau mengganti data di dalamnya) secara langsung, kita mendapatkan keuntungan sebagai berikut.

Fitur Kompleks Menjadi Lebih Sederhana

Immutability membuat fitur kompleks menjadi lebih mudah untuk diimplementasikan. Nanti pada tutorial ini juga, kita akan mengimplementasikan fitur “penjelajahan waktu” yang memungkinkan kita untuk mengulas riwayat permainan tic-tac-toe kita dan “lompat kembali” ke langkah sebelumnya. Fungsionalitas ini tidak spesifik ke permainan — sebuah kemampuan untuk undo dan redo beberapa aksi adalah kebutuhan yang umum dalam sebuah aplikasi. Menghindari mutasi data memungkinkan kita untuk menyimpan riwayat permainan sebelumnya utuh dan menggunakannya kembali kemudian.

Mendeteksi Perubahan

Mendeteksi perubahan pada objek mutable sulit karena mereka dimodifikasi secara langsung. Deteksi ini membutuhkan objek mutable tersebut dibandingkan dengan beberapa kopi sebelumnya dari dirinya dan seluruh melintasi seluruh pohon objek.

Mendeteksi perubahan pada objek immutable dianggap lebih mudah. Jika objek immutable yang ditunjuk berbeda dengan objek sebelumnya, maka objeknya sudah berubah.

Menentukan Waktu Untuk Melakukan Render Ulang di React

Keuntungan utama dari immutability adalah membantu Anda untuk membuat pure component di React. Data yang immutable dapat dengan mudah memastikan apakah perubahan sudah terjadi, yang juga membantu untuk menentukan apakah komponen perlu di-render ulang.

Anda dapat mempelajari

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

Function Components

Sekarang kita akan mengubah Square menjadi function component.

Dalam React, function component adalah cara lebih mudah untuk menulis komponen yang hanya berisi method

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

Ganti kelas Square dengan fungsi berikut:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

Kita sudah mengganti

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

Lihat kode lengkap sampai saat ini

Catatan

Ketika mengubah Square menjadi function component, kita juga mengubah

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

62 menjadi lebih pendek

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

63 (perhatikan hilangnya tanda kurung pada kedua sisi). Pada kelas, kita menggunakan arrow function untuk mengakses nilai

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { alert('click'); }}>        {this.props.value}
      </button>
    );
  }
}

8 yang benar, tetapi di function component kita tidak perlu mengkhawatirkan

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { alert('click'); }}>        {this.props.value}
      </button>
    );
  }
}

8.

Mengambil Giliran

Sekarang kita perlu memperbaiki kerusakan yang cukup jelas pada permainan tic-tac-toe kita: “O” tidak dapat dituliskan ke dalam papan.

Kita akan menentukan “X” mengambil giliran pertama sebagai nilai default. Kita dapat menentukan nilai default dengan mengubah state awal pada konstruktor Board:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

Setiap pemain selesai dengan langkahnya,

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

Dengan perubahan ini, “X” dan “O” akan mendapatkan giliran setiap satu langkah selesai.

Mari mengubah teks “status” pada

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

Setelah mengubahnya, Anda akan memiliki komponen Board berikut:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

Lihat kode lengkap sampai tahap ini

Menentukan Pemenang

Sekarang kita sudah menampilkan pemain mana yang akan mendapat giliran selanjutnya, kita juga perlu menampilkan sesuatu ketika permainan sudah dimenangkan oleh salah satu pemain dan tidak ada giliran lagi. Kita dapat menentukan pemenang dengan menambahkan fungsi berikut pada akhir file:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

Ketika diberi senarai dari kesembilan persegi, fungsi ini akan mengecek pemenang dan

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

Kita akan memanggil

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

Kita dapat mengubah fungsi

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

Lihat kode lengkap sampai tahap ini

Selamat! Anda sekarang sudah memiliki permainan tic-tac-toe yang berjalan dengan baik. Anda juga telah belajar dasar-dasar dari React. Jadi Anda mungkin adalah pemenang yang sebenarnya disini.

Menambahkan Penjelajahan Waktu

Sebagai latihan terakhir, mari kita membuat permainan kita dapat “kembali” ke langkah sebelumnya pada permainan.

Menyimpan Riwayat Langkah

Jika kita melakukan mutate pada senarai

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

Tetapi, kita menggunakan

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

Kita akan menyimpan riwayat senarai

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

Sekarang kita akan menentukan komponen yang akan memiliki state

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

Menaikkan State, Lagi

Kita ingin komponen Game teratas untuk menampilkan riwayat langkah. Untuk melakukan hal tersebut, komponen Game memerlukan akses ke

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

Menempatkan state

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

Pertama, mari kita mempersiapkan state awal untuk komponen Game di dalam konstruktornya:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

Selanjutnya, kita akan membuat komponen Board menerima prop

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

class Square extends React.Component {
 render() {
   return (
     <button className="square" onClick={() => alert('click')}>       {this.props.value}
     </button>
   );
 }
}

class Square extends React.Component {
 render() {
   return (
     <button className="square" onClick={() => alert('click')}>       {this.props.value}
     </button>
   );
 }
}

• Menghapus

  class Square extends React.Component {
   render() {
     return (
       <button className="square" onClick={() => alert('click')}>       {this.props.value}
       </button>
     );
   }
  }

  7 di Board.
• Mengganti

  cd my-app
  cd src
  
  # Jika Anda menggunakan Mac atau Linux:
  rm -f *
  
  # Atau jika Anda menggunakan Windows:
  del *
  
  # Kemudian, kembali ke folder project
  cd ..

  95 dengan

  cd my-app
  cd src
  
  # Jika Anda menggunakan Mac atau Linux:
  rm -f *
  
  # Atau jika Anda menggunakan Windows:
  del *
  
  # Kemudian, kembali ke folder project
  cd ..

  96 pada

  class Square extends React.Component {
    render() {
      return (
        <button className="square" onClick={function() { alert('click'); }}>        {this.props.value}
        </button>
      );
    }
  }

  2 di Board.
• Mengganti

  cd my-app
  cd src
  
  # Jika Anda menggunakan Mac atau Linux:
  rm -f *
  
  # Atau jika Anda menggunakan Windows:
  del *
  
  # Kemudian, kembali ke folder project
  cd ..

  40 dengan

  cd my-app
  cd src
  
  # Jika Anda menggunakan Mac atau Linux:
  rm -f *
  
  # Atau jika Anda menggunakan Windows:
  del *
  
  # Kemudian, kembali ke folder project
  cd ..

  99 pada

  class Square extends React.Component {
    render() {
      return (
        <button className="square" onClick={function() { alert('click'); }}>        {this.props.value}
        </button>
      );
    }
  }

  2 di Board.

Sekarang komponen Board akan terlihat seperti ini:

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Daftar Belanja untuk {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

// Contoh Penggunaan: <ShoppingList name="Mark" />

Kita akan mengubah fungsi

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Daftar Belanja untuk {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

// Contoh Penggunaan: <ShoppingList name="Mark" />

Karena sekarang komponen Game me-render status permainan, kita dapat menghapus kode yang bersangkutan dari method

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Daftar Belanja untuk {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

// Contoh Penggunaan: <ShoppingList name="Mark" />

Terakhir, kita perlu memindahkan method

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Daftar Belanja untuk {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

// Contoh Penggunaan: <ShoppingList name="Mark" />

Catatan

Tidak seperti method

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

08 pada senarai, yang mungkin Anda lebih kenal, method

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

09 tidak melakukan mutate pada senarai sebenarnya, jadi kami lebih memilih

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

09.

Sampai tahap ini, komponen Board hanya memerlukan method

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { alert('click'); }}>        {this.props.value}
      </button>
    );
  }
}

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

Lihat kode lengkap sampai tahap ini

Menampilakan Langkah-Langkah Sebelumnya

Karena kita merekam riwayat permainan tic-tac-toe, sekarang kita dapat menampilkannya ke pemain sebagai daftar langkah sebelumnya.

Kita mengetahui sebelumnya bahwa elemen React adalah object first-class JavaScript; kita dapat mengoperkannya ke manapun pada aplikasi kita. Untuk me-render banyak elemen React, kita dapat menggunakan senarai berisi elemen React.

Di JavaScript, senarai memiliki method

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Daftar Belanja untuk {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

// Contoh Penggunaan: <ShoppingList name="Mark" />

Dengan menggunakan method

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

Mari menerapkan

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Daftar Belanja untuk {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

// Contoh Penggunaan: <ShoppingList name="Mark" />

Lihat kode lengkap sampai tahap ini

Untuk setiap langkah pada riwayat permainan tic-tac-toe, kita membuat

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { alert('click'); }}>        {this.props.value}
      </button>
    );
  }
}

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { alert('click'); }}>        {this.props.value}
      </button>
    );
  }
}

class Square extends React.Component {
 render() {
   return (
     <button className="square" onClick={() => alert('click')}>       {this.props.value}
     </button>
   );
 }
}

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

Warning: Each child in an array or iterator should have a unique “key” prop. Check the render method of “Game”.

Mari membahas makna dari peringatan tersebut.

Memilih Sebuah Key

Ketika kita me-render sebuah list, React menyimpan informasi tentang setiap elemen dalam list yang di-render. Ketika kita memperbarui sebuah list, React perlu menentukan elemen yang sudah berubah. Kita bisa saja menambahkan, menghapus, mengatur ulang, atau memperbarui elemen pada list.

Bayangkan perubahan dari

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Daftar Belanja untuk {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

// Contoh Penggunaan: <ShoppingList name="Mark" />

ke

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Daftar Belanja untuk {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

// Contoh Penggunaan: <ShoppingList name="Mark" />

Selain jumlah yang diperbarui, kemampuan baca manusia mungkin akan mengatakan bahwa kita menukar urutan Ben dan Alexa dan menyisipkan Claudia di antara Alexa dan Ben. Tetapi, React adalah program komputer dan tidak tahu intensi kita. Karena React tidak tahu intensi kita, kita perlu memberikan properti key dari setiap elemen pada list untuk membedakan setiap elemen list dari saudaranya (elemen lain dalam satu hirarki). Salah satu opsi adalah dengan menggunakan string

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Daftar Belanja untuk {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

// Contoh Penggunaan: <ShoppingList name="Mark" />

** Ketika list di-render ulang, React mengambil seluruh key dari elemen list dan mencari elemen sebelumnya yang memiliki key yang sama. Jika list saat ini memiliki key yang tidak ada sebelumnya, React akan membuat komponen. Jika list saat ini kehilangan sebuah key yang ada pada list sebelumnya, React menghapus (destroy) komponen sebelumnya. Jika ada dua key yang sama, komponen yang bersangkutan dipindahkan. Key memberi tahu React identitas dari tiap komponen, sehingga membuat React dapat mempertahankan state di setiap render ulang. Jika key dari sebuah komponen berubah, komponen akan dihapus dan dibuat ulang dengan state baru.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

Kami sangat merekomendasikan Anda untuk memberikan key yang baik ketika membuat list dinamik. Jika Anda tidak memiliki key yang baik, Anda dapat mempertimbangkan restukturisasi data Anda sehingga Anda memiliki key yang baik.

Jika tidak ada key yang diberikan, React akan menampilkan sebuah peringatan dan menggunakan indeks senarai sebagai nilai default. Menggunakan indeks senarai bermasalah ketika kita mencoba untuk mengatur ulang elemen list atau menyisipkan/menghapus elemen list. Memberikan

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

Key tidak perlu unik secara global. Key hanya perlu unik di antara komponen dan saudaranya.

Mengimplementasikan Penjelajahan Waktu

Di dalam riwayat permainan tic-tac-toe, setiap langkah sebelumnya memiliki ID unik yang bersangkutan dengan langkah tersebut: ID tersebut adalah angka terutut yang melambangkan urutan langkah. Riwayat langkah tidak pernah di atur ulang, dihapus, atau disisipi elemen lain di tengah, jadi pada kasus ini kita dapat menggunakan indeks langkah sebagai key.

Dalam method

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Daftar Belanja untuk {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

// Contoh Penggunaan: <ShoppingList name="Mark" />

Lihat kode lengkap sampai tahap ini

Mengklik salah satu tombol pada elemen list akan menghasilkan error karena method

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

Pertama, tambahkan

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class Square extends React.Component {
 render() {
   return (
     <button className="square" onClick={() => alert('click')}>       {this.props.value}
     </button>
   );
 }
}

return React.createElement('div', {className: 'shopping-list'},
  React.createElement('h1', /* ... h1 children ... */),
  React.createElement('ul', /* ... ul children ... */)
);

Kemudian, kita akan mendefinisikan method

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

cd my-app
cd src

# Jika Anda menggunakan Mac atau Linux:
rm -f *

# Atau jika Anda menggunakan Windows:
del *

# Kemudian, kembali ke folder project
cd ..

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

return React.createElement('div', {className: 'shopping-list'},
  React.createElement('h1', /* ... h1 children ... */),
  React.createElement('ul', /* ... ul children ... */)
);