react js cara mudah – menambah event listener onchange pada input

sebelumnya kita sudah tau nih caranya memulai untuk menggunakan react js  , karena tutorial ini bersambung maka diharap teman2 sudah membaca materi sebelumnya. Oh ya apakah kawan2 sudah tau bahwa react js dapat memiliki state dan props di setiap komponennya ? saya akan jelaskan sedikit mengenai state dan props. State adalah data – data yang dapat disimpan dan diubah pada komponen misalnya kita mau punya data nama yang akan ditampilkan di atas kolom cari. kita cukup menaruh kode berikut pada component kita, misalnya pada file Aplikasi.js

nama adalah nama dari statenya, setNama adalah function untuk merubah datanya. Lalu kita import useState nya jangan lupa

nah, kira jadi seperti ini kode kita

jika sudah ditambahkan state maka kita bisa menggunakannya sesuka kita, misal kita mau tampilkan di atas kolom cari maka tinggal kita panggil seperti ini

 

maka sekarang, web kita akan menampilkan data dari statenya

lalu bagaimana dengan props ? props adalah sebuah cara untuk kita dapat berbagi data atau function dengan komponen lain. props ini akan memudahkan kita karena web kita terdiri dari banyak komponen. namun props memiliki keterbatasan yaitu hanya bisa dikirim oleh parent dan diterima oleh children. apa lagi itu ?? dalam web kita parentnya adalah komponen <Aplikasi /> dan children nya adalah semua yang ada dalam function return( ) yaitu <KolomCari /> <TombolCari /> <TableHasil />  mereka semua adalah anak kesayangan dari ibuk nya yaitu si komponen <Aplikasi />. misal <TombolCari /> mau pake data nama dari <Aplikasi /> maka si <Aplikasi /> harus mengirimkan props kepada <TombolCari /> dan si <TombolCari /> harus menerima propsnya. jadi kayak gini

penamaan props itu bebas, kebetulan saya pakai dataNama, nanti komponen kita jadi gini

seorang ibu telah memberi dan seorang anak tidak akan mampu membalas kebaikan ibu. seperti itulah props hanya bisa dikirim dari parent ke children, tidak sebaliknya. selanjutnya tinggal kita tangkap itu props yang dikirim di komponen <TombolCari />

kalau sudah ditangkap, kita bisa gunakan sesuka kita deh. misal mau kita tampilkan pada tombolnya hehe ini misalnya saja. maka akan jadi seperti ini kodenya

kira2 seperti apa tampilan web kita? haha ya tombolnya akan berubah sesuai data dari state nama milik komponen <Aplikasi /> .

ok kita sudah paham apa itu state dan props, pahami lagi karena akan sangat penting disaat kita membuat aplikasi yang cukup kompleks.

baiklah sekarang kita mulai tambahkan onchange event listener pada input text atau kolom pencarian milik komponen <KolomCari /> 

gitu kira2 salah satu caranya untuk menambahkan event listener onchange, ada beberapa cara lain tapi kita pakai yang umum saja. saat ini masih kosong function nya, btw saya pakai es6  arrow function untuk membuat function nya. kita bisa coba mengecek apakah function nya berfungsi. bisa dengan lewat console.log( ) . kalau pakai chrome dan firefox, silahkan pencet F12 untuk melihat console nya. sekarang kita ubah dikit kodenya jadi

silahkan di save dan dicoba. harusnya sudah ada di console apapun yang kita ketik di kolom cari. baiklah, sekarang saya mau apapun yang saya ketik akan merubah state nama dari komponen <Aplikasi /> , dengan kata lain saya mau panggil itu setNama miliknya si komponen <Aplikasi /> pada komponen <KolomCari />. gimana gan caranya ???

yak. betul sekali kita bisa kirim function setNama milik komponen <Aplikasi /> kepada komponen <KolomCari />, oke mari kita kirim seperti ini

lalu kita tangkap props nya di komponen <KolomCari />

daaaaan… apapun yang kita ketik akan merubah state, dan semua komponen yang memakai state nya akan terupdate otomatis.. wow… kereeeen.

 

React js cara mudah, menambahkan bulma css pada react project

jika kita menyukai bulma css, cukup mudah untuk menambahkan bulma css pada aplikasi create-react-app kita. ada beberapa cara diantaranya :

menggunakan npm

npm install bulma

selanjutnya tinggal import saja pada file index.js seperti berikut :

import 'bulma/css/bulma.css'

atau

menggunakan cdn

tinggal copy script berikut pada bagian, file index.html, jangan lupa dihapus spasi sebelum link

< link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.css ” >

kalau mau menggunakan icon tinggal copy paste script berikut pada bagian, file index.html , jangan lupa dihapus spasi sebelum script

< script defer src=”https://use.fontawesome.com/releases/v5.3.1/js/all.js”></script >

dan bulma pun bisa digunakan pada komponen kita, misalya
< button className='button'>Cari</ button>

, jangan lupa dihapus spasi sebelum button

react js cara mudah, komponen sederhana

mohon maaf banget saya baru sharing lagi,

berhubung saat ini saya banyak project menggunakan react js, mari kita sama-sama belajar react js. Gampangnya react js adalah framework yang digunakan untuk membuat website menggunakan javascript. kenapa sih banyak yang pake react js sekarang ini? ya karena lebih mudah ketika harus membuat website yang membutuhkan banyak feature.

untuk memahami react js kita bisa membayangkan sebuah web itu seperti ini misalnya

setelah kita lihat gambar tersebut, kira – kira kita sudah tahu komponen apa saja yang akan kita buat :

1. aplikasi (ibuknya komponen yg meliputi semua komponen)
2. kolom cari (kolom untuk input kata kunci yang sesuai)
3. tombol cari (tombol ketika di klik maka akan memanggil sebuah fungsi/method yg akan melakukan pencarian)
4. sebuah tabel yang akan menampilkan hasil pencarian.

secara sederhana seperti itu pembagian komponen yang kita butuhkan. Lalu kenapa kok kita harus bagi jadi beberapa komponen? karena react js membuat kita bisa memisahkan komponen untuk dibuat satu per satu dulu sehingga nantinya dapat digunakan kembali tanpa harus menulis ulang. ok anggap lah kita sudah bikin komponennya menjadi :

1. <Aplikasi />
2. <KolomCari />
3. <TombolCari />
4. <TabelHasil />

jangan dipikirin dulu dalemnya gimana, yang jelas kita sudah bikin komponennya jadi 4 seperti itu. Lalu kita bisa merangkai komponennya menjadi sebuah aplikasi web sebagai berikut :

gimana ? sudah kebayang kan gimana react js bikin kita jadi berfikir bahwa website terdiri dari komponen2 yang disusun sedemikian rupa. nanti kita akan lanjut pelajari gimana cara bikin masing – masing komponennya. jika sudah dibikin tinggal kita import – import aja dimanapun kita mau, misal <TabelHasil/>  bisa dipakai dimana saja kita mau, tidak perlu buat ulang.

ok mari bersiap kita mulai perjalanan kita bersama react js. yes!!!!!!!!

Editor

editor bebas, kalau saya pakai Visual Studio Code

Install node js

silahkan install dulu bagi yang belum install.

create-react-app

create-react-app  menurut saya adalah cara paling mudah untuk memulai sebuah project aplikasi react js. bisa kita ikuti panduan installnya di link yang saya berikan, tinggal buka command line lalu eksekusi satu per satu kode berikut :

npx create-react-app react-pertamaku
cd react-pertamaku
npm start

setelah itu kita sudah bisa melihat aplikasi react js kita running di server locahost:3000  defaultnya.

silahkan buka folder project kita dengan code editor pilihanmu. kira – kira nanti kita punya folder project seperti berikut ini :

react-pertamaku
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

yang perlu kita buka adalah file App.js. nah silahkan anda edit dan simpan, servernya akan otomatis melakukan update lalu pagenya akan reload dan perubahan pun terlihat. lalu kita buka file index.js dan terlihat bahwa ada syntax <App/>, seperti yang kita pelajari sebelumnya bahwa web kita dibagi menjadi beberapa komponen dan <App/> adalah komponen pertama kita. komponen tersebut dibuat dengan menggunakan html biasa.

kita bisa lihat bahwa kodenya adalah javascript dan juga terdapat beberapa sytax html dan tim facebook menyebutnya jsx , btw react js adalah buatan developer dari facebook.  setelah kita buat App.js nya maka kita dapat memanggilnya dimana saja kita mau, contohnya di index.js.

ok lanjut, kita lihat di file index.js terdapat syntax

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

apa tuh maksudnya ? kita harus buka file public/index.html 

jadi, secara sederhana komponen <App /> yg kita buat itu mau kita tempel di dalam html tag yang ID nya adalah ‘root’.  iya cuma gitu aja maksudnya. kita bebas mau ditempel dimana termasuk jidat hehehe jadi nanti gini :

ReactDOM.render(<App />, document.getElementById(‘jidat’));

dan file index.html jangan lupa dirubah jadi

yak mantap hahaha, hehe kita balikin lagi aja ke root biar agak propesional gitu.

nah sekarang nih kita perlu bikin komponennya satu – satu dimulai dari me-rename App.js jadi Aplikasi.js  biar sesuai seperti yang mau kita bikin tapi bebas kok boleh juga pake yang bawaannya. lalu kita buka Aplikasi.js dan ganti jadi seperti ini

import React from ‘react’ adalah cara kita menjelaskan kepada browser bahwa kita akan menggunakan reactjs sebagai frameworknya dan yang kita bikin adalah react komponen, bukan html biasa ( BHB ). apa itu BHB ? ah sudahlah tidak penting hehehe.

selanjutnya adalah import ‘./App.css’ yang merupakan salah satu cara kita untuk memberi style atau sentuhan artistik pada website menggunakan css, ya seperti css pada umumnya. ada beberapa cara lain yang juga keren tapi kita sedang tidak berfokus pada hal tersebut. yang penting kita paham dulu dasar – dasarnya.

code yang kita ketik barusan ini disebut sebagai functional component yaitu sebuah react komponen yang dibuat dari function. ada juga class component  yang sebenarnya sama saja hanya saja menulisnya menggunakan paradigma OOP bukan Functional Programming. menurut saya functional component sudah ok jadi jangan dulu sibuk belajar class component. ok kita biarin dulu itu komponen Aplikasi nya kosong melongpong cuma

doang. oh iya maksudnya return ( ) itu adalah komponen yang akan ditampilkan di browser. kode html apapun yang mau ditampilkan harus diketik di dalam return ( ).  terkhir kita harus export komponen kita dengan export default Aplikasi.

kita juga harus edit file index.js kita sesuai dengan perubahan kita. cukup ganti bagian import nya dan juga bagian <App /> menjadi <Aplikasi />.

membuat komponen KolomCari

kita buat komponen lainnya yaitu KolomCari dengan cara membuat file baru dengan nama KolomCari.jsx  atau KolomCari.js sama saja saat ini dan teman2 bisa cari tahu sendiri bedanya. seperti ini kira – kira

lanjutkan juga komponen lain nya ya….

TombolCari

 

TabelHasil

 

wah selamat anda sudah membuat semua komponennya… hehe masih sederhana tapi yaaa oke lah untuk pemula. selanjutnya adalah kita akan import komponen2 tersebut kedalam induknya komponen yaitu Aplikasi.js seperti ini

sudah jadi aplikasi react kita yang sangat sederhana ini. silahkan di save semuanya dan lihat tampilannya di browser. seharusnya seperti ini

lain kali kita lanjut lagi belajarnya, silahkan pelajari lagi di link berikut agar lebih mendalaminya :

react website 

selanjutnya kita akan menambahkan event listener pada text input agar kita bisa ambil value nya sebagai kata kunci pencarian. silahkan menuju ke materi selanjutnya menambah event listener onchange pada input