Membuat Halaman Dinamis Dengan React JS

Sekarang kita akan belajar membuat halaman dinamis dengan React JS. Untuk membuat halaman dinamis kita harus menginstal library bernama React Router. Pertama-tama siapkan terlebih dahulu folder projectnya, saya membuat folder bernama react-basic pada desktop.

Jalankan Command Prompt, ketiklah perintah-perintah di bawah ini:

Buat folder project:

  • cd desktop (masuk ke dalam desktop)
  • mkdir react-basic (buat folder react-basic)
  • cd react-basic (masuk ke dalam folder react-basic)

Instal React, React Router dan library lainnya:

  • npm init (nanti akan ada pilihan untuk memasukan keterangan project, enter saja sampai selesai)
  • npm i --save react react-dom react-router (instal library utama)
  • npm i --save-dev webpack webpack-dev-server babel-loader babel-preset-es2015 babel-preset-react (instal library untuk pendukung development)

Kalau sudah nanti teman-teman akan mendapatkan file package.json seperti ini:

Kemudian buat file webpack.config.js, ketik pengaturan seperti berikut:

Selanjutanya teman-teman buatlah folder-folder dan file-file yang diperlukan (folder harus sesuai dengan yang kita atur pada webpack config).

File bundle.js jangan dibuat karena akan terbuat secara otomatis saat kita menajalankan webpack nanti.

Kemudian pada file src/js/app.js, ketiklah perintah berikut:

Berikut adalah penjelasan tiap baris (yang penting saja):

Pada baris ke-3, kita import class Link (membuat link/ahref), Router (pembungkus utama dan mengatur opsi), Route (menentukan path/url dan component React yang akan dijalankan), IndexRoute (component React yang akan dijalankan secara default), hashHistory (opsi untuk menggunakan url dengan hashtag #).

5 sampai 8 adalah component react yang kita buat sebagai halaman aplikasi.

16 sampai 18 adalah kita membuat link sebagai menu, yakni Home, About dan Contact.

23 adalah tempat pergantian halaman (react component).

31 adalah method render() dari react-dom berfungsi untuk menampilkan element react pada browser.

32 kita melakukan setting pada react router, yakni history menggunakan hashHistory (#).

33 adalah class 'App' yang dijadikan sebagai kerangka layout.

34 adalah class default (Home) yang akan ditampilkan pada base url.

35 dan 36 adalah halaman-halaman lain yang akan dijalankan sesuai dengan path/url.

37 adalah halaman page note found.

Berikut adalah halaman-halaman react yang akan kita tampilkan:

src/js/home.js

src/js/about.js

src/js/contact.js

src/js/page-not-found.js

Sekarang kita jalankan lagi Command Prompt (pastikan masuk pada folder project).

Ketik perintah berikut:

  • npm run build (untuk melakukan bundle)

Pada file public/index.html, import file bundle.js:

Selanjutnya ketik perintah berikut pada Command Prompt.

  • npm run start (untuk menjalankan server lokal)

Terakhir, jalankan http://localhost:3000/ pada browser untuk melihat hasilnya.

Halaman Home

Halaman About

25 November 2016

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat