Halo teman-teman semuanya, pada seri artikel kali ini kita semua akan belajar bagaimana cara mengimplementasikan state management di React menggunakan Zustand. Pada studi kasus kali ini, kita semua akan belajar membuat Authentication yang meliputi proses register, login, menampilkan data user di halaman dashboard dan proses logout.
Untuk backend kita akan menggunakan Laravel JWT atau JSON Web Token yang sudah pernah saya bahas sebelumnya, jadi pastikan teman-teman wajib menyelesaikan materi berikut ini, sebelum lanjut belajar di seri ini.
https://santrikoding.com/tutorial-set/laravel-jwt
NOTE : pastikan sudah menyelesaikan materi pada di atas.
Langkah 1 - Installasi Node.js
Hal pertama yang perlu kita siapkan adalah menginstall Node.js di dalam komputer, jika teman-teman belum melakukannya, maka silahkan bisa menginstallnya dan mengikuti langkah-langkahnya dari situs resminya https://nodejs.org/en/download.
Untuk memastikan apakah Node.js sudah berhasil terinstall di dalam komputer, kita bisa menjalankan perintah berikut ini di dalam terminal/CMD.
node --version
npm --version
Langkah 2 - Membuat Project React (Vite)
Kita lanjutkan, setelah berhasil menginstall Node.js di dalam komputer, maka sekarang kita sudah bisa memulai membuat project React menggunakan Vite.
Silahkan teman-teman masuk ke dalam folder dimana teman-teman akan menyimpan project-nya, kemudian jalankan perintah berikut ini di dalam terminal/CMD.
npm create vite@5.2.3 react-zustand -- --template react
Perintah di atas, akan mengenerate template project React dengan Vite dan namanya adalah react-zustand.
Langkah 2 - Menjalankan Project React
Setelah template project berhasil ter-generate, langkah berikutnya adalah menginstall dependensi yang dibutuhkan.
Silahkan teman-teman masuk ke dalam folder project-nya menggunakan terminal, dengan cara berikut ini.
cd react-zustand
Setelah berhasil masuk ke dalam folder project-nya, selanjutnya silahkan jalankan perintah berikut ini di dalam terminal/CMD.
npm install
Silahkan teman-teman tunggu proses installasinya sampai selesai dan pastikan komputer terhubung dengan internet.
Setelah proses installasi dependensi selesai, maka langkah berikutnya adalah menjalankan project -nya. Caranya, silahkan teman-teman jalankan perintah berikut ini di dalam terminal/CMD.
npm run dev
Jika berhasil, maka project kita akan dijalankan di dalam localhost menggunakan port 5173. Teman-teman bisa membukanya di http://localhost:5173. Jika berhasil, maka hasilnya seperti berikut ini.
Kesimpulan
Pada artikel kali ini, kita semua telah belajar bagaimana cara membuat dan menjalankan project React menggunakan Vite.
Pada artikel berikutnya, kita semua akan belajar bagaimana cara install dan konfigurasi React Router DOM di dalam project React untuk membuat navigasi secara SPA (single page application).
Terima Kasih