Tutorial React dan Laravel 10 #1: Cara Install dan Menjalankan React (Vite)


Fika Ridaul Maulayya
Full-Stack Developer, Content Creator and CO-Founder SantriKoding.com
Tutorial React dan Laravel 10 #1: Cara Install dan Menjalankan React (Vite)

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



Fika Ridaul Maulayya
Full-Stack Developer, Content Creator and CO-Founder SantriKoding.com

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. Terima kasih atas dukungan Anda!

KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami


ARTIKEL TERKAIT