Pada tutorial ini kita akan belajar cara membuat CRUD menggunakan Laravel 10 dan React.js. React.js akan kita gunakan sebagai frontend yang mengambil data dari REST API yang dibuat oleh Laravel. Pada tutorial ini juga akan belajar menggunakan build tools yang bernama Vite untuk membuat project React.js-nya.
Pengertian 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.
Untuk mendukung pembelajaran pada tutorial ini, sebaiknya silahkan pelajari dulu Tutorial tentang membuat REST API di Laravel 10 pada link berikut ini.
Membuat Project React dengan Vite
1. Installasi Node.js
Sebelum kita lanjutkan, kita harus menginstall Node.js terlebih dahulu di dalam komputer. Jika belum menginstall-nya, maka silahkan bisa menginstallnya dengan mengikuti turorialnya pada link berikut ini.
Untuk memeriksa apakah Node.js sudah berhasil terinstall, silahkan buka Terminal/CMD dan jalankan perintah berikut ini di dalam terminal/CMD tersebut.
node --version
2. Membuat Project React dengan Vite
Setelah Node.js sudah berhasil terinstall, maka kita bisa lanjutkan membuat project React menggunakan Vite. Silahkan masuk ke dalam folder 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
Tunggu proses installasinya selesai dan pastikan terhubung dengan internet.
3. Menjalankan Project React dengan Vite
Setelah proses installasi selesai, silahkan 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 (http://localhost:5173/).
Demikian cara membuat project Reactjs dengan Vite, pada artikel selanjutnya kita akan belajar cara installasi dan konfigurasi React Router DOM di dalam project React.
Jika ada pertanyaan silahkan tuliskan di kolom komentar, termia kasih dan semoga bermanfaat.
Referensi :
- https://santrikoding.com/tutorial-react-dan-laravel-10-1-cara-install-dan-menjalankan-react-vite