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



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.