ReactJS

ReactJS adalah library javascript yang digunakan untuk membuat user interface. Atau lebih mudahnya library yang digunakan untuk mencetak html kedalam halaman website. Sejak pertama kali dimunculkan, library open source yang dikelola oleh Facebook ini selalu mendapat sorotan positif dari para developer. Saat penulisan post ini saja, jumlah 'star' di github telah mencapai 65.000 lebih.

Jumlah 'star' tersebut sangatlah besar apalagi react hanyalah library javascript, bukan framework javascript seperti angular maupun ember. Mungkin itulah mengapa react sangat populer, react hanya melakukan satu hal dan melakukan hal itu dengan sangat baik, yakni untuk membuat user interface. Selain itu juga yang mendongkrak kepopuleran adalah karena react dibuat oleh perusahaan sekelas Facebook.

Kepopuleran ini yang membuat developer website baiknya mampu menguasai react. Karena kepopuleran suatu teknologi berbanding lurus dengan banyaknya perkerjaan yang membutuhkan teknologi tersebut. Jadi mari belajar ReactJS dan rasakan sendiri seberapa bagusnya react.

Install

Sebelum kita memulai belajar ReactJS, kita perlu menginstall dan konfigurasi berbagai library pendukung. Kita perlu compiler untuk merubah javascript es6 menjadi javascript es5 yang mampu dibaca oleh browser, kita juga perlu bundler untuk menyatukan file-file javascript yang kita buat beserta dengan library lain. Untungnya ada create-react-app, library untuk install dan konfigurasi berbagai library pendukung tersebut.

yarn global add create-react-app

Perintah di atas akan menginstall create-react-app beserta seluruh dependensinya. Setelah selesai perintah create-react-app akan tersedia pada terminal.

create-react-app my-app
cd my-app

Folder my-app dibuat, dan berisi file konfigurasi dan struktur folder yang dibuat oleh create-react-app.

yarn start

Ketikkan perintah di atas untuk menjalankan server. Kemudian buka http://localhost:3000 di browser untuk melihat projek yang baru saja dibuat.

Hello World

Untuk permulaan silahkan ubah file src/App.js menjadi seperti dibawah ini.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          Saya belajar dengan tekun supaya bisa menjadi website developer yang hebat.
        </p>
      </div>
    );
  }
}

export default App;

Simpan perubahan tersebut. Browser akan reload secara otomatis (termikasih pada create-react-app untuk autoreloadnya) dan perubahan diatas akan muncul pada browser.

Penjelasan

Import

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import adalah kode untuk memanggil file atau lebih tepatnya module. Pada baris pertama kita import objek React dan Component dari module react. React disini adalah object utama yang di export oleh module react, sedangkan Component adalah salah satu properti yang dimiliki oleh React. Kurung kurawal disitu adalah destrukturisasi, dengan destrukturisasi kita bisa langsung menggunakan properti object sebagai variable. Dalam arti lain variable Component langsung tersedia, tidak perlu kita panggil seperti ini: React.Component. Baris kedua, kita import logo dari file logo.svg. Sedangkan baris ketiga, kita import css yang dibutuhkan.

Class

class App extends Component {}

Selanjutnya, kita buat sebuah class untuk komponen yang akan kita buat, yakni App. extends adalah kode untuk inheritance, berarti bahwa class App memiliki sifat (properti dan method) yang sama dengan Component. Komponen adalah jantung dari aplikasi ReactJS. Di dalam komponen ini kita akan menentukan apa yang akan di cetak kedalam halamn web serta bagaimana perilaku komponen tersebut.

Render dan JSX

render() {}

Method render(), wajib dimiliki oleh setiap komponen React. Tidak masuk akal jika sebuah komponen tidak mencetak apapun ke halaman web (rendering). Method render ini mengembalikan element beserta data yang akan dicetak dalam bentuk JSX.

<div className="App">
  <div className="App-header">
    <img src={logo} className="App-logo" alt="logo" />
    <h2>Welcome to React</h2>
  </div>
  <p className="App-intro">
    Saya belajar dengan tekun supaya bisa menjadi website developer yang hebat.
  </p>
</div>

Sepintas syntax JSX mirip dengan syntax HTML, namun banyak keyword yang berbeda dan beberapa tambahan. Seperti className untuk menuliskan kelas-kelas HTML, digunakan keyword className karena class telah digunakan untuk mendenisikan sebuah class (OOP). Kemudian properti elemen selain memiliki nilai berupa string seperti className="App", bisa juga nilai berupa ekspresi javascript seperti {logo} yang artinya kita menggunakan nilai dari variable logo sebagai src dari elemen img.

Export

Kemudian kita punya export default App. Export digunakan supaya App dapat import dan dipanggil pada model lain. Mengapa demikian? Bukankah hanya satu file ini kita bisa mencetak komponen kedalam halaman website? Tidak demikian karena file App ini hanya berisi pendefinisian dari komponen App. Penggunaan komponen App ada di entry point yang dalam aplikasi ini ada pada file index.js.

Entry

Di dalam file entry atau index.js ini kita menentukan akan dicetak di elemen mana komponen App tadi.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

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

Perhatikan bagaimana kita meng-import komponen App dengan import App from './App'. Kemudian kita menggunakan ReactDOM untuk mencetak komponen App ke dalam halaman web. Parameter pertama pada ReactDOM adalah komponen yang akan dicetak, dan parameter kedua adalah elemen dimana kita akan mencetak komponen tersebut. Karena App adalah sebuah komponen React, dan telah ter-import, kita dapat menuliskannya dalam bentuk JSX <App />. Sedangkan document.getElementById('root') adalah kode standar javascript untuk mengambil elemen berdasarkan properti id.

Demikian tulisan tentang bagaimana memulai belajar ReactJS ini. Anda tidak perlu khawatir, akan masih banyak lagi tulisan-tulisan tentang javascript terutama ReactJS dan kawan-kawannya. Sampai jumpa.