Yuk! Belajar React.js Hanya dalam 5 Menit!

  Tutorial ini akan memberimu pemahaman mendasar dari React.js melalui membangun sebuah aplikasi yang sangat sederhana. Penulis akan meninggalkan semua yang dirasa tidak inti. Jika kamu menyukai gaya pengajaran dari Penulis, dan ingin mendapatkan notifikasi ketika Tim dari Penulis meluncurkan kursus gratis React.js lebih lanjut, kamu bisa menuliskan emailmu disini.

Pengaturan

Ketika kamu akan memulai dengan React, kamu harus menggunakan pengaturan yang paling sesederhana mungkin: Sebuah file HTML yang mengimpor library React dan ReactDOM menggunakan tag skrip, seperti ini: Tim Penulis juga mengimpor Babel, karena React menggunakan sesuatu yang disebut JSX untuk menulis markup. Kami perlu mengubah JSX ini menjadi JavaScript biasa, sehingga browser dapat memahaminya. Ada dua hal yang perlu kamu perhatikan dari barisan code diatas:

1. <div> dengan id dari #root. Ini adalah titik masuk untuk aplikasi kita. Di sinilah seluruh aplikasi akan hidup.
2. Tag <script type="text/babel"> adalah dimana kita akan menuliskan code React.js kita.

Jika kamu ingin melakukan eksperiman dengan code tersebut, cek tautan berikut: Scrimba Playground.

Komponen

Semua yang ada di dalam React disebut komponen, dan komponen-komponen itu biasanya berupa kelas JavaScript. Kamu membuat komponen dengan memperluas kelas React-Component. Mari sekarang kita buat komponen yang disebut Hello. Kemudian kamu mendefinisikan metode untuk komponen. Dalam contoh ini, kita hanya memiliki satu metode dan metode itu disebut render (). Di dalam render () kamu akan mengembalikan deskripsi dari apa yang kamu inginkan untuk React gambarkan di halaman. Dalam kasus di atas, kita hanya ingin menampilkan tag h1 dengan teks Hello world! didalamnya. Agar aplikasi kecil kita ini dapat ditampilkan di layar, maka jangan lupa gunakan ReactDOM.render (): Jadi inilah dimana kita menghubungkan komponen Hello milik kita dengan titik masuk untuk aplikasi (<div id="root"></div>). Hasilnya adalah seperti di bawah ini: Sintaks HTML'ish yang baru kita lihat (<h1> dan <Hello />) adalah kode JSX yang Penulis sebutkan sebelumnya. Ini sebenarnya bukan HTML, meskipun apa yang kamu tulis di sana tidak berakhir sebagai tag HTML di DOM. Langkah selanjutnya adalah membuat aplikasi ini menangani data.

Handling Data

Ada dua jenis data dalam React, yakni props dan state. Perbedaan antara keduanya agak sulit untuk dipahami di awal, jadi jangan khawatir jika kamu merasa agak kebingungan. Ini akan menjadi lebih mudah setelah kamu mulai bekerja dengan mereka. Perbedaan utamanya adalah state bersifat pribadi dan dapat diubah dari dalam komponen itu sendiri, sedangkan props bersifat eksternal dan tidak dikontrol oleh komponen itu sendiri melainkan diturunkan dari komponen yang lebih tinggi dari hierarki, yang juga mengontrol data. Sebuah komponen dapat mengubah state internalnya secara langsung, namun tidak untuk mengubah props secara langsung. Mari melihat props lebih dekat terlebih dulu.

Props

Komponen Hello milik kita sangat statis, dan itu membuat pesan yang sama terlepas. Sebagian besar dari React adalah reusability, yang berarti kemampuan untuk menulis komponen sekali, dan kemudian menggunakannya kembali dalam kasus penggunaan yang berbeda, misalnya, untuk menampilkan pesan yang berbeda. Untuk mencapai jenis penggunaan kembali ini, kami akan menambahkan props. Beginilah cara kamu mengirimkan props ke komponen (disorot dalam huruf tebal): Props ini disebut message dan mempunyai nilai "my friend". Kita dapat mengakses props ini di dalam komponen Hello dengan mereferensikan this.props.message, seperti dibawah ini: Hasilnya ditampilkan pada layar di basan ini: Alasan kita menuliskan {this.props.message} dengan kurung keriting adalah karena kita harus memberitahu JSX bahwa kita ingin menambahkan sebuah ekspresi JavaScript yang disebut escaping. Jadi sekarang kita telah memiliki komponen yang dapat digunakan kembali dan dapat membuat pesan apa pun yang diinginkan di halaman. Namun, bagaimana jika kita ingin komponen tersebut dapat mengubah datanya sendiri? Maka kita harus menggunakan state sebagai gantinya!

State

Cara lain untuk menyimpan data dalam React adalah dalam state. State dapat diubah langsung oleh komponen, tidak seperti props. Jadi jika kamu ingin data di aplikasimu berubah - misalnya berdasarkan interaksi pengguna - maka data harus disimpan dalam state di suatu tempat di aplikasi.

Inisialisasi State

Untuk menginisialisasi state, cukup atur this.state dalam constructor( ) di kelas. State kita adalah sebuah objek yang dalam kasus kita ini hanya mempunyai satu kunci yang disebut message.  Sebelum kita mengatur state, kita harus memanggil super( ) di dalam constructor. Hal ini karena this tidak terinisialisasi sebelum super ( ) dipanggil. 

Mengubah State

Untuk memodifikasi state, cukup panggil this.setState(). Kita akan melakukan ini di dalam metode yang akan disebut updateMessage. Catatan: Untuk membuat ini berfungsi, kita juga harus mengikat kata kunci this ke metode updateMessage. Kalau tidak, kita tidak akan bisa mengakses this dalam metode. Cara selanjutnya adalah membuat sebuah button untuk klik, jadi kita dapat memicu metode updateMessage( ). Nah, sekarang mari kita tambahkan sebuah button ke metode render( ): Di sini, kita mengaitkan seorang pendengar acara ke button, mendengarkan acara onClick. Ketika ini dipicu, kita memanggil metode updateMessage. Berikut seluruh komponennya: Metode updateMessage kemudian memanggil this.setState( ) yang mana mengubah nilai this.state.message. Dan ketika kita mengklik button, inilah yang akan ditampilkan: Selamat! Sekarang kamu mempunyai pemahaman yang amat mendasar mengenai konsep paling penting dalam React! Artikel ini merupakan repost dari tulisan Per Harad Borgen yang dipublikasikan di freeCodeCamp. Baca artikel sumber.