Implementasi React pada halaman CRUD

- December 13, 2019

Implementasi React.js Pada Halaman CRUD

Assalamualaikum teman-teman:). Sekarang disini saya akan mengImplementasikan React.js pada halaman CRUD yang sebelumnya sudah pernah saya buat. Semoga dengan tutorial ini dapat membantu kalian dalam mengerjakan CRUD di React.js yaaa...

1. Pertama-tama pastikan kalian telah melakukan instalasi node.js dan npm untuk mendukung pengerjaan React.js ya. Lalu masuk ke CMD dan ketik perintah seperti dibawah.

2. Lalu jalankan perintah npm start untuk menjalankan React.js dibrowser. pastikan kalian sudah berada didalam folder yang telah kalian buat tadi (contoh seperti gambar diatas, nama folder bebas).

3. Kemudian jalankan dibrowser yang kalian gunakan, ketikan localhost:3000/10.0.0.3:3000 untuk memunculkan tampilan React.js.

4. Masuk ke folder dimana laravelmu, tambahkan edit.php views kalian dengan nama edit.blade.php.

5. Lalu masuk ke controller,tambahkan ini.

6. Kemudian masuk ke edit.blade.php yang terlah kita buat tadi, isikan seperti dibawah ini.

7. Lanjut Masuk ke Routes untuk menambah kan routenya.

8. Tambahkan lagi di data.blade.php script seperti dibawah ini.

9. Kalau sudah tinggal jalankan di browser dengan mengetikkan localhost/folder_kalian/public.

Kita kembali ke React.js sesuai dengan judul yang kita bahas tadi.
React.js apa sih?
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.js?

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.

Sekarang mari kita coba aplikasikan ke React.js.

1. Install Laravel UInya, karena kita membutuhkan beberapa komponen yang harus ada dilaravel. caranya "composer require laravel/ui --dev".

2. Install react, seperti dibawah ini.

3. Kemudian jalankan "npm install && npm run dev"

4. Run "npm run watch".

5. Buat Controller di Api/EmployeeController

6. Buka Controller dalam folder API lalu masukkan script di fungsi index.

7. Tambahkan diatasnya use App\Employee;
8. Buat js baru di dalam resources/js/components/

9. Tambahkan script di dalam app.js dalam folder resource/js

10. Didalam routes API, tambahkan script berikut.

11. Masuk CMD, hentikan proses npm watchnya kemudian install axois seperti dibawah ini.

12. Buka app.js yang ada diresource, lalu tambahkan script ini.

13. Sekarang masuk ke Employee.js didalam resources lalu isi script seperti dibawah ini.

14. buka EmployeeController yang bukan didalam folder API , tapi di App/http/controllers/EmployeeController.php , ganti fungsi indexnya dengan script ini.