Teknik routing di Reactjs

A. Install package manager

  1. Kita buka terminal kemudian jalankan perintah berikut ini untuk melakukan instalasi $ npm install -g create-react-app .
  2. Setelah proses instalasi package create-react-app selesai, kita bisa langsung memulai membuat aplikasi react pertama kita.
  3. Jalankan perintah berikut $ create-react-app my-app
  4. Jika proses create react app berhasil langkah selanjutnya Masuk kedalam folder nama aplikasi, kemudian jalan kan $ npm start.
  5. Jika proses compile berhasil maka akan tampil pada browser yaitu halaman localhost:3000.

Setelah Instalasi Package Manager kita akan mengistal material ui karena kita memakai material ui untuk style pada app reactjs

  1. Buka terminal pada visual studio kemudian ketik $ npm install @material-ui/core
  2. Setelah selesai kita bisa memilih component/style apa yang akan kita gunakan pada reactjs

 

B. Struktur direktori pada project React

  1.  node_modules berisi paket-paket modul Nodejs.
  2.  public berisi file untuk publik seperti HTML, CSS, icon, dan gambar.
    •  index.html adalah file HTML yang akan digunakan aplikasi React untuk render komponen
  3.  src berisi kode dari aplikasi Reactjs, di sinilah kita akan membuat komponen:
    •  components berisi kode untuk routing dan juga menempatan component/style pada materal ui.
    •  App.js berisi kode untuk komponen App atau komponen inti dari aplikasi.
    •  App.test.js berisi kode untuk testing komponen App.
    •  index.js berisi kode untuk render komponen App ke Real DOM. 
    • serviceWorker.js berisi kode untuk service worker, ini kita butuhkan nanti saat membuat aplikasi PWA (Progressive Web Apps).
    •  setTests.js berisi kode untuk testing aplikasi.

4. .gitignore berisi kode-kode yang akan diabaikan oleh Git.

5.  package.json file JSON yang berisi keterangan proyek dan daftar modul-modul yang dibutuhkan.

C. Cara routing pada Reactjs

  1. Kita buat file component terus didlam folder component kita buat folder terserah namanya kita ambil contohnya home didalam folder home buat file bernama Home.js berisikan code.

 

  1. Kita beralih ke app.js disini kita akan meng import file yang ada di folder componets dan juga routing.

  1. Jika sudah kita perintahkan npm start maka akan muncul pada browser kita localhost:3000.

Leave a Reply

Your email address will not be published. Required fields are marked *