Membuat Efek Warna Bunglon Dengan React.js

21/01/2017    Reza Indra    1814     Website

Kali ini kita akan membuat efek warna bunglon dengan React.js. Walaupun hanya sekedar iseng belaka, namun tutorial ini sangat berguna untuk mengasah logika kalian. Sebelum kita mulai, saya akan menjelaskan apa maksud dari efek warna bunglon? Maksudnya adalah kita akan mengubah warna pada suatu Div ketika kita mengklik sebuah tombol. Berikut adalah hasil yang kita akan buat sekarang.

Membuat Efek Warna Bunglon Dengan React.jsMembuat Efek Warna Bunglon Dengan React.js

Oke! kira-kira seperti itu.

Dalam project React.js ini akan akan menggunakan React.js CDN, silahkan teman-teman copy link CDN dari website React.js atau dari https://cdnjs.com/, selain React.js CDN kita juga wajib memasukan Babel CDN. Letakan link CDN pada tag head.

Sekarang silahkan teman-teman buat div#root sebagai tempat untuk menampilkan rendering React.js.

Selanjutnya buatlah tag script[type="text/babel"] dan buatlah class React.js dan beberapa method yang dibutuhkan.

Di dalam method getInitialState, buatlah state colors dan colorSelected.

Di dalam state colors, kita masukan warna-warna background yang akan kita tampilkan sebagai value dari properti background-color.

Selanjutnya pada method render, tambahkan perintah-perintah seperti berikut.

Var buttonStyle, divStyle dan h1Style adalah css untuk setiap tag HTML. Perhatikan variable divStyle (backgroundColor), kita tampilkan state colorSelected yang akan berubah-ubah ketika mengklik tombol Change Color. Kemudian pada button, di dalam atribut onClick saya masukan this.handleButton, yakni method yang akan menghandle semua proses perubahan warna.

Berikut adalah isi method handleButton.

Var indexColor adalah kita menemukan index array dari warna yang dipilih, sesuai dengan value dari state colorSelected. Kemudian di bawahnya ambil value dari colors (array), indexColor akan ditambah 1 setiap kali diklik. Jika index arraynya melewati batas (4) maka akan kembali lagi ke 0 (red). Setelah itu kita langsung lakukan set state.

Kalau sudah silahkan jalankan pada browser. Selamat mencoba!

AJAX, Browser, jQuery, Javascript

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More