Now Reading:

Membuat Single Page Application (SPA) Dengan ReactJS

Membuat Single Page Application (SPA) Dengan ReactJS

2. Open folder spa di text editor

Open folder spa di text editor kesayangan kamu misalnya sublime text, atom, dsb. Selanjutnya Hapus semua file di dalam folder public dan folder src seperti gambar di bawah ini.

a. Folder public

 

b. folder Foder src

3. Buat file index.html dan simpan di dalam folder public dengan isi seperti berikut.

4. Buat file index.js dan simpan di dalam folder src dengan isi seperti berikut.

5. Buat file Main.js dan simpan di dalam folder src dengan isi seperti berikut.



Pada tahapan ini kita telah berhasil membuat menu yang nantinya akan menampilkan content tanpa harus mereload seluruh halaman website. Baiklah selanjutnya mari kita membuat content dari setiap menu di atas.

6. Buat file Home.js dan simpan di dalam folder src dengan isi seperti berikut.

7. Buat file About.js dan simpan di dalam folder src dengan isi seperti berikut.

8. Buat file Contact.js dan simpan di dalam folder src dengan isi seperti berikut.

9. Buat file style.css dan simpan di dalam folder src dengan isi seperti berikut.

Single Page ApplicationSampai saat ini kita telah berhasil membuat Single Page Application (SPA) menggunakan ReactJS. Di tutorial selanjutnya kita akan belajar bagaimana cara mengambil data dari API dan menampilkannya menggunakan ReactJS.

Jika tutorial ini dirasa bermanfaat mohon di share ya dan tungguin juga tutorial selanjutnya 😀

Content Developer of Web Development

Share This Articles