Dapatkan reaksi kepala Anda dengan lima faktor ini

Belajar bereaksi, perpustakaan JavaScript untuk membuat antarmuka pengguna dari Facebook dan Instagram tampaknya gila sampai Anda memberikannya kesempatan. Hal-hal menjadi lebih mudah ketika Anda memahami lima konsep utama. Saya menyebutnya lima shift pikiran ini. Mereka adalah: komponen, jsx, status, metode siklus hidup dan aliran data satu arah.

01. Komponen

Komponen adalah potongan kode yang dapat digabungkan untuk memberikan fungsionalitas yang lebih kompleks. Ketika Anda membagi aplikasi Anda menjadi komponen, itu membuatnya lebih mudah untuk memperbarui dan memelihara. Dalam bereaksi, komponen bahkan lebih penting: Anda tidak hanya memprogramnya, Anda mendesain aplikasi Anda dengan memikirkan bagaimana komponen ini cocok bersama.

Mari kita gunakan antarmuka di bawah ini sebagai contoh. Anda dapat melihat bagaimana hal itu dapat dibagi menjadi tiga bagian: kotak untuk memesan janji baru, tampilan daftar yang memungkinkan Anda melihat janji temu yang ada, dan kotak pencarian untuk melihat melalui mereka.

Dalam HTML, Anda mungkin memikirkan aplikasi ini sebagai serangkaian elemen, seperti ini:

 & lt; div id = "Petappointments" & GT;
  & lt; div class = "addappointments" & gt; & lt; / div & gt;
  & lt; div class = "searchappointments" & gt; & lt; / div & gt;
  & lt; div class = "ListAppointments" & gt; & lt; / div & gt;
& lt; / div & gt; 

Dan itu juga apa yang akan Anda lakukan dalam bereaksi. Anda membuat satu tag (& lt; div id = "Petappointments" & gt;) yang menyebut komponen petapapitments, yang kemudian memanggil sub-komponen lain sesuai kebutuhan. Untuk melewati objek konfigurasi seperti ini, Anda menggunakan metode CreateClass dari objek reaksi.

 var mainterinter = react.createclass ({{
  Render: Fungsi () {
    kembali (
      & lt; div classname = "Antarmuka" & gt;
        & lt; addappointment / & gt;
        & lt; searchappointments / & gt;
        & lt; listappointments / & gt;
      & lt; / div & gt;
    )
  } // render
}); // Maininterface.

Reaktom.render (
  & lt; Maininterface / & gt;,
  DOKUMEN.GETELEMENTBYID ('PETAPAppointments')
); // render 

Ada dua metode render. Di kelas maininterface, kami mendeklarasikan item yang akan dikirim ke browser dan reaksi elemen dalam HTML Anda dengan kode reaksi. Kami kemudian akan menulis kode yang menangani masing-masing dari tiga sub-komponen kami.

Komponen membuat kode mudah untuk ditulis dan dipelihara. Setelah Anda belajar memikirkan dan mengatur aplikasi Anda sebagai serangkaian komponen yang dapat dikomposit, membangun aplikasi kompleks menjadi lebih sederhana.

02. JSX.

JSX. Mungkin salah satu pergeseran pikiran terbesar dan salah satu alasan mengapa perpustakaan itu tampak begitu aneh. JSX adalah ekstensi untuk JavaScript yang memungkinkan Anda menggabungkan kode XML dengan JavaScript.

Ini semacam apa yang terjadi dengan bahasa template seperti kumis, yang memungkinkan Anda memasukkan JavaScript dalam HTML. Tetapi JSX diterjemahkan (ditranspungkan) ke dalam Javascript. Jadi Anda tidak hanya membangun templat tetapi struktur yang dikonversi menjadi serangkaian pernyataan JavaScript. Tidak seperti bahasa template, itu tidak harus ditafsirkan saat runtime. Mari kita lihat contoh.

 & lt; li classname = "media pet-item" tombol = {index} & gt;
  & lt; Div ClassName = "Info-PET-BODY" & GT;
    & lt; div classname = "Pet-head" & gt;
      & lt; span classname = "pet-nama" & gt; {this.state.data [index] .petname} & lt; / gt;
      & lt; span classname = "apt-date pull-right" & gt; {this.state.data [index] .aptdate} & lt; / gt;
    & lt; / div & gt;
    & lt; div classname = "nama pemilik" & gt; & lt; span classname = "item label" & gt; pemilik: & lt; / gt;
    {this.state.data [index ].OnnownNAME} & lt; / div & gt;
    & lt; div classname = "apt-notes" & gt; {this.state.data [indeks] .aptNotes} & lt; / div & gt;
  & lt; / div & gt;
& lt; / li & gt; 

Kita dapat menggunakan kode ini untuk menampilkan janji temu kita. Ini terasa sangat seperti menggunakan bahasa templating biasa, jadi selain mempelajari beberapa idiosyrrasi kecil tentang JSX, Anda dapat mengambilnya dengan cepat.

Bagian aneh tentang menggunakan JSX tidak mempelajari bahasa itu sendiri; Itu melupakan fakta bahwa menempatkan HTML dalam kode JavaScript Anda sepertinya ... Ya, salah. Tapi sungguh menyenangkan memiliki semua kode untuk setiap komponen yang tinggal di satu tempat.

03. State.

Pergeseran pikiran ketiga adalah belajar bekerja dengan negara dalam bereaksi. Negara disimpan pada komponen paling atas dari aplikasi Anda dan mengelola apa yang terjadi di aplikasi Anda. Ada metode khusus yang disebut GetinitialState di mana Anda dapat mengkonfigurasi apa yang terjadi ketika aplikasi Anda dimulai.

Dalam aplikasi sampel saya, keadaan awal diatur seperti ini:

 var mainterinter = react.createclass ({{
  getinitialstate: fungsi () {
    kembali {
      APTBODIBODIBEL: SALAH,
      PesananBE: 'Petname',
      PesananDIR: 'ASC',
      QueryText: ''
    } // kembali
  }, // getinitialstate 

Sepertinya saya sedang menyiapkan variabel global untuk aplikasi saya tetapi memodifikasi variabel-variabel ini sebenarnya mengontrol bagaimana komponen render. Jika sesuatu di aplikasi saya mengubah nilai variabel, komponen saya akan render ulang. Jika nilai orderby berubah, misalnya, daftar janji akan menyusun ulang.

Ketika Anda menulis komponen, mudah untuk memodifikasi keadaan aplikasi. Komponen penulisan lebih mudah karena Anda hanya fokus pada apa yang dilakukan komponen. Ini adalah komponen daftar akhir aplikasi saya:

 var react = membutuhkan ('react');
var aptlist = react.createclass ({

  Handledelete: Fungsi () {
    this.props.ondelete (this.props.whichitem)
  },

  Render: Fungsi () {
    kembali(
      & lt; li classname = "media pet-item" & gt;
        & lt; div classname = "kiri media" & gt;
          & lt; tombol classname = "pet-delete btn btn-xs btn-danger" onclick = {this.handleelelete} & gt;
          & lt; span classname = "glyphicon glyphicon-hapus" & gt; & lt; / span & gt; & lt; / gt;
        & lt; / div & gt;
        & lt; Div ClassName = "Info-PET-BODY" & GT;
          & lt; div classname = "Pet-head" & gt;
            & lt; span classname = "pet-nama" & gt; {this.props.singleitem.petname} & lt; / span & gt;
            & lt; span classname = "apt-date pull-right" & gt; {this.props.singleitem.aptdate} & lt; / rentang & gt;
          & lt; / div & gt;
          & lt; div classname = "nama pemilik" & gt; & lt; span classname = "item label" & gt; pemilik: & lt; / gt;
          {this.props.singleitem.ownname} & lt; / div & gt;
          & lt; div classname = "apt-notes" & gt; {this.props.singleitem.aptnotes} & lt; / div & gt;
        & lt; / div & gt;
      & lt; / li & gt;
    ) // kembali
  } // render
}); // aptlist.

module.exports = aptlist; 

Komponen hanya berkaitan dengan dua hal. Pertama, menunjukkan daftar janji berdasarkan keadaan saat ini. Kedua, menangani klik pada salah satu Red 'X's.

Mengklik pada 'X' akan mendorong perubahan ke keadaan aplikasi, menyebabkan komponen ini menjadi render. Saya tidak khawatir tentang apa yang terjadi dengan data, cukup dengan bagaimana data saat ini akan ditampilkan.

Komponen daftar hanya berkaitan dengan daftar hal-hal. Tidak perlu khawatir tentang apa yang terjadi di tempat lain. Ini adalah cara yang brilian untuk membangun aplikasi dan begitu Anda memahami itu, Anda akan melihat mengapa itu adalah cara yang lebih unggul untuk kode.

04. Aliran data satu arah

Pergeseran pikiran berikutnya adalah belajar untuk menyukai aliran data satu arah. Dalam bereaksi, keadaan aplikasi Anda berada di komponen paling atas. Ketika Anda perlu mengubahnya dalam sub-komponen, Anda membuat referensi ke komponen paling atas dan menanganinya di sana. Ini agak sulit untuk terbiasa. Berikut ini contohnya:

 var react = membutuhkan ('react');
var aptlist = react.createclass ({
  Handledelete: Fungsi () {
    this.props.ondelete (this.props.whichitem)
  },
  Render: Fungsi () {
    kembali(
      & lt; li classname = "media pet-item" & gt;
        & lt; div classname = "kiri media" & gt;
          & lt; tombol classname = "pet-delete btn btn-xs btn-danger" onclick = {this.handleelelete} & gt;
          & lt; span classname = "glyphicon glyphicon-hapus" & gt; & lt; / span & gt; & lt; / gt;
        & lt; / div & gt;
      & lt; / li & gt;
      ...
    ) // kembali
  } // render
}); // aptlist.

module.exports = aptlist; 

Ini adalah versi modul yang disederhanakan yang membuat daftar janji temu. Daftar kami memiliki tombol hapus, yang kami kelola melalui handler acara. Ini adalah versi reaksi khusus onClick. Handler event kami memanggil fungsi yang ditangani, yang lokal ke sub-modul. Fungsi lokal kami hanya menciptakan referensi ke fungsi lain dalam objek yang disebut alat peraga. Alat peraga adalah bagaimana modul utama berkomunikasi dengan sub-modul.

Dalam modul utama Anda akan membuat atribut ke tag yang Anda gunakan untuk mewakili modul. Sepertinya hanya melewati atribut ke tag HTML:

 & lt; aptlist Ondelete = {this.deleteemessage} / & gt; 

Dan kemudian Anda membuat metode Anda sendiri dalam komponen utama untuk menangani perubahan ke keadaan aplikasi. Menjaga keadaan di modul utama membantu membuat sub-modul Anda lebih efisien. Ini juga lebih mudah untuk mempertahankan kode karena sebagian besar tindakan terjadi di satu tempat.

05. Metode siklus hidup

Salah satu hal terbaik tentang bereaksi adalah cara mengelola rendering modul Anda. Modul Anda tidak perlu khawatir tentang memperbarui DOM, hanya tentang bereaksi terhadap keadaan aplikasi Anda. Ketika keadaan berubah, bereaksi ulang render komponen aplikasi Anda. Ini melakukan ini dengan membuat versi DOM sendiri yang disebut Virtual DOM.

Tetapi kadang-kadang Anda harus dapat melakukan hal-hal sebagai tanggapan terhadap LifeCyle Rendering. Masukkan metode siklus hidup. Ini adalah cara untuk bertanya untuk menangani tugas pada titik yang berbeda dalam eksekusi aplikasi.

Ada, misalnya, metode LifeCyle yang memungkinkan Anda memuat data eksternal melalui permintaan AJAX:

 ComponentDidMount: Fungsi () {
  Ini.serverrequest = $ .get ('./ js / data.json', fungsi (hasil) {
    var tempapts = hasil;
    ini.setstate ({
      MyAppointments: Tempapts.
    }); // setstate.
  } .bind (ini));
}, // komponendidmount 

Di sini, komponendidmount memungkinkan Anda untuk menjalankan sesuatu setelah rendering awal selesai. Ini adalah tempat yang bagus untuk memuat konten AJAX, mengatur timer dan sebagainya. Ada banyak metode siklus hidup lainnya yang memungkinkan Anda menjebak eksekusi aplikasi pada titik yang berbeda. Mereka diperlukan karena React's Virtual Dom, yang merupakan pengisi daya yang hebat ketika membangun aplikasi.

Memikirkan kembali bereaksi

React membutuhkan pemikiran ulang tentang cara Anda bekerja dengan aplikasi web tetapi jika Anda fokus pada penguasaan manfaat dari lima pergeseran pikiran ini, Anda akan dengan cepat mempelajarinya mengapa perpustakaan menjadi sangat populer dan merupakan cara yang fantastis untuk membangun antarmuka.

Artikel ini - diilustrasikan oleh Ray Villalobos - awalnya diterbitkan dalam menerbitkan 286 NET, majalah terlaris di dunia untuk desainer dan pengembang web. Berlangganan ke NET. .

Ingin selanjutnya memperbaiki keterampilan reaksi Anda?

Jika Anda tertarik untuk belajar lebih banyak tentang bereaksi, pastikan Anda telah mengambil tiket Anda Hasilkan London dari 19-21 September 2018 . Setelah mendirikan React Academy untuk mengajar bereaksi di seluruh dunia dan diluncurkan sizzy.co.co. dan ok-google.io. , Kristijan Ristovski akan mengirimkan lokakarya - belajar bagaimana berpikir dalam bereaksi - di mana ia akan mengeksplorasi reaksi praktik terbaik dan mengajarkan Anda solusi untuk masalah nyata yang mungkin Anda temui dalam proses membangun aplikasi.

Hasilkan London berlangsung dari 19-21 September 2018. Dapatkan tiket Anda sekarang .

Artikel terkait:

• 10 Tips Ahli ReactJS yang perlu Anda ketahui hari ini
• Buat aplikasi dasbor dengan bereaksi
• Membangun pemutar musik sederhana dengan bereaksi