Mengenal props dan state di React.js dengan ES6

Artikel ini di tulis saat selimutan gaya ulet malas waktu hujan deras yang menambah dinginnya daerah gegerkalong, Bandung, Jawa Barat.

Yang muslim di sunnahkan membaca “Allahumma shoyyiban nafi’an” saat hujan.

Ini merupakan serial dari dasar belajar React.js dan ES6 . Ini part 4 jadi yang belum baca untuk part lainnya :

• Seri tutorial 1
• Seri tutorial 2
• Seri tutorial 3

Masuk ke konsep inti yang lumayan ribet di React.js, yaitu props dan state. Please pay attention for this everybody in the laptop yooo. props dan state adalah suatu “model” data (menyimpan data) di React.js. Hampir sama tetapi memiliki fungsi yang berbeda. Sebelum masuk ke fungsinya perhatikan gambar berikut

React.js render data

Dari gambar di atas terlihat “model” data pertama kali dideklarasikan, akan di sebar ke semua view/tampilan yang ada. Jika ada modify/perubahan pada “model” data karena adanya interaksi di view (input, click, hover, etc). Maka seluruh perubahan akan di kirim ke semua view yang ada atau dengan kata lain di re-render.

Mungkin terdengar sangat boros jika terus re-render jika hanya memodifikasi satu bagian. Well ternyata tim engineering facebook lebih keren dari yang saya kira. mereka menggunakan diff-algorithm untuk optimasi hal tersebut. Penjelasannya ada di sini http://snip.ly/ywCe . (semoga lain waktu bisa gw jelasin)

So what the different function between props and state ?

State adalah “model” data yang berfungsi sebagai data utama pada component yang isi-nya hanya untuk component tempat state itu di set isi-nya.

Props adalah “model” data yang memiliki fungsi ganda yaitu selain untuk menyimpan data, Props juga berfungsi untuk “melempar data” antar components view jika ada perubahan data di state.

Let’s try. (source code : https://github.com/artdevil/learn-react/tree/props-state). Pertama buka project yang di branch “components” sebelumnya. Kemudian buka App.jsx

# App.jsx
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 {
  constructor(props){
    super(props);
// deklarasi isi state
    this.state = {
      header: "ini header",
      footer: "ini footer"
    };
}
// mengubah header dengan setState
  changeHeader(e){
    this.setState({header: e.target.value});
  }
// mengubah footer dengan setState
  changeFooter(e){
    this.setState({footer: e.target.value});
  }
// dataState : props untuk melempar data state ke component konten
  // changeHeader, changeFooter: props untuk menangkap data perubahan dari component konten
  // dataHeader: props untuk melempar data state ke component header
  // dataFooter: props untuk melempar data state ke component footer
render() {
    return (
      <div>
        <Header dataHeader={this.state.header} />
<Content
          dataState={this.state}
          changeHeader={this.changeHeader.bind(this)}
          changeFooter={this.changeFooter.bind(this)} />
<Footer dataFooter={this.state.footer} />
      </div>
    )
  }
}

Dari kode di atas, kita mengunakan fungsi this.setState untuk mengubah nilai state yang ada, perubahan data ini akan di bawah ke semua komponents view.

Selanjutnya untuk halaman content.jsx

# content.jsx
# perhatikan bagian onChange={this.props.changeHeader}. di sini setiap ada perubahan pada input, maka data akan di bawa oleh props.changeHeader ke fungsi changeHeader di component App.jsx
import React from 'react';
export default class Content extends React.Component{
  render(){
    return (
      <div>
        <div>
          <label>Header</label> <input value={this.props.dataState.header} onChange={this.props.changeHeader}/>
        </div>
        <div>
          <label>footer</label> <input value={this.props.dataState.footer} onChange={this.props.changeFooter}/>
        </div>
      </div>
    )
  }
}

Kemudian untuk halaman header.jsx dan footer.jsx

# header.jsx
import React from 'react';
export default class Header extends React.Component{
  render(){
    return (
      <div>
        <h1>{this.props.dataHeader}</h1>
      </div>
    )
  }
}
#footer.jsx
import React from 'react';
export default class Footer extends React.Component{
  render(){
    return (
      <div>
        <p><b>{this.props.dataFooter}</b></p>
      </div>
    )
  }
}

Finally, running kembali server dengan perintah

npm start

Bingung, pusing, mual, batuk berdahak, dll ? silahkan tanyakan yang ingin di tanyakan di komentar. See ya :D