Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

Cara Install dan Menggunakan React Js di Laravel 7

2 min read

Cara Install React Js di Laravel 7

Jika Anda ingin menambahkan / install package React di Laravel 7, ini tutorial yang tepat.

Pada tutorial ini Anda akan mempelajari:

  1. Cara install react js di laravel 7
  2. Cara running react js di laravel 7
  3. 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:

  1. Tokopedia
  2. Kumparan
  3. Tiket dot com
  4. Traveloka
  5. 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:

cara install react js di laravel 7 - gambar 1

Kemudian install ReactJs dengan command berikut:

php artisan ui react 

Perhatikan gambar berikut:

cara install react js di laravel 7 - gambar 2

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:

cara install react js di laravel 7 - gambar 3

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:

hasil running

Apa Selanjutnya?

Demikianlah tutorial cara install dan menggunakan react js di laravel 7 menggunakan composer.

… tapi jangan puas dulu.

Selanjutnya Anda bisa mempelajari:

  1. Cara install / menggunakan Vue Js di Laravel 7
  2. CRUD Laravel 7 Menggunakan Bootstrap
  3. Tutorial CRUD Laravel 7 Menggunakan ReactJs
  4. CRUD Laravel 7 Menggunakan VueJs

Selamat belajar …

Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

Leave a Reply

Your email address will not be published. Required fields are marked *

Jika terbantu dengan artikel ini, silahkan share, beri komentar dan "klik" 1 kali pada iklan ya.