ahmadajah03 Fri Sep 2020 1 year ago

Program CRUD dengan React Js, Bootstrap dan Laravel

Program CRUD dengan React Js, Bootstrap dan Laravel - Kali ini saya akan membagi contoh program CRUD REST API dengan React Js dan Laravel sebagai backendnya. Untuk yang baru belajar dan baru mendalami ReactJs silahkan download program CRUD ini, yang mungkin bisa membantu anda untuk belajar reactJs. Tapi sebelum itu kita pahami dulu apah itu ReactJs.

 

Apa itu React JS?

React Js adalah sebuah library JavaScript yang di buat oleh facebook. React bukanlah sebuah framework MVC. React adalah library yang bersifat composable user interface, yang artinya kita dapat membuat berbagai UI yang bisa kita bagi menjadi beberapa komponen.

 

Kenapa harus React?

1. Cepat dan Efisien
Karena berbasis komponen maka react hanya perlu me-render  resource yang berhubungan dengan data yang berganti, tidak perlu me-render seluruh resource .

2. Reusable (dapat digunakan berulangkali)
Komponen yang telah kita buat dapat kita gunakan berkali-kali pada saat dibutuhkan. Ini sangat berguna bagi kita untuk mempersingkat waktu dan mengurangi resource yang ada.

3. Library JavaScript
JSX (JavaScript Extension) singkatnya kita dapat menyematkan syntax HTML kedalam Javascript. Ini sangat membantu kita dalam proses development, apalagi dengan adanya  fungsi dari ES6(Ecma Script).

4. Immutable State
Kita dapat memanajemen state yang ada dengan menggunakan Redux. Kita dapat mengatasi permasalahan mutable state dengan RamdaJs. Untuk state yang berinteraksi dengan API kita dapat menggunakan Redux-Saga.

 

KESIMPULAN

Mungkin beberapa pembaca masih perlu penjelasan tambahan apa itu React, JSX, Redux, Redux-Saga. Nanti akan dijelaskan ditutorial selanjutnya saat kita membuat project Apps React.

Intinya:
React memberikan segala kemudahan yang dibutuhkan programmer dalam mendevelop sebuah aplikasi yang ringan,cepat dan mudah digunakan. Selain itu ada juga React Native sebuah framework yang bisa kita gunakan untuk mengembangkan aplikasi Android dan IOS sekaligus dengan menggunakan bahasa JavaScript.

 

Instalasi Program CRUD ReactJS

  • Buat Database pada phpMyAdmin(contoh: latihan_reactjs)
  • Download pindahkan programnya ke dalam htdoc dan masuk ke direktori backend
  • Jalankan Terminal/CMD  pada direktori backend ketik php artisan migrate
  • Selanjutnya Ketik php artisan db:seed
  • Selanjutnya Ketik php artisan key:generate
  • Dan ketik php artisan serve 
  • Buka Browser sesuai alamat serve nya contoh http://127.0.0.1:8000.
  • Jika berhasil akan muncul seperti diabawah ini.

  • Sekarang kita jalankan program reactnya dengan membuka direcktori client.
  • Jalankan Terminal/CMD  pada direktori client ketik npm start jika berhasil makan akan muncul seperti dibawah ini.

 

Untuk menjalankannya di browser silahkan klik url-nya contoh http://loaclhost:3000/. Selamat mencoba semoga berhasil

 

Download