Memulai dengan React

Indonesian (Bahasa Indonesia) translation by Aditia Dwiperdana (you can also view the original English article)

Final product image — What You'll Be Creating

MVC adalah paradigma yang populer dalam web development dan sudah ada cukup lama. Framework React adalah bagian yang kuat dari trio Model-View-Controller, karena React fokus pada bagian View saja. React ditulis dalam JavaScript dan dibuat oleh tim pengembang Facebook dan Instagram.

React digunakan di mana-mana pada web untuk membuat aplikasi web dengan cepat yang mudah dipelihara karena cara framework React menyusun kode pada layer view.

Apa yang bisa dilakukan React?

Membangun aplikasi web yang cepat, responsif, dan tidak tergantung pada framework. React tidak membuat asumsi tentang teknologi tempatnya berada.
Manipulasi Virtual DOM memberi kamu programming model yang sederhana yang bisa dirender pada browser, di server, atau di desktop dengan React Native.
Data flow binding pada React dirancang sebagai data flow satu arah yang reaktif. Hal ini mengurangi kebutuhan dasar dan lebih mudah dikerjakan dibanding metode tradisional.

Hello World

Untuk memulai, berikut adalah contoh React yang diambil dari contoh resmi:

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

React.render(
  <HelloMessage name="John" />,
  document.getElementById('container')
);

Contoh ini akan merender 'Hello John' ke sebuah container <div>. Perhatikan sintaks seperti XML/HTML yang digunakan pada baris 3 dan 8. Ini disebut JSX.

Apa itu JSX?

JSX adalah sintaks seperti XML/HTML yang digunakan untuk merender HTML dari dalam kode JavaScript. React mengubah JSX menjadi JavaScript native untuk browser, dan dengan tools yang disediakan kamu bisa mengubah kode HTML dari situs yang sudah ada menjadi JSX!

JSX memudahkan mencampur kode seperti menulis HTML native tapi dari dalam JavaScript. Jika digabung dengan Node, ini membuat alur kerja yang sangat konsisten.

JSX tidak diwajibkan untuk bisa menggunakan React, kamu bisa menggunakan JS biasa, tapi JSX adalah alat yang sangat kuat yang memudahkan untuk mendefinisikan struktur pohon dan menentukan atribut, jadi saya sangat merekomendasikan penggunaannya.

Untuk merender sebuah tag HTML pada React, cukup gunakan nama tag dengan huruf kecil dengan JSX seperti berikut ini:

//className is used in JSX for class attribute
var fooDiv = <div className="foo" />;
// Render where div#example is our placeholder for insertion
ReactDOM.render(fooDiv, document.getElementById('example'));

Menginstall React

Ada beberapa cara untuk menggunakan React. Cara resmi yang direkomendasikan adalah dari npm atau CDN Facebook, tapi kamu bisa mengklon dari git dan mem-build sendiri. Kamu juga bisa menggunakan starter kit atau menghemat waktu dengan generator scaffolding dari Yeoman. Kita akan bahas semua metode ini agar kamu mendapat pemahaman yang lengkap.

Menggunakan CDN Facebook

Cara tercepat untuk memulai adalah dengan memasukkan library React dan React Dom dari CDN fb.me sebagai berikut:

<!-- The core React library -->
<script src="https://fb.me/react-0.14.0.js"></script>
<!-- The ReactDOM Library -->
<script src="https://fb.me/react-dom-0.14.0.js"></script>

Instalasi dari NPM

Manual React menyarankan untuk menggunakan React dengan sistem modul CommonJS seperti browserify atau webpack.

Manual React juga menyarankan menggunakan paket npm react dan react-dom. Untuk menginstall pada komputermu, jalankan perintah berikut pada terminal bash di dalam direktori proyek, atau buat direktori baru dan cd ke direktori itu terlebih dahulu.

$ npm install --save react react-dom
$ browserify -t babelify main.js -o bundle.js

Sekarang kamu bisa melihat instalasi React di dalam direktori node_modules.

Instalasi dari source Git

Dependensi

Kamu perlu memilki node V4.0.0+ dan npm v2.0.0+. Kamu bisa memeriksa versi node dengan node version dan npm dengan npm version.

Memperbarui Node via NVM

Saya sarankan untuk menggunakan nvm - node version manager untuk memperbarui dan memilih versi node. Mendapatkan nvm cukup mudah, cukup jalankan:

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash

Script tersebut mengklon repository nvm ke ~/.nvm dan menambahkan baris source ke profilmu (~/.bash_profile, ~/.zshrc atau ~/.profile).

Jika kamu ingin menginstall nvm secara manual kamu bisa lakukan dengan git:

git clone https://github.com/creationix/nvm.git ~/.nvm && cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`

Untuk mengaktifkan nvm dengan metode ini, kamu bisa menjalankannya dari shell:

. ~/.nvm/nvm.sh

Catatan: Tambahkan baris ini ke file ~/.bashrc, ~/.profile, atau ~/.zshrc agar dijalankan secara otomatis saat login.

Menggunakan NVM

Setelah nvmm terinstall, kita bisa mendapatkan versi node mana saja yang kita butuhkan, dan melihat daftar versi yang terinstall dengan node list dan melihat yang tersedia dengan node ls-remote. Kita perlu versi lebih tinggi dari 4.0.0 untuk bekerja dengan React.

Install versi terbaru dan atur sebagai versi default dengan cara berikut:

$ nvm install 4.2.1
$ nvm alias default 4.2.1
default -> 4.2.1 (-> v4.2.1)
$ nvm use default
Now using node v4.2.1 (npm v2.14.7)

Node sudah diperbarui dan npm sudah termasuk di dalamnya. Sekarang kamu sudah bisa melanjutkan proses instalasi.

Membangun React dari source Git

Klon repository dengan git ke direktori bernama react pada komputermu dengan perintah berikut:

git clone https://github.com/facebook/react.git

Setelah kamu klon repo tersebut, kamu bisa menggunakan grunt untuk membangun React:

# grunt-cli is needed by grunt; you might have this installed already but lets make sure with the following
$ sudo npm install -g grunt-cli
$ npm install
$ grunt build

Saat ini, sebuah direktori build/ sudah diisi dengan semua yang akan kamu butuhkan untuk menggunakan React. Lihatkan direktori /examples untuk melihat beberapa contoh dasar bekerja!

Menggunakan Starter Kit

Pertama, unduh starter kit yang dibutuhkan.

Ekstrak file zip dan pada direktori root buat helloworld.html, tambahkan kode berikut:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

Pada contoh ini, React menggunakan Babel untuk mengubah JSX menjadi JavaScript biasa dengan <script type="text/babel">.

Menggunakan File JavaScript yang berbeda

Buat file baru pada src/helloworld.js dan tulis kode berikut di dalamnya:

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

Sekarang yang perlu kamu lakukan adalah membuat referensi di HTMLmu, buka helloworld.html dan load script yang kamu buat menggunakan tag script dengan tipe atribut text/babel seperti ini:

<script type="text/babel" src="src/helloworld.js"></script>

Refresh page dan kamu akan lihat helloworld.js dirender oleh babel.

Catatan: Beberapa browser (misalnya Chrome) akan gagal memuat file kecuali jika disediakan via HTTP, jadi pastikan kamu menggunakan server lokal. Saya sarankan menggunakan browsersync project.

Transformasi Offline

Kamu juga bisa menggunakan command-line interface (CLI) untuk mengubah JSX menggunakan perintah command-line babel. Ini bisa didapat dengan mudah menggunakan perintah npm:

$ sudo npm install --global babel

Flag --global atau -g akan menginstall babel secara global sehingga bisa diakses di mana saja. Ini adalah kebiasaan yang baik dalam menggunakan Node untuk banyak proyek dan command-line tool.

Setelah babel diinstall, kita buat terjemahan dari helloworld.js yang sudah kita buat di langkah sebelumnya. Pada command prompy di direktori akar di mana kamu mengunzip starter kit, jalankan perintah berikut:

$ babel src --watch --out-dir build

Sekarang file build/helloworld.js akan dibuat secara otomatis setiap kamu membuat perubahan! Jika kamu tertarik, baca dokumentasi CLI Babel untuk mendapat pengetahuan lebih lanjut.

Sekarang babel sudah menghasilkan build/helloworld.js, yang berisi JavaScript biasa, perbarui HTML tanpa tag script babel.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <!-- No need for Babel! -->
  </head>
  <body>
    <div id="example"></div>
    <script src="build/helloworld.js"></script>
  </body>
</html>

Jika kita rangkum, kita bisa memuat JSX langsung di dalam tag script menggunakan babel dengan tipe atribut text/babel. Hal ini bagus untuk kebutuhan pengembangan, tapi untuk tahap produksi kita menyediakan file JavaScript yang dihasilkan yang bisa di-cache pada komputer user.

Membuat salinan ini dilakukan pada command line, dan karena ini adalah pekerjaan berulang saya sarankan kita buat menjadi otomatis menggunakan flag --watch. Atau kamu bisa selangkah lebih jauh dan menggunakan webpack dan browsersync untuk sepenuhnya mengotomatkan alur kerja pengembangan. Untuk melakukannya dengan cara termudah, kita bisa mengotomatkan proses persiapan proyek baru dengan generator Yeoman.

Menginstall dengan Yeoman Scaffolding

Yeoman adalah alat yang sangat berguna untuk memulai proyek dengan cepat dan dengan alur kerja yang optimal dan dilengkapi dengan alat konfigurasi. Idenya adalah untuk membuat kamu menghabiskan waktu lebih banyak untuk development daripada konfigurasi proyek, dan meminimalkan pekerjaan repetitif (waspadalah karena RSI adalah alasan nomor satu coder berhenti koding). Sebagai kebiasaan yang baik, menghemat waktu dengan alat dan mengimplementasi D.R.Y (Don't Repeat Yourself) dalam kehidupan sehari-hari akan mendukung kesehatan dan efisiensi, dan membuat kamu bisa menghabiskan waktu untuk menulis kode daripada melakukan konfigurasi.

Ada banyak scaffolding yang tersedia di luar sana, dengan banyak variasi untuk berbagai skala proyek. Untuk contoh pertama, kita akan menggunakan scaffolding react-fullstack dari generator Yeoman; kamu bisa melihat demo dari hasil akhirnya.

Catatan: Ini adalah konfigurasi fullstack, yang mungkin belebihan untuk banyak proyek skala kecil. Alasan saya memilih scaffolding ini adalah untuk memberi kamu pengaturan lingkungan yang lengkap, jadi kamu bisa lhat bagaimana starter kit ini dibuat menjadi aplikasi yang lebih besar. Terdapat header dan footer, dan kamu bisa lihat di mana fitur login user dan register berada, walaupun belum dibuat pada contoh tersebut.

Penggunaan

Untuk menggunakan yeoman, pertama kita perlu install, lalu jika kamu tidak punya komponen yang dibutuhkan yeoman seperti gulp, bower, dan grunt-cli, install mereka juga:

$ sudo npm install -g yo bower grunt-cli gulp

Sekarang install scaffolding React dengan perintah berikut:

$ sudo npm install -g generator-react-fullstack

Sekarang buat direktori untuk proyekmu dan cd ke direktori tersebut:

$ mkdir react-project
$ cd react-project

Lalu gunakan perintah yo dengan generator scaffolding React-fullstack untuk membuat aplikasi react-mu di dalam direktori tersebut:

$ yo react-fullstack

Sekarang Yeoman akan membuat direktori dan file yang dibutuhkan; kamu bisa melihat informasi terkait ini di command line.

Dengan scaffolding yang sudah diatur, kita build proyek kita.

$ npm start

Awalnya kita mulai pada mode debug, dan untuk rilis kita cukup menambahkan flag --release, misalnya npm run start -- release.

Sekarang kamu akan lihar build dimulai dan inisialisasi webpack. Setelah selesai, kamu akan lihat keluaran dari webpack memberi tahu informasi lengkap tentang build dan URL untuk mengaksesnya.

Akses aplikasimu pada URL yang ditulis di akhir keluaran, dengan browser pada http://localhost:3000. Untuk mengakses antarmuka admin browser sync, buka http://localhost:3001.

Catatan: Kamu mungkin perlu membuka port pada server untuk port pengembangan yang digunakan. Untuk pengguna ubuntu/debian dengan ufw, lakukan hal berikut:

$ ufw allow 3001/tcp
$ ufw allow 3000/tcp

Mengubah Situs yang sudah ada menjadi JSX.

Facebook menyediakan alat tool online jika kamu hanya perlu mengubah kode HTML menjadi JSX.

Untuk kebutuhan yang lebih besar ada tool pada npm bernama htmltojsx. Kamu bisa unduh menggunakan:

npm install htmltojsx

Untuk menggunakannya dengan command line:

$  htmltojsx -c MyComponent existing_code.htm

Karena htmltojsx adalah modul node, kamu juga bisa menggunakannya langsung pada kode, misalnya:

var HTMLtoJSX = require('htmltojsx');
var converter = new HTMLtoJSX({
  createClass: true,
  outputClassName: 'HelloWorld'
});
var output = converter.convert('<div>Hello world!</div>');

Contoh list

Kita mulai membuat aplikasi to-do list dasar agar kamu bisa melihat bagaimana React bekerja. Sebelum kita mulai, tolong siapkan IDEmu. Saya sarankan untuk menggunakan Atom.

Pada bash promt, install linter untuk React dengan apm:

apm install linter linter-eslint react
Installing linter to /Users/tom/.atom/packages ✓
Installing linter-eslint to /Users/tom/.atom/packages ✓
Installing react to /Users/tom/.atom/packages ✓

Catatan: versi terbaru dari linter-eslint membuat MacBook Pro saya sangat lambat, jadi saya non-aktifkan.

Setelah hal itu selesai, kita bisa mulai membuat list dasar di dalam scaffolding yang kita buat dengan Yeoman di langkah sebelumnya, untuk menunjukkan alur data pada contoh yang berjalan.

Pastikan server kamu dijalankan dengan npm start, dan kita mulai membuat beberapa perubahan.

Pertama, ada tiga file template yang disediakan pada scaffolding ini. Kita tidak akan menggunakannya pada contoh ini, jadi kita mulai dengan membersihkan file index.jade agar menjadi file kosong. Setelah kamu simpan file ini, periksa browser dan keluaran di terminal.

Versi baru akan ditampilkan langsung, tanpa perlu melakukan refresh. Berikut adalah konfigurasi webpack dan browsersync yang disediakan oleh scaffolding ini.

Berikutnya buka direktori komponen dan buat direktori baru.

$ cd components
$ mkdir UserList

Sekarang, di dalam direktori UserList, buat file package.json dengan isi sebagai berikut:

{
  "name": "UserList",
  "version": "0.0.0",
  "private": true,
  "main": "./UserList.js"
}

Lalu, masih di dalam direktori UserList, buat file UserList.js dan tambahkan kode berikut:

//Import React
import React, { PropTypes, Component } from 'react';

//Create the UserList component
class UserList extends Component {

  //The main method render is called in all components for display
    render(){
      
      //Uncomment below to see the object inside the console
      //console.log(this.props.data);

      //Iterate the data provided here 
      var list = this.props.data.map(function(item) {
        return <li key={item.id}>{item.first} <strong>{item.last}</strong></li>
      });

	  //Return the display
      return (
        <ul>
          {list}
        </ul>
      );
    }
}

//Make it accessible to the rest of the app
export default UserList;

Untuk melengkapi, kita perlu menambahkan beberapa data untuk list ini. Kita akan lalukan di dalam components/ContentPage/ContentPage.js. Buka file tersebut dan atur isinya sebagai berikut:

/*! React Starter Kit | MIT License | http://www.reactstarterkit.com/ */

import React, { PropTypes, Component } from 'react';
import styles from './ContentPage.css';
import withStyles from '../../decorators/withStyles';
import UserList from '../UserList'; //Here we import the UserList component we created

@withStyles(styles)

class ContentPage extends Component {

  static propTypes = {
    path: PropTypes.string.isRequired,
    content: PropTypes.string.isRequired,
    title: PropTypes.string,
  };

  static contextTypes = {
    onSetTitle: PropTypes.func.isRequired,
  };

  render() {
  
  	//Define some data for the list
    var listData = [
      {first:'Peter',last:'Tosh'},
      {first:'Robert',last:'Marley'},
      {first:'Bunny',last:'Wailer'},
    ];

    this.context.onSetTitle(this.props.title);

    return (
      <div className="ContentPage">
        <div className="ContentPage-container">
          {
            this.props.path === '/' ? null : <h1>{this.props.title}</h1>
          }
          <div dangerouslySetInnerHTML={{__html: this.props.content || ''}} />
			
          //Use the UserList component as JSX
          <UserList data={listData} />

        </div>
      </div>
    );
  }

}

export default ContentPage;

Sekarang saat kita simpan, webpack akan melakukan rebuild dan browsersync akan menampilkan perubahan di browser. Lihat source code untuk melihat bagaimana halaman tersebut dirender.

Ringkasan

Kita sudah menggunakan generator scaffolding Yeoman react-fullstack untuk memulai aplikasi web React berdasarkan starter kit. Untuk penjelasan lebih lanjut tentang file dan susunan direktori, lihat file readme pada repo git react starter kit.

Dari sini kita edit file index.jade agar diabaikan dan mulai membuat tampilan view kita sendiri, membuat komponen baru bernama UserList.

Di dalam components/UserList/UserList.js kita definisikan bagaimana list akan dirender:

var list = this.props.data.map(function(item) {
        return <li key={item.id}>{item.first} <strong>{item.last}</strong></li>
      });

Di sini penting untuk diketahui bahwa React membutukan semua item yang diiterasi memiliki identifier unik yang disediakan di bawah atribut key.

Untuk menampilkan list tersebut, kita masukkan ke dalam file ContentPage.js dengan import UserList from '.../UserList'; dan definisikan beberapa data test dengan:

    var listData = [
      {first:'Peter',last:'Tosh'},
      {first:'Robert',last:'Marley'},
      {first:'Bunny',last:'Wailer'},
    ];

Di dalam ContentPage.js kita panggil komponen UserList dengan JSX <UserList data={listData} />.

Sekarang komponen UserList bisa mengakses atribut data menggunakan this.props.data.

Kapan saja kita lempar nilai dengan atribut sebuah komponen, nilai tersbut bisa diakses via this.props. Kamu juga bisa mendefinisikan tipe data yang harus disediakan menggunakan variabel statik propTypes di dalam kelas tersebut.

Sintaks Extended Components vs. React.createClass

Terakhir, poin penting yang perlu dicatat adalah bahwa contoh ini memanfaatkan extended components. Hal ini memiliki banyak keuntungan untuk membuat struktur kode secara semantik. Tapi, kamu mungkin ingin mengakses pendekatan yang lebih bare-bone, seperti banyak contoh lain.

Jadi dibanding menggunakan class ComponentName extends Component kamu akan buat kelas React dengan contoh menggunakan sintaks berikut:

var MyListItem = React.createClass({
  render: function() {
    return <li>{this.props.data.text}</li>;
  }
});
var MyNewComponent = React.createClass({
  render: function() {
    return (
      <ul>
        {this.props.results.map(function(result) {
           return <MyListItem key={result.id} data={result}/>;
        })}
      </ul>
    );
  }
});

Hal itu menutup pengenalan React ini. Kamu seharusnya sudah memiliki pemahaman yang baik tentang hal-hal berikut:

Mendapatkan React
Menggunakan Babel dengan React
Menggunakan JSX
Membuat komponen dengan metode extend
Menggunakan komponenmu dan melempar data ke komponen tersebut

Pada bagian berikutnya, kita akan membahas bagaimana menggunakan JSX lebih jauh, bagaimana bekerja dengan database sebagai sumber data persisten, dan bagaimana React bekerja dengan teknologi web lain seperti PHP, Rails, Python, dan .NET.