Oke, Apa Itu React? (Part 3)

Tuesday. December 05, 2017 - 2 mins

See the Pen Apa Itu React? (Part 2 - Pen 2) by imamassi (@imamassi) on CodePen.

class Youtubeku extends React.Component{
...
render(){
    return <div>
      <Youtube videoId={this.state.videoId} onReady={this._onReady} onStateChange={this._onStateChange} opts={this.state.opts}/><br/>
      <button onClick={this.play}>Play Video</button>
      <button onClick={this.pause}>Pause Video</button>
      <span>{this.state.videoState}</span>
    </div>
  }
...
}

Dan terakhir, adalah kode panjang diatas. Saya membuat sebuah komponen Youtubeku , yang berisi komponen Youtube , dua button Play video dan Pause video , dan teks untuk menunjukkan status video. Silahkan jika anda ingin membaca isi tab Babel, namun anda tidak perlu memahami secara keseluruhan semuanya untuk sekarang :).

ReactDOM.render(
  <div>
    <Youtubeku videoId="3P6DWAwwViU"/>
    <Youtubeku videoId="JKCBeDeVxkg"/>
  </div>,
  document.getElementById('root')
)

Dengan saya membuat sebuah komponen baru, saya dapat melakukan apapun yang saya inginkan ke komponen tersebut, dan saya dapat merender 2 komponen yang sama, hanya videoId yang berbeda.

Sehingga terlihat, salah satu manfaat dalam menggunakan React, bahwa sebuah komponen bisa memiliki seluruh fungsionalitas tersendiri, dan seluruh fitur yang akan kita buat untuk sebuah komponen, tidak akan bercampur dengan komponen lain dan membuat bingung kita.

Jelas, masih banyak contoh yang bisa saya berikan untuk menjelaskan mengenai apa itu React, tapi saya rasa seharusnya anda cukup paham dibalik layar React itu maksudnya dibuat untuk apa.

React, secara singkat, adalah sebuah library untuk mengelola tampilan DOM. Seluruh kinerja dalam menampilkan elemen, diberikan ke React, dan kita membiarkan React yang bekerja dalam memikirkan apa yang harus tampil, bagaimana, dan kapan.

Imam Assidiqqi

Founder of Imam.tech