Mengenal Components di React.js dengan ES6


Artikel ini di tulis di hari labour day (Hari Buruh Internasional). Para buruh gw harap demo yang tertib jangan anarkis, jangan minta yang ga masuk akal, jangan kredit motor, mobil, panci, etc. sebenernya ga terlalu suka dengan aksi demo kecuali demo masak :D


Ini adalah seri ke tiga dari gw belajar mengenai React.js dengan ES6. untuk seri sebelumnya bisa di klik di link di bawah ini :

Components bisa di bilang hal yang sangat penting di react.js. Components adalah semacam konsep bagaimana cara untuk membuat tiap bagian dari UI (tampilan) bisa bekerja secara mandiri dan terisolasi dari bagian-bagian yang lain.

Sebenarnya secara sadar atau tidak sadar bagi yang sering bekerja dengan kode HTML, selalu melakukan pemisahan bagian dari halaman-halaman misalnya Header, Content, dan Footer. Biasanya tujuannya agar kode tidak menumpuk di satu halaman sehingga di pisahkan ke file-file kecil yang lebih spesifik fungsinya dan kode lebih maintainable jika ada perbaikan.

Khusus di react.js bahkan hampir bagian terkecil di tampilan di sunnah-kan untuk dipisahkan. Susah ? gw bilang sih iya, tapi harus dibiasakan~~

contoh pembagian halaman chat berdasarkan components di react.js (source : https://goo.gl/zH6uXC)

Saat-nya berlatih. (source code : https://github.com/artdevil/learn-react/tree/components). Buka project terakhir yang di buat, kemudian lihat App.jsx.

# App.jsx
# Disini kita membagi tiga komponent kecil, Header, Content, Body. Semua tag components di tulis dengan huruf kapital di awal.
import React from 'react';
import Header from './components/header.jsx';
import Content from './components/content.jsx';
import Footer from './components/footer.jsx';
export default class App extends React.Component {
render() {
return (
<div>
<Header />
<Content />
<Footer />
</div>
)
}
}

Buat folder components di root project. lalu di sini kita akan buat 3 file, yaitu content.jsx, header.jsx, dan footer.jsx. Edit semua file sebagai berikut.

# header.jsx
import React from 'react';
export default class Header extends React.Component{
render(){
return (
<div>
<h1>Header</h1>
</div>
)
}
}
#content.jsx
import React from 'react';
export default class Content extends React.Component{
render(){
return (
<div>
Mantap jiwa!!!!!!!
</div>
)
}
}
# footer.jsx
import React from 'react';
export default class Footer extends React.Component{
render(){
return (
<div>
<p><b>footer</b></p>
</div>
)
}
}

Jalankan server dengan perintah berikut di terminal

npm start

Biasa aja ? ayo buat lebih menarik lagi :D. Buat components table dengan cara tambahkan file table_row.jsx di folder components.

# table_row.jsx
# ga usah pusing untuk kode this.props bla bla bla. Nanti dijelaskan di tutorial berikutnya.
import React from 'react';
export default class TableRow extends React.Component{
render(){
return(
<tr>
<td>{this.props.data.id}</td>
<td>{this.props.data.name}</td>
<td>{this.props.data.age}</td>
</tr>
)
}
}

Edit file content.jsx sebagai berikut

# content.jsx
# ga usah pusing untuk kode this.state bla bla bla. Nanti dijelaskan di tutorial berikutnya.
# this.state.data.map fungsi iterasi di javascript. bisa lihat di
sini
import React from 'react';
import TableRow from './table_row.jsx';
export default class Content extends React.Component{
constructor(){
super();
this.state = {
data:
[
{
"id": 1,
"name": "Foo",
"age": "20"
},
{
"id": 2,
"name": "Bar",
"age": "30"
},
{
"id": 3,
"name": "Baz",
"age": "40"
}
]
}
}
render(){
return (
<table>
<tbody>
{this.state.data.map((person, i) => <TableRow key={i} data={person} />)}
</tbody>
</table>
)
}
}

Lihat hasilnya di web browser. Semakin menarik aja kan react.js ? see ya in next time :D