Cara Membuat Halaman Dinamis Dengan React Js »

Dalam materi ini Bagaimana cara membuat halaman dinamis dengan eact Js, dalam, pembuatan halaman dinamis kalian harus menginstal library bernama React Route.

yaitu siapkan terlebih dahulu folder project, okeh mari ikuti langkah ini :

silahkan kalian buat folder bernama belajar-reactjs pada desktop

Kemudian Jalankan Command Prompt, Ketiklah perintah di bawah ini :

buat folder project :

cd desktop (masuk kedalam desktop)
mkdir belajar-reactjs (buat folder belajar-reactjs)
cd belajar-reactjs (masuk ke dalam folder belajar-reactjs)

instal react, React Route dan library lainnya :

npm init (masuk ke tampilan pilihan untuk memasukan keterangan project)
kemudian tekan enter saja pada keyboard
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 :

Setelah buat file webpack.config.js, ketika pengaturan seperti berikut :

selanjutnya kalian buatlah folder dan file yang di perlukan
(folder harus sesuai dengan yang sudah di atur pada webpack config).

dari file bundle.js dibuat karena akan terbuat secara otomatis saat kita

menjalankan webpack nanti.

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

selanjutnya penjelasan dari tiap baris di atas :

pada baris ke -3 kita import class link (membuat link atau a href), Route (pembungkus utama dan mengatur opsi), Route (menentukan path atau url dan component React yang akan di jalankan), IndexRoute (component React yang akan dijalankan secara default), hashHistory (Opsi untuk menggunakan url dengan hashtag #)

5 sampai 8 adalah component react yang di buat sebagai halaman aplikasi.
16 – 18 yaitu 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 dengan melakukan setting pada react router, yakni history menggunakan hashHistory (#).
33 adalah class ‘App’ yang akan diadikan sebagai kerangka layout pada program.
34 adalah class default (Home) yang akan ditampilkan pada base url
35 dan 36 adalah halaman-halaman lain yang akan dijalankan sesuai dengan path dan url
37 adalah halaman page note found
berikut adalah halaman -halaman react yang akan kita tampilkan :

src/js/home.js