Halo teman-teman semuanya, pada kesempatan kali ini kita semua akan belajar bagaimana cara membuat CRUD menggunakan React.js dan Laravel 10.
React.js akan kita gunakan sebagai frontend yang mengkonsumsi atau mengambil data dari Rest API yang dibuat oleh Laravel. Kita juga akan belajar menggunakan build tools yang bernama Vite untuk membuat project React.js-nya.
Apa itu Vite ?
Vite adalah sebuah framework JavaScript open-source yang digunakan untuk membangun aplikasi frontend yang cepat dan efisien. Vite berfokus pada performa yang cepat dan pengembangan yang mudah.
Salah satu fitur unggulan dari Vite adalah kemampuannya untuk melakukan hot-reloading, yang memungkinkan pengembang untuk melihat perubahan pada kode secara langsung tanpa perlu melakukan reload pada halaman web.
Selain itu, Vite juga mendukung banyak plugin dan integrasi dengan teknologi-teknologi terbaru seperti TypeScript, Vue, React, dan lainnya.
Sebelum Melanjutkan!
Sebelum teman-teman melanjutkan seri artikel ini, pastikan teman-teman sudah menyelesaikan seri artikel membuat Rest API di Laravel 10. Berikut link-nya : https://santrikoding.com/tutorial-set/tutorial-restful-api-laravel-10
Langkah 1 - Installasi Node.js
Sebelum kita lanjutkan, kita harus menginstall Node.js terlebih dahulu di dalam komputer. Jika teman-teman belum menginstall-nya, maka silahkan bisa menginstallnya dengan mengikuti link berikut ini https://nodejs.org/en, silahkan disesuaikan dengan sistem operasi yang digunakan.
Untuk memeriksa apakah Node.js sudah berhasil terinstall, silahkan teman-teman jalankan perintah berikut ini di dalam terminal/CMD.
node --version
npm --version
Langkah 2 - Membuat Project React dengan Vite
Setelah Node.js sudah berhasil terinstall, maka kita bisa lanjutkan membuat project React menggunakan Vite.
Silahkan teman-teman masuk ke dalam folder dimana akan menyimpan project-nya, kemudian jalankan perintah berikut ini di dalam terminal/CMD.
npm create vite@4.2.0 react-crud -- --template react
Jika perintah di atas berhasil dijalankan, maka kita akan berhasil dibuatkan scaffolding project-nya dengan nama react-crud.
Setelah itu, silahkan jalankan perintah berikut ini untuk masuk ke dalam folder project-nya.
cd react-crud
Kemudian jalankan perintah berikut ini untuk menginstall library-library yang dibutuhkan.
npm install
Dan silahkan teman-teman tunggu proses installasinya sampai selesai dan pastikan terhubung dengan internet.
Langkah 3 - Menjalankan Project React dengan Vite
Setelah proses installasi selesai, silahkan teman-teman jalankan perintah berikut ini untuk menjalankan project React menggunakan Vite.
npm run dev
Jika berhasil, maka project-nya akan dijalankan di dalam localhost dengan port 5173.
Kesimpulan
Pada artikel ini kita telah belajar mengenal apa itu Vite dan bagaimana cara membuat dan menjalankan project React menggunakan Vite.
Pada artikel selanjutnya kita semua akan beajar bersama-sama bagaimana cara melakukan installasi dan konfigurasi React Router DOM di dalam project React.
Terima Kasih