Tutorial React Js Bahasa Indonesia Bagian 3, Implementasi react-router-dom untuk membuat halaman-halaman website pada aplikasi react js

Tutorial ini akan membahas tentang penggunaan router pada aplikasi react js. Kita akan menggunakan librari atau package react-router-dom sebagai router. Kegunaan router adalah memisahkan komponen-komponen mana yang akan di-render berdasarkan path url yang sudah ditentukan. Contohnya path url "/home" untuk komponen "HomePage.js", path "/about" untuk "AboutPage.js", path "/contact" untuk "ContactPage.js", dan seterusnya.

Ada dua tipe komponen router yang dapat kita pakai dari librari react-router-dom. Pilih salah satu komponen yaitu HashRouter atau BrowserRouter. Jika aplikasi react js akan diakses melalui browser, maka disarankan menggunakan BrowserRouter. Berikut ini contoh perbedaan url yang menggunakan HashRouter dan BrowserRouter:

HashRouter:
http://www.opetstudio.com/#/home

BrowserRouter:
http://www.opetstudio.com/home

Terlihat perbedaannya, yang satu memakai hash, yang satunya lagi tidak memakai hash. Biasanya saya menggunakan HashRouter saat membuat aplikasi dashboard kusus untuk admin. Pada prakteknya nanti, anda bisa coba-coba kedua tipe router di atas.

Okey, kita langsung saja implementasi librari react-router-dom pada project yang sudah kita buat pada tutorial bagian 1, dan langsung kita upload ke hosting sama seperti tutorial bagian 2. Kita akan membuat tiga halaman website yaitu halman home, about dan contact. Ikuti langkah-langkah berikut:

1. Pertama, masuk ke dalam folder project react js dan install librari atau package react-router-dom:

$ cd aplikasi-reactjs
$ npm install --save react-router-dom

option --save artinya save daftar module atau package yang telah kita install ke dalam file package.json.

2. Buatlah folder "pages" di dalam folder src:

$ mkdir src/pages

3. Buatlah file HomePage.js di dalam folder "pages" tadi, dan copy paste script di bawah ini:

Save file anda tadi dengan command: ":wq!", atau save file seperti biasa jika menggunakan editor. Saya sarankan gunakan editor Visual Studio Code, biar lebih mudah.

4. Ikut step ke-2 untuk membuat file AboutPage.js dan ContactPage.js, sesuaikan nama class nya dengan nama file nya. Ganti tulisan "ini adalah halaman Home" sesuai dengan halaman masing-masing biar kelihatan perpindahan antara page. Jadi file page yang telah kita buat dan berada di dalam folder src/pages/ adalah file: HomePage.js, AboutPage.js dan ContactPage.js.

5. Buatlah satu file dengan nama "Router.js" di dalam folder src. Copy dan paste script javascript berikut:

6. Edit file src/index.js, Replace semua string "App" dengan "Router. Hasil koding nya seperti ini:

7. Implementasi react-router-dom telah selesai. Sekarang ketik command berikut untuk menjalankan aplikasi react js di localhost:

$ npm start

Akses alamat url berikut untuk membuka setiap halaman yang telah kita buat tadi:

http://localhost:3000/home
http://localhost:3000/about
http://localhost:3000/contact

Jreng..Jreng..Jreng.. Halaman-halaman website anda sudah bisa di akses menggunakan alamat url nya masing-masing karena kita telah memasang router pada aplikasi atau project react js. Saya rasa tutorial ini terlalu gampang untuk diikuti. Bukan begitu bukan?

Selanjutnya, upload hasil kerja kita tadi ke hosting anda masing-masing. Ikuti langkah-langkah berikut:

1. Jalankan perintah berikut untuk build project react js:

$ npm run build

hasil build file-file source berada di dalam folder build, semuanya sudah di minify dan siap untuk diupload ke server.

2. Buka aplikasi ftp seperti WinScp, Filezilla, Transmit atau aplikasi-aplikasi ftp lainnya yang biasa anda gunakan, lalu masuk ke hosting menggunakan username dan password ftp yang telah diberikan oleh jasa penyedia hosting (Baca kembali tutorial bagian 2). Upload semua isi folder build ke folder public_html di server hosting anda.

3. Step ini sangat penting..!!!. Jangan lupa buat file .htaccess dan upload ke dalam folder public_html di server. Copy Paste script berikut ke dalam file .htaccess:

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

Setelah selesai semua proses upload, silahkan akses halaman-halaman website anda menggunakan alamat domain pribadi anda. Contoh alamat domain yang saya gunakan adalah opetstudio.com:

http://www.opetstudio.com/home
http://www.opetstudio.com/about
http://www.opetstudio.com/contact

Baiklah sekian tutorial yang sangat singkat ini, jika ada yang kurang anda mengerti, silahkan bertanya di kolom komentar.

Ikuti terus seri selanjutnya dari tutorial react js "Tutorial React Js Bahasa Indonesia", sehingga anda bisa mengerti cara membuat aplikasi website menggunakan react js.

source code tutorial: https://github.com/opetstudio/tutorial-reactjs

Terima kasih sudah membaca tutorial yang sederhana ini.