Jika Anda ingin menambahkan / install package React di Laravel 7, ini tutorial yang tepat.
Pada tutorial ini Anda akan mempelajari:
- Cara install react js di laravel 7
- Cara running react js di laravel 7
- Contoh program menggunakan react js di laravel 7
Buat Anda yang penasaran gimana cara install dan menggunakan React Js di Laravel 7, mari kita mulai.
Let’s go!
Pendahuluan
ReactJs merupakan framework Javascript yang populer di kalangan programmer.
ReactJs merupakan framework Javascript yang populer di kalangan programmer.
Selain ReactJs, Laravel juga menyediakan package bootstrap dan VueJs.
Pada Laravel 7 ReactJs menjadi salah satu package untuk menangani front end.
Apa itu front end?
Front end merupakan bagian dari website yang menyuguhkan tampilan UI kepada user.
Tampilan ini biasa dibangun dengan HTML (HyperText Markup Language), CSS (Cascading Style Sheets), dan JavaScript (ReactJs atau VueJs).
Programmer yang bekerja di baliknya atau Front end developer bertugas mengembangkan semua komponen visual pada situs web dan menjaga tampilan antarmuka.
Front end developer juga bertugas menangani tampilan depan alias User Interface (UI) suatu website agar lebih menarik.
ReactJs adalah salah satu fremework tersebut.
Banyak situs-situs besar yang sudah menggunakan ReactJs, di antaranya:
- Tokopedia
- Kumparan
- Tiket dot com
- Traveloka
- Dan lain-lain
Cara Install React Js di Laravel 7
Step 1 – Install Laravel 7 dengan Composer
Jika Anda belum memiliki / install Laravel 7, silahkan lakukan instalasi terlebih dahulu.
Rekomendasi: Cara Install Laravel 7 dengan Composer
Step 2 – Install React Js dengan Composer
Setelah melakukan installasi, silahkan masuk ke dalam direktori project Anda.
Misalnya nama project Anda blog.
Ketik command berikut ini:
composer require laravel/ui
Command tersebut berguna untuk menambahkan package Laravel UI.
Sejak Laravel 6, bagian tampilan sudah dipisahkan oleh framework Laravel. Jadi perlu install lagi.
Perhatikan gambar berikut ini:
Kemudian install ReactJs dengan command berikut:
php artisan ui react
Perhatikan gambar berikut:
Jika Anda ingin menginstall auth menggunakan ReactJs bisa melalui command berikut (optional):
php artisan ui react --auth
Maka Anda akan memiliki sistem auth (login, logout dll) menggunakan ReactJs.
Cara Running ReactJs di Laravel 7
Sejak Laravel 6, Anda direkomendasikan untuk menginstall NodeJs.
Baca: Belajar NodeJs untuk Pemula
Karena akan berhubungan dengan mengaktifkan package UI di Laravel.
Untuk running, silahkan masuk ke direktori project Anda, kemudian ketik command berikut:
npm install && npm run dev
Perhatikan gambar berikut ini:
Selesai.
Contoh Program Laravel 7 Menggunakan React Js
Step 1 – Tambahkan Route Berikut
Route::view('/', 'app');
Route::view('/{path}', 'app');
… dan simpan di direktori routes/web.php.
Step 2 – Buat Halaman View App
Buat file baru bernama app.blade.php dan kemudian ketik kode berikut ini:
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>React Laravel</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="example"></div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
Kemudian simpan.
Step 3 – Running NPM Run Development
Agar bisa berjalan dengan baik, ketik command berikut (lagi):
npm run dev
Sebelumnya kita sudah mengetikkan command di atas, kenapa diketik lagi?
Simplenya karena ada perubahan, jadi mesti dikonfigurasi ulang.
Step 4 – Testing
Jalankan command berikut ini:
php artisan serve
Buka URL berikut di browser Anda:
localhost:8000
Hasilnya:
Apa Selanjutnya?
Demikianlah tutorial cara install dan menggunakan react js di laravel 7 menggunakan composer.
… tapi jangan puas dulu.
Selanjutnya Anda bisa mempelajari:
- Cara install / menggunakan Vue Js di Laravel 7
- CRUD Laravel 7 Menggunakan Bootstrap
- Tutorial CRUD Laravel 7 Menggunakan ReactJs
- CRUD Laravel 7 Menggunakan VueJs
Selamat belajar …
apakah setiap ada perubah pada file react yg sedang kita buat harus melakukan konfigurasi ulang dengan npm run dev?
Ya, itu dilakukan agar terjadi singkronisasi antara file react js dengan app.css dan app.js di folder public
cara ngoding pake laravel ui dlm satu projek sama terpisah kyk ada projek react & projek laravel apa bedanya ya?
tergantung kebutuhan. mau dipisah apa langsung satu project dengan laravel.
bedanya?
yang satu project terpisah yang satu lagi terpisah.