Sebelum mengikuti tutorial ini ada beberapa hal yang perlu kamu siapkan yaitu menginstall NodeJS dan mengikuti tutorial ReactJS pada tutorial sebelumnya.
Requirement
- Sudah menginstall GIT, jika belum kamu dapat mengikuti tutorialnya pada link berikut ini: Cara Mudah Belajar GIT & GitHub di Windows Secara Step By Step.
- Telah mengetahui dasar-dasar HTML, jika belum kamu dapat mengikuti tutorialnya pada link berikut: Bagian 1 HMTL – Tahap Awal Untuk Menjadi Web Developer.
- Telah mengetahui dasar-dasar CSS, jika belum kamu dapat mengikuti tutorialnya pada link berikut: Bagian 2 CSS – Permulaan Untuk Menjadi Front End Developer.
- Sudah menginstall nodejs, jika belum kamu dapat megikuti tutorialnya pada link berikut: Persiapan Awal Belajar NodeJS Beserta Panduan Installasinya.
- Telah mengetahui dasar-dasar dari reactJS, jika belum kamu dapat megikuti tutorialnya pada link berikut: Apa itu ReactJS dan Bagaimana Cara Menggunakannya?
- Menggunakan OS Windows dan macOS
Apa itu Single Page Application?
Hasil akhir dari tutorial ini
Dikutip dari website kudo developers Single Page Application (SPA) adalah “istilah untuk aplikasi berbasis web, yang menggunakan satu halaman web saja sebagai tampilan dari aplikasinya. Semua aksi klik atau pun penyajian data tidak akan membuat halaman secara utuh dimuat ulang (reload), tetapi hanya beberapa saja yang diupdate dari server atau dari hasil proses aplikasi di sisi klien. Akibat dari penggunaan teknologi ini menjadikan web yang dibuat menjadi lebih ringan dan lebih cepat ketika digunakan”.
“Cara kerjanya adalah saat pertama dibuka, semua kebutuhan untuk aplikasi seperti HTML, CSS dan JavaScript dimuat di awal. Ketika aplikasi membutuhkan data atau tampilan baru, maka data dan tampilan diambil dari server secara terpisah tanpa harus berpindah dari halaman utama. Setelah data diterima, maka tampilan akan diganti secara dinamis menggunakan JavaScript”.
Setelah mengetahui dari penjelasan di atas tentunya kita ingin segera membuat aplikasi SPA menggunakan ReactJS.
Step By Step Membuat Single Page Aplication (SPA) di ReactJS
- Install ReactJS
Buka terminal dengan mengarahkan ke direktori documents lalu ketik syntax berikut.
cd documents
Selanjutnya tekan enter. Setelah itu kita akan menginstal reactjs dengan perintah berikut.
- Untuk OS Windows
create-react-app spa
- Untuk macOS
npx create-react-app spa
Selanjutnya tekan enter. Setelah itu kita masuk ke direktory (folder) spa dengan mengetik perintah berikut.
cd spa
Selanjutnya install react router dengan mengetik perintah di bawah ini.
npm i react-router-dom --save
Selanjutnya jalankan localhost server dengan perintah
npm start
Pada tahapan ini kita telah berhasil menginstall dan menjalankan ReactJS. Pada next step kita akan membuat halaman website Single Page Application (SPA).
Klik Next Step di bawah ini untuk melanjutkan belajar
