Reactjs banyak dibicarakan belakangan ini. Bahkan menjadi framework yang paling populer dan banyak digunakan.

Saat ini (2020), Reactjs medapatkan posisi rangking 1 diantara pesaingnya.

Rangking Framework Front-end

Bisa dibilang, sekarang adalah Era-nya Reactjs dan era sang legenda kita si JQuery sudah berakhir.

Nah, seperti apa sih Reactjs ini dan bagaimana cara mulai belajarnya.

Mari kita bahas…

Apa itu Reactjs?

Reactjs adalah sebuah library yang dibuat oleh Facebook untuk membuat UI (user interface) pada Web (dan juga mobile).

Banyak orang menyebutnya sebagai framework, namun secara teknis.. Reactjs bukanlah sebuah framework. Melainkan sebuah library untuk membuat UI.

Tutorial Belajar Reactjs Untuk Pemula

Reactjs awalnya dibuat oleh Jordan Walke yang merupakan karyawan Facebook. Ia merilis prototipe pertama Reactjs dengan nama “FaxJS” dan terinspirasi dari XHP. 1

Facebook menyadari, aplikasi (web) mereka semakin kompleks. Bayangkan saja, ada banyak bagian yang harus terus di-update seperti news feed, chat list, chat box, dll. secara realtime.

Jika menggunakan cara tradisional seperti JQuery, ini mungkin akan memakan biaya banyak.

Karena memanipulasi DOM itu butuh resource yang besar dan Reactjs pun hadir memberikan solusi dengan VirutalDOM yang menurut mereka lebih cepat.

Reactjs kemudian mulai digunakan di Facebook untuk membuat halaman News Feed di tahun 2011 dan kemudian di instagram pada tahun 2012.

Setahun berikutnya, di tahun 2013 Raectjs dibuka untuk umum alias menjadi open-source.

Saat tulisan ini dibuat, perkembangan Reactjs sudah mencapai versi 16.11.0.

Persiapan Awal untuk Belajar Reactjs

Ada beberapa hal yang harus kamu persiapkan untuk memulai belajar Reactjs:

  1. Web Browser
  2. Teks Editor (rekomendasi VS Code)
  3. Nodejs dan NPM (untuk level mahir)

Jika kamu baru pertama belajar Reactjs atau belum mengenal Nodejs sebaiknya cukup siapkan Web Browser dan Teks Editor Saja.

Belum punya teks editor?

Tenang.. Kamu bisa manfaatkan online playground seperti Codesandbox, CodePen, dan Glitch.

Selain itu, pastikan juga kamu sudah paham tentang fitur-fitur ES6, seperti class, arrow function dan viarbel (let, const, var). Karena akan banyak digunakan pada React.

Nah, kalau sudah siap semua..

Mari kita mulai membuat aplikasi!

Hello World React!

Baiklah, mari kita coba membuat aplikasi dengan Reactjs…

Silahkan buat folder baru bernama belajar-react, kemudian di dalamnya buat file baru bernama hello-react.html.

Isi file hello-react.html dengan kode berikut:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Belajar Reactjs</title>
    <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>

<body>

    <div id="app"></div>

    <script type="text/babel">
      class Hello extends React.Component {
        render() {
          return <h1>Hello World Reactjs!</h1>
        }
      }

      ReactDOM.render(<Hello/>, document.getElementById("app"));
    </script>

</body>
</html>

Setelah itu, buka file hello-react.html dengan web browser.

Maka hasilnya:

Hello World di Reactjs

Selamat!

Kamu sudah berhasil membuat aplikasi react pertama…

Baik, sekarang saya akan jelaskan arti kode di atas.

Pertama-tama kita membutuhkan library react di HTML. Kita bisa menyisipkannya dengan cara seperti ini:

<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>

Library ini langsung kita ambil dari internet. Jika kamu tidak punya koneksi internet, maka aplikasi ini tidak akan bisa dijalankan.

Mengapa ada tiga library yang digunakan?

Karena ketiga-tiganya dibutuhkan, kalau salah satu tidak ada…

…maka aplikasi tidak akan bisa bekerja.

Pertama kita membutuhkan library react react.js untuk membuat komponen.

Kedua kita membutuhkan react-dom.js untuk me-render komponen ke dalam HTML.

Terakhir kita membutuhkan babel.js kode Javascript versi ES6 dapat dikenali pada web browser.

Tidak semua web broser mendukung ES6, karena itu kita membutuhkan babel.js agar aplikasi dapat berjalan di semua web browser.

Lanjut…

Konsep Dasar Reactjs

Pada dasarnya Reacjs hanya melakukan render komponen saat ada data yang berubah. Seperti namanya “React” ia akan breaksi saat ada perubahan data (reaktif).

Lalu komponen itu apa?

Komponen adalah bagian-bagian dari UI, contohnya seperti tombol, label, input, dll. Komponen juga bisa dibentuk dari komponen yang lain.

Secara sederhana…

Langkah-langkah yang harus dilakukan untuk membuat aplikasi react adalah sebagai berikut:

  1. Menyisipkan library reaact ke HTML;
  2. Membuat elemen HTML untuk wadah aplikasi;
  3. Membuat komponen;
  4. Me-render komponen ke HTML;

Setiap aplikasi react membutuhkan sebuah wadah.

Coba perhatikan kembali contoh di atas.

Kita membuat sebuah elemen div dengan id="app".

<div id="app"></div>

Setiap komponen yang kita buat di React akan di-render atau ditampilkan ke dalam div tersebut.

Konsep dasar Reactjs

Apakah harus dibaut dengan id="app"?

Tidak harus, karena nanti kita akan tentukan elemennya dengan method getElementById().

Berikutnya kita membuat kode aplikasinya dengan tipe text/babel:

<script type="text/babel">
    class Hello extends React.Component {
        render() {
          return <h1>Hello World Reactjs!</h1>
        }
    }

    ReactDOM.render(<Hello/>, document.getElementById("app"));
</script>

Pada kode tersebut, kita membuat komponen bernama Hello dari class React.Component.

Lalu me-rendernya ke dalam div.

Aplikasi Reactjs pertama

Mungkin kamu akan melihat sesuatu yang aneh di sini.

Kok bisa menulis HTML di dalam Javascript tanpa tanda petik?

Biasanya kan kita menulis seperti ini:

var elemenHTML = "<h1>Hello World!</h1>";

Tapi kok di React bisa begitu?

Ini adalah JSX…

JSX itu apa?

Mari kita kenalan dulu.

Mengenal JSX

JSX (Javascript XML) adalah extension dari Javasript. JSX membuat kita bisa menggunakan HTML di dalam Javascript.

JSX sama seperti XML dan HTML, ia juga memiliki nama tag, atribut, dan elemen anak.

Sebenarnya kita bisa saja menggunakan React tanpa JSX. Tapi akan sedikit menyulitkan dalam membuat komponen.

Contoh:

// membuat komponen React tanpa JSX
class Btn extends React.Component {
    render() {
        let element = React.createElement('h1', {}, 'I do not use JSX!');
        return element;
    }
}

// membuat komponen dengan JSX
class Btn2 extends React.Component {
    render() {
        let element = <h1>I Love JSX!</h1>;
        return element;
    }
}

// render komponen ke HTML
ReactDOM.render(<Btn/>, document.getElementById("app"));

Tanpa JSX, kita harus membuat elemen dengan method createElemen(). Sedangkan dengan JSX, kita cukup menulis sintak XML atau HTML-nya saja.

Mana yang lebih gampang?

Tentu saja JSX, karena kita gak perlu repot-repot menghapal method-method React untuk membuat komponen.

Latihan Menggunakan JSX

Baiklah, agar semakin paham… mari kita coba latihan.

Buatlah file baru bernama latihan-jsx.html, kemudian isi dengan kode berikut.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Belajar Reactjs</title>
    <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>

<body>

    <div id="app"></div>

    <script type="text/babel">
      // membuat elemen JSX
      let message = <h2>Belajar menggunakan JSX pada React</h2>;

      // render elemen ke DOM
      ReactDOM.render(message, document.getElementById("app"));
    </script>

</body>

</html>

Hasilnya:

Menggunakan atribut dan anak pada JSX

Pada contoh tersebut, kita membuat elemen HTML dengan JSX kemudian langsung me-rendernya tanpa harus membuat class komponen.

Latihan berikutnya, coba untuk membuat JSX yang memiliki anak dan atribut.

Buatlah file baru bernama latihan-jsx2.html, kemudian isi dengan kode berikut:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Belajar Reactjs</title>
    <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>

<style>
    .header {
        background-color: blueviolet;
        color: white;
        padding: 10px;
        font-family: Lato, sans-serif;
    }
</style>

<body>

    <div id="app"></div>

    <script type="text/babel">
      let header = (
        <header className="header">
            <h1>Belajar menggunakan JSX pada React</h1>
            <p>Tutorial Reactjs untuk Pemula</p>
        </header>
      );

      ReactDOM.render(header, document.getElementById("app"));
    </script>

</body>

</html>

Hasilnya:

Menggunakan atribut dan anak pada JSX

Coba perhatikan kodenya!

Saat kita membuat elemen JSX yang memiliki anak, kita harus mengapitnya dengan tanda kurung.

let header = (
  <header className="header">
      <h1>Belajar menggunakan JSX pada React</h1>
      <p>Tutorial Reactjs untuk Pemula</p>
  </header>
);

Membuat Proyek React dengan create-react-app

Kita membutuhkan create-react-app saat ingin membuat aplikasi React yang cukup kompleks.

create-react-app adalah program yang digunakan untuk membuat proyek React. Program ini akan meng-generate semua hal yang kita butuhkan untuk proyek awal. Mulai dari package.json, file index.html file index.js dan sebagainya.

Ada dua cara menggunakannya:

  1. Diinstal dulu, baru digunakan
  2. Digunakan langsung dengan NPX

Jika kamu ingin menginstalnya, silahkan ketik perintah berikut:

[sudo] npm install -g create-react-app

Note: Kita butuh sudo untuk Nodejs yang terinstal di root direktori (Linux)

Tunggu sampai proses instalasi selesai.

Install Reacjs

Setelah itu, baru kita bisa gunakan dengan seperti ini:

create-react-app nama-project

Atau jika kamu tidak menginstalnya, cukup pakai saja NPX.

npx create-react-app nama-project

Aturan penulisan nama project, harus menggunakan huruf kecil. Jika ada dua suku kata, maka bisa dipisah dengan -.

Mari kita coba:

create-react-app belajar-react

Tunggulah sampai prosesnya selesai.

Membuat proyek reactjs baru

Jika yarn sudah terinstal di komputer-mu, create-react-app secara default akan menggunakannya. yarn adalah package manager Nodejs buatan Facebook yang fungsinya sama seperti npm.

Tapi kalau tidak ada yarn, maka ia akan menggunakan npm.

Atau jika ingin tetap menggunakan npm, kamu bisa tambahkan argumen --use-npm atau --use-pnpm (untuk PNPM).

Jika project sudah selesai dibuat, maka akan ada folder baru bernama belajar-react pada folder tempat perintah itu dijalankan.

Sekarang coba buka folder tersebut dengan VS Code. Klik menu File->Open Folder, lalu cari foldernya.

Proyek reactjs di VS Code

Ini adalah struktur direktori dari proyek React.

  • ๐Ÿ“ node_modules berisi paket-paket modul Nodejs;
  • ๐Ÿ“ public berisi file untuk publik seperti HTML, CSS, icon, dan gambar;
    • ๐Ÿ“„ index.html adalah file HTML yang akan digunakan aplikasi React untuk render komponen
  • ๐Ÿ“ src berisi kode dari aplikasi Reactjs, di sinilah kita akan membuat komponen;
    • ๐Ÿ“„ App.js berisi kode untuk komponen App atau komponen inti dari aplikasi;
    • ๐Ÿ“„ App.test.js berisi kode untuk testing komponen App;
    • ๐Ÿ“„ index.js berisi kode untuk render komponen App ke Real DOM;
    • ๐Ÿ“„ serviceWorker.js berisi kode untuk service worker, ini kita butuhkan nanti saat membuat aplikasi PWA (Progressive Web Apps);
    • ๐Ÿ“„ setTests.js berisi kode untuk testing aplikasi.
  • ๐Ÿ“„ .gitignore berisi kode-kode yang akan diabaikan oleh Git.
  • ๐Ÿ“„ package.json file JSON yang berisi keterangan proyek dan daftar modul-modul yang dibutuhkan.
  • ๐Ÿ“„ yarn.lock adalah file yang digunakan Yarn untuk mengunci versi-versi modul Nodejs yang digunakan.

Menjalankan Aplikasi React

Sekarang mari kita coba jalankan aplikasinya, silahkan buka terminal pada VS Code dengan menekan Ctrl+` (back tick).

Kemudian ketik peintah berikut:

yarn start # jika kamu menggunakan yarn
npm start # jika kamu menggunakan npm

Tunggu sampai server selesai dibuat…

Menjalankan Server Reactjs

..dan browser akan terbuka secara otomatis.

Menjalankan Server Reactjs

Mantap! ๐ŸŽ‰

Inilah hasil aplilkasi react yang kita buat dengan create-react-app. Berikutnya kita tinggal modif sesuai kebutuhan.

Untuk menghentikan server, tekan Ctrl+C.

Build Aplikasi React

Apabila aplikasi sudah selesai dikembangkan, kita bisa build aplikasinya untuk dipublish.

Caranya, ketik perintah berikut:

yarn build # jika kamu menggunakan yarn
npm run build # jika kamu menggunakan npm

Tunggu sampai prosesnya selesai.

Build proyek reactjs dengan Yarn

Maka akan ada folder baru bernama build yang berisi kode dari aplikasi yang siap untuk dipublish atau di-deploy ke server.

Build proyek reactjs dengan Yarn

Apa Selanjutnya?

Kita sudah belajar hal dasar tentang Reactjs. Mulai dari bagaimana membuat aplikasi pertama, baik itu yang menggunakan cara create-react-app dan juga yang menggunakan langsung di HTML.

Kita jgua sempat berkenalan dengan Komponen dan JSX. Tentu ini masih belum cukup. karena itu..

..silahkan lanjutkan ke:

๐Ÿ“– Buat kamu yang ingin serius belajar React, bisa mengikuti Video Tutorial ini.


  1. https://en.wikipedia.org/wiki/React_(web_framework) ↩︎