A. Install package manager
- Kita buka terminal kemudian jalankan perintah berikut ini untuk melakukan instalasi $ npm install -g create-react-app .
- Setelah proses instalasi package create-react-app selesai, kita bisa langsung memulai membuat aplikasi react pertama kita.
- Jalankan perintah berikut $ create-react-app my-app
- Jika proses create react app berhasil langkah selanjutnya Masuk kedalam folder nama aplikasi, kemudian jalan kan $ npm start.
- 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
- Buka terminal pada visual studio kemudian ketik $ npm install @material-ui/core
- Setelah selesai kita bisa memilih component/style apa yang akan kita gunakan pada reactjs
B. Struktur direktori pada project React
- node_modules berisi paket-paket modul Nodejs.
- public berisi file untuk publik seperti HTML, CSS, icon, dan gambar.
- index.html adalah file HTML yang akan digunakan aplikasi React untuk render komponen
- 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
- 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.
- Kita beralih ke app.js disini kita akan meng import file yang ada di folder componets dan juga routing.
- Jika sudah kita perintahkan npm start maka akan muncul pada browser kita localhost:3000.