Memulai dengan React Javascript Library

Jika Anda menghabiskan waktu di dunia WordPress, Anda mungkin menemukan Zac Gordon. Zac adalah guru yang antusias dan menawan yang berfokus pada Javascript di WordPress. Ia meminjam ungkapan "Learn Javascript Deeply" dari Matt Mullenweg dan ia membuatnya menjadi slogan pribadinya.

Selama beberapa tahun terakhir, Zac telah menghasilkan kelas video, konferensi online, pembicaraan langsung, dan podcast yang berfokus pada mengajari Anda cara menggunakan Javascript di WordPress.

Saya senang untuk mengatakan bahwa kami bekerja dengan Zac dalam sebuah buku, "Bereaksi Dijelaskan". React adalah library yang dipilih oleh tim WordPress untuk editor Gutenberg yang baru. Mereka tidak sendirian - baik Drupal dan Magento juga telah memilih React.

Zac men-tweet kemajuan tulisannya secara langsung di @zgordon di Twitter. Anda juga dapat mendengar Zac berbicara tentang Bereaksi di podcast pelatihan OST.

Dalam kutipan dari buku ini, Zac memberi Anda gambaran umum tentang React dan beberapa konsep kunci.

Apa itu Bereaksi?

 // Impor React dan Komponen Lainnya
impor Bereaksi dari 'bereaksi';
import { render } dari 'react-dom';
impor Header dari './Header';
import MainContent dari './MainContent';
impor Footer dari './Footer';

fungsi Aplikasi(){
  kembali (
    <div className="aplikasi">
      <Judul />
      <Konten Utama />
      <Jalan Kaki />
    </div>
 );
}

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

 impor Bereaksi dari "bereaksi";
impor Iklan dari "../Ad";
impor logo dari "../assets/logo.svg";

ekspor fungsi default Header() {
kembali (
<header className="app-header">
<Iklan />
<img src={logo} className="logo-aplikasi" alt="logo" />
<h1 className="app-title">Nama Situs</h1>
</header>
);
}

 impor Bereaksi dari 'bereaksi';
impor {
  Teks,
  Melihat,
  Tombol Vr,
} dari 'react-360';

class Slideshow meluas React.Component {
  // Kode dihapus untuk singkatnya
  kembali (
    <Lihat style={styles.wrapper}>
      <Lihat style={styles.controls}>
        <VrButton onClick={this.prevPhoto}>
          <Teks>{'Sebelumnya'}</Teks>
        </VrButton>
        <VrButton onClick={this.nextPhoto}>
         <Teks>{'Berikutnya'}</Teks>
        </VrButton>
      <Tampilan>
        <Text style={styles.title}>{current.title}</Text>
      </Tampilan>
    </Tampilan>
  );
}

Aliran Data Bereaksi Dijelaskan

React mengikuti konvensi untuk mendapatkan dan mengatur data pada titik tertinggi yang diperlukan dalam hierarki komponen agar data dapat melewati satu arah ke bawah melalui aplikasi. Mari kita lihat contoh ini dan bayangkan beberapa jenis data yang kita perlukan untuk berbagai komponen.

 fungsi Aplikasi() {
  kembali(
    <React.Fragment>
      <Judul />
      <Konten />
      <Bilah Samping />
      <Jalan Kaki />
    </React.Fragment>
  );
}

Sesuatu seperti nama situs mungkin perlu tersedia untuk <Header /> dan <Footer />. Konten utama untuk halaman tertentu harus diteruskan ke <Content />. Beberapa data widget tambahan mungkin perlu masuk ke <Sidebar />.

 fungsi Aplikasi() {
  const siteTitle = getSiteTitle();
  widget const = getWidgets();
  const mainContent = getPageContent();
  kembali(
    <React.Fragment>
      <Header siteTitle={siteTitle} />
      <Konten mainContent={mainContent} />
      <Widget bilah sisi={widget} />
      <Footer siteTitle={siteTitle} />
    </React.Fragment>
  );
}

Konvensi membuat nama atribut dan memberinya nilai adalah cara kami meneruskan data ke dalam komponen.

Sekarang <Header /> dan <Footer /> memiliki akses ke siteTitle, <Content /> memiliki akses ke mainContent, dan <Sidebar /> memiliki akses ke widget yang dibutuhkan.

Catatan penting adalah bahwa pola melewatkan data ke dalam komponen hanya melewati data satu tingkat. Komponen di dalam <Header /> tidak akan secara otomatis mendapatkan akses ke siteTitle.

 fungsi Header(alat peraga) {
  kembali(
    <tajuk>
      <p>Kita bisa melihat {props.siteTitle} di sini.</p>
      <PageHeader siteTitle={props.siteTitle} />
      <HalamanSubHeader />
    </header>
  );
}

Anda dapat melihat di sini bahwa di dalam <Header /> kita dapat memanggil props.siteTitle dan memiliki akses ke nilai yang kita berikan ke dalamnya. Namun, jika kita ingin memiliki akses ke siteTitle dalam komponen <PageHeader />, kita juga harus meneruskan informasi itu secara manual.

Ketika sebuah komponen menerima nilai sebagai prop, itu tidak boleh memodifikasinya. Alat peraga harus melewati pohon komponen sebagai data yang tidak dapat diubah. Ini memastikan bahwa setiap komponen yang mereferensikan prop, mereferensikan nilai yang sama dengan komponen induk dari turunannya.

Nilai prop hanya boleh diubah dalam komponen yang awalnya menetapkan nilai prop dan mulai meneruskannya melalui pohon komponen. Dalam kode contoh kami di atas, komponen <App /> dapat mengubah nilai siteTitle, tetapi komponen <Header /> atau <PageHeader /> tidak boleh.

Untuk memahami alur bagaimana data dinamis diperbarui dalam aplikasi React melibatkan diskusi tentang status dan bagaimana event handler dapat diteruskan sebagai props.

Negara Komponen Bereaksi Dijelaskan

Seperti yang telah kita pelajari, data mengalir ke bawah tidak berubah melalui komponen sebagai props. Data ditetapkan pada komponen tertinggi dalam pohon yang diperlukan untuk semua komponen anak-anak untuk dilewatkan kebutuhan informasi sebagai alat peraga.

Dalam beberapa kasus, data ini diterima sekali dan tidak perlu diubah. Namun dalam banyak kasus, data tersebut harus tetap dinamis dan memiliki kemampuan untuk diperbarui pada waktu tertentu dan agar pembaruan tersebut tercermin di semua komponen turunan.

Untuk melacak data yang berubah di React, kami memiliki objek status React dan serangkaian fungsi pembantu untuk memperbarui nilai status.

Berikut adalah contoh penghitung yang akan memperbarui dirinya sendiri. Nilai penghitung adalah nilai yang dinamis dalam komponen ini dan oleh karena itu merupakan contoh yang baik tentang kapan harus bergantung pada keadaan. Perhatikan bahwa untuk membuat komponen dengan status, kita harus menggunakan kelas JavaScript daripada fungsi.

 class Counter memperluas Komponen {
  negara = {
    penghitung: 0
  };

  handleCount = () => {
    this.setState({
      counter: this.state.counter + 1
    });
  };

  render() {
    kembali (
      <div>
        <h1>{this.state.counter}</h1>
        <button onClick={this.handleCount}>Hitung!!</button>
      </div>
    );
  }
}

Sekarang penting untuk dicatat bahwa status ini hanya mencakup komponen ini. Nilai status di penghitung tidak akan tersedia untuk komponen anak atau induk.

Jadi dalam contoh contoh yang lebih kompleks, seperti di bawah ini, kita harus meneruskan nilai penghitung ke bawah sebagai penyangga ke elemen anak.

 class Counter memperluas Komponen {
  negara = {
    hitung: 0
  };

  handleCount = () => {
    this.setState({
      count: this.state.count + 1
    });
  };

  render() {
    kembali (
      <div>
        <PageHeader count={this.state.count} />
        <button onClick={this.handleCount}>Hitung!!</button>
      </div>
    );
  }
}

Prop count <PageHeader /> diperbarui setiap kali kami memperbarui status di komponen <Counter />

 function PageHeader(alat peraga) {
  return <h1>{props.count}</h1>; 
}

Hal yang menyenangkan tentang pendekatan ini adalah bahwa setiap kali status diperbarui, nilai baru akan secara otomatis diturunkan ke komponen anak mana pun dengan nilai prop yang disetel ke status.

Ini memungkinkan kita untuk memiliki satu titik kebenaran untuk data dinamis. Sumber kebenaran adalah nilai dalam keadaan, dikelola dari satu komponen. Semua instance dari nilai ini dalam komponen turunan adalah nilai yang tidak dapat diubah yang diterima sebagai properti yang tidak boleh diubah di luar komponen ini.

Komponen yang muncul di atas komponen ini dalam hierarki tidak akan memiliki akses ke data ini karena hanya diturunkan melalui alat peraga. Kami melihat lagi mengapa kami mencoba mengatur dan mengelola status dari komponen yang lebih tinggi dalam hierarki sehingga data tersedia untuk semua yang membutuhkannya.

Ada beberapa pola arsitektur lain, seperti komponen tingkat tinggi dan API konteks, yang menghindari kebutuhan untuk meneruskan banyak prop secara manual melalui aplikasi Anda. Kami akan mengeksplorasi ini lebih dalam nanti. Untuk saat ini kami ingin memastikan bahwa kami memahami ikhtisar tingkat tinggi tentang cara kerja berbagai hal secara umum sebelum kami mulai mengambil pintasan.

Memperbarui Status Komponen di React

Sekarang, apa yang terjadi ketika kita ingin memicu status diperbarui dari komponen turunan?

Bayangkan, misalnya, dengan contoh di atas kita ingin memiliki komponen <Button /> daripada tombol kode keras di komponen <Counter /> utama kita? Ini sebenarnya cukup umum di aplikasi yang kompleks.

Solusi untuk ini, di dunia React, adalah dengan melewatkan fungsi event handler yang memperbarui status dengan setState sebagai prop. Kemudian dapat dipanggil dari komponen anak mana pun, tetapi tindakan akan berlangsung di komponen asli yang mengatur status dan memiliki kemampuan untuk memperbaruinya juga. Pola lain untuk ini ada, tetapi pendekatan ini adalah yang paling mendasar.

Jika Anda tidak terbiasa dengan fungsi yang lewat sebagai parameter, itu adalah JavaScript vanilla yang benar-benar valid.

Setelah status diperbarui, status tersebut akan diturunkan melalui hierarki komponen melalui alat peraga.

Berikut adalah contoh dari apa yang akan terlihat seperti.

 class Counter memperluas Komponen {
  negara = {
    hitung: 0
  };

  handleCount = () => {
    this.setState({
      count: this.state.count + 1
    });
  };

  render() {
    kembali (
      <div>
        <PageHeader count={this.state.count} />
        <Button handleCount={this.handleCount} />        
      </div>
    );
  }
}

function PageHeader( props ) { 
  kembali( 
    <h1>{props.count}</h1>
 ); 
}

Tombol fungsi ( alat peraga ) {
  kembali(
    <button onClick={props.handleCount}>Hitung!!</button>  
  );
}

Di sini kita dapat melihat contoh sederhana bagaimana React menangani aliran data. Ada satu titik kebenaran untuk data. Itu ada di set negara dan diperbarui dari satu komponen. Data dilewatkan dalam aliran satu arah melalui pohon komponen bersarang melalui alat peraga.

Jika status perlu diperbarui dari komponen selain dari tempat awalnya ditetapkan, maka event handler dapat diturunkan ke komponen anak yang diperlukan sebagai prop. Ini membuat data tidak berubah dan mengalir satu arah karena meskipun komponen turunan memicu perubahan, perubahan itu terjadi lebih tinggi di komponen asli.

Saat kita menetapkan nilai prop ke sesuatu dari status, seperti di bawah ini, nilai prop itu akan otomatis diperbarui setiap kali status berubah.

 <PageHeader counter={this.state.count} />

Komponen turunan lainnya yang mereferensikan nilai prop itu juga akan menerima pembaruan secara otomatis. Inilah keindahan aliran data di React.

Ini bisa memakan waktu untuk membiasakan diri tergantung pada bagaimana Anda mendekati masalah seperti ini dengan JavaScript di masa lalu. Namun, ini semua harus menjadi titik awal yang baik bagi kita untuk dapat menggali lebih dalam untuk menjelaskan React.