Mulai Menggunakan React dan JSX

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

Dalam tutorial ini, kita akan melihat bagaimana cara memulai dengan membuat aplikasi React dan coba mengerti dasar-dasar JSX. Tutorial ini mengasumsikan kamu memahami HTML dan JavaScript dengan baik.

Apa itu React?

React adalah library JavaScript yang dikembangkan oleh Facebook untuk mengelola antarmuka pengguna untuk aplikasi web dengan mudah. Fitur utama React adalah membuat komponen UI yang mudah dikelola, yang membuat pengembangan aplikasi web skala besar lebih mudah. React menggunakan konsep Virtual DOM, di mana React menyimpan salinan dari DOM yang asli. Setiap ada perubahan terjadi, React menjalankan proses diffing, mengindentifikasi perubahan, dan memperbarui DOM sebenarnya. Konsep Virtual DOM membuat rendering aplikasi lebih cepat dan meningkatkan performa.

Apa itu JSX?

JSX adalah ekstensi sintaks JavaScript yang terlihat mirip XML. Berikut adalah contohnya:

ReactDOM.render(
  <h1>Welcome React, TutsPlus !!</h1>,
  document.getElementById('container')
);

Kode JSX mirip seperti HTML tapi sebenarnya campuran JavaScript dan HTML. Kode diatas merender pasan di dalam tag h1 di dalam elemen container. JSX lebih cepat dari JavaScript karena melakukan optimasi dan mengkompile source code. JSX juga digunakan karena lebih mudah daripada kode JavaScript biasa.

Dari dokumentasi resmi:

JSX adalah ekstensi sintaks seperti XML untuk ECMAScript tanpa ada definisi semantik tertentu. TIDAK dirancang untuk diimplementasi oleh engine atau browser. BUKAN sebuah proposal untuk menggabungkan JSX ke spesifikasi ECMAScript itu sendiri. Ditujukan untuk digunakan oleh berbagai preprocesor (transpiler) untuk mengubah token-token ini menjadi ECMAScript standar.

Kenapa Perlu Menggunakan JSX?

Kita tidak diwajibkan menggunakan JSX saat berkerja dengan aplikasi React. Kamu bisa menggunakan kode JavaScript biasa. Tapi menggunakan JSX memiliki beberapa keuntungan:

Lebih mudah menulis kode JSX dibandingkan JavaScript. Sesederhana membuka dan menutup tag XML. Berikut adalah contoh JSX:

<div>
<p>Welcome to TutsPlus</p>
</div>

Berikut adalah kode React hasil kompilasi:

"use strict";

React.createElement(
  "div",
  null,
  React.createElement(
    "p",
    null,
    "Welcome to TutsPlus"
  )
);

JSX memastikan kode mudah dibaca dan dikelola.

JSX mengoptimasi kode saat kompilasi, jadi akan berjalan lebih cepat dibandingkan kode JavaScript.

Memulai

Kita belajar lebih jauh dengan menulis kode JSX dan merendernya di browser. Untuk memulai membuat aplikasi React, buat sebuah halaman index.html sederhana dengan struktur halaman berikut:

<html>
<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
	<script src="https://unpkg.com/[email protected]/browser.min.js"></script>

	<script type="text/babel">
	    // JSX code would be here
	</script>
</head>
<body>
	<div id="container">

	</div>
</body>
</html>

Seperti bisa dilihat pada kode di atas, kita membuat referensi ke script react dan react-dom pada halaman index.html. Kita juga menggunakan referensi script babel, yang akan mengubah kode JSX ke pemanggilan fungsi react. Contohnya, lihat kode JSX berikut:

var grp = <div>
  <p>Welcome to TutsPlus</p>
</div>;

Babel akan mengubah kode JSX di atas menjadi fungsi react yang dibutuhkan sebagai berikut:

var grp = React.createElement(
  "div",
  null,
  React.createElement(
    "p",
    null,
    "Welcome to TutsPlus"
  )
);

Menulis Komponen React Menggunakan JSX

Mari buat sebuah komponen React yang akan menampilkan pesan selamat datang. Berikut adalah kodenya:

<script type="text/babel">
	var Message = React.createClass({
		render:function(){
			return <h1>Welcome to TutsPlus</h1>
		}
	});

	ReactDOM.render(<Message />,document.getElementById('main'));
</script>

Message adalah komponen react yang mengembalikan kode JSX di atas, yang akan dikompilasi menjadi fungsi React dengan Babel. Dengan ReactDOM.render, kita akan merender komponen di dalam elemen div main pada HTML.

Simpan perubahan di atas dan cobalah buka index.html di browser, kamu seharhusnya bisa melihat pesan Welcome to TutsPlus di browser.

Melempar Atribut ke Komponen

Seringkali diperlukan untuk melempar data ke komponen yang akan dievaluasi atau dimodifikasi lalu dirender. Mari kita lihat bagaimana kita bisa melempar atribut ke komponen dan menampilkan datanya.

Misalnya kita ingin melempar sebuah nama ke komponen Message dan menampilkan nama tersebut pada pesan yang bersangkutan. Pertama, kita tambahkan atribut khusus pada komponen kita.

ReactDOM.render(<Message name="Roy" />,document.getElementById('main'));

Atribut yang dilempar bisa dibaca dari dalam fungsi render komponen menggunakan this.props pada kunci komponen. Ubahlah kode menjadi seperti ini:

var Message = React.createClass({
	render:function(){
		return <h1>Welcome to TutsPlus, {this.props.name}</h1>
	}
});

Simpan perubahan tersebut dan buka halaman index.html dan kamu bisa melihat pesan tersebut.

Welcome to TutsPlus, Roy

Membuat Komponen Google Map pada React menggunakan JSX

Setelah kita familar dengan JSX dan membuat komponen React menggunaan JSX, kita coba membuat komponen React untuk menampilkan Google Maps.

Kita mulai dengan menambahkan referensi ke Google Maps API pada index.html.

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

Buat komponen MyMap seperti yang ditampilkan di bawah ini:

var MyMap = React.createClass({
    render: function() {
        return (
            <div id="map"><span></span></div>
        );
    }
});

ReactDOM.render(<MyMap />,document.getElementById('main'));

Buat fungsi bernama componentDidMount pada React komponen tersebut, dan di dalam fungsi itu buatlah variabel-variabel yang berhubungan dengan map:

var MyMap = React.createClass({

    componentDidMount: function() {

      var latLong = new google.maps.LatLng(-47.888723, 444.675360);

      var options = {
              zoom: 2,
              center: latLong
          },
          map = new google.maps.Map(ReactDOM.findDOMNode(this), options),
          marker = new google.maps.Marker({
          map:map,
          animation: google.maps.Animation.BOUNCE,
          position: latLong
      });
    },

    render: function() {
        return (
            <div id="map"><span></span></div>
        );
    }
});

Fungsi componentDidMount dipanggil begitu proses rendering dimulai, dan semua objek map diinisialisasi dalam fungsi ini. ReactDOM.findDOMNode mencari referensi ke node DOM komponen yang bersangkutan dan membuat objek peta. marker diatur untuk memiliki properti seperti map, position, dan animation.

Cobalah merender komponen map di dalam div #main.

ReactDOM.render(<MyMap />,document.getElementById('main'));

Simpan perubahan di atas dan coba buka halaman index.html, dan kamu bisa melihat Google Map beraksi.

Penutup

Dalam tutorial ini, kita melihat pengenalan dasar untuk React dan JSX untuk membantu kamu memulai. Kita lihat bagaimana cara membuat komponen React menggunakan JSX dan juga membuat komponen Google Map pada React. Pada tutorial berikutnya, kita akan lebih fokus ke fitur-fitur dalam React.

Source code untuk tutorial ini tersedia pada GitHub.

Apakah kamu sudah mencoba membuat komponen React dalam waktu dekat? Saya ingin mendengar pengalamanmu. Beri tahu saya pendapatmu di komentar di bawah.