Advertisement
  1. Code
  2. React

Membangun Aplikasi React dengan Laravel Back End: Part 2, React

Scroll to top
Read Time: 13 min
This post is part of a series called Build a React App with Laravel Backend.
Build a React App With a Laravel RESTful Back End: Part 1, Laravel 9 API

Indonesian (Bahasa Indonesia) translation by Meyria (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Ini adalah bagian kedua dan terakhir dari rangkaian pembuatan aplikasi React dengan back end Laravel. Pada bagian pertama dari rangkaian, kita membuat RESTful API menggunakan Laravel untuk aplikasi daftar-produk dasar. Dalam tutorial ini, kita akan mengembangkan front end menggunakan React.

Kami juga akan mempertimbangkan semua opsi yang tersedia untuk menjembatani kesenjangan antara Laravel dan React. Anda tidak perlu mengikuti salah satu bagian dari rangkaian ini untuk memahami tutorial ini. Jika Anda berada di sini untuk melihat bagaimana React dan Laravel berjalan bersama, Anda bisa, pada kenyataannya, hindari bagian pertama. Anda harus menuju ke GitHub, mengkloning ulang repo, dan mengambil catatan singkat di bawah untuk memulainya.

Ringkasan Singkat

Pada tutorial sebelumnya, kita mengembangkan aplikasi Laravel yang merespons panggilan API. Kita membuat route, controller, dan model untuk aplikasi daftar produk sederhana. Karena tugas controller untuk mengembalikan respons terhadap permintaan HTTP, bagian view sepenuhnya dilewati.

Kemudian kita membahas teknik penanganan dan validasi pengecualian menggunakan Laravel. Pada akhir tutorial, kita memiliki API back-end Laravel. Kini kita dapat menggunakan API ini untuk membuat aplikasi untuk web dan berbagai perangkat seluler.

Dalam tutorial ini, kita akan menggeser fokus kita ke arah front end. Bagian pertama dari tutorial ini adalah tentang pengaturan React di lingkungan kerja Laravel. Saya juga akan memperkenalkan Anda ke Laravel Mix (didukung oleh Laravel 5.4 dan setelahnya), yang merupakan API untuk mengumpulkan aset. Pada bagian kedua tutorial, kita akan mulai membangun aplikasi React dari awal.

Menyiapkan React di Laravel

Laravel Mix diperkenalkan di Laravel 5.4, dan saat ini merupakan cara ideal untuk menghubungkan React dan Laravel. Dengan Laravel 5.5, keseluruhan proses menjadi lebih mudah. Saya telah menjelaskan kedua metode di bawah ini.

Menggunakan Perintah React Preset (Laravel 5.5)

Laravel 5.5 memiliki fitur baru yang memungkinkan Anda menancapkan kode untuk komponen React menggunakan perintah command artisan preset react. Dalam versi Laravel sebelumnya, pengaturan React di dalam Laravel tidak semudah ini. Jika Anda menjalankan versi terbaru Laravel, jalankan perintah di bawah ini untuk menambahkan React preset ke proyek Anda.

Laravel secara default akan dikirim dengan Vue preset, dan perintah di atas menggantikan semua contoh Vue dengan React. Menariknya, jika Anda tidak memerlukan preset, Anda bisa menghapusnya sama sekali menggunakan perintah command php artisan preset none.

Jika semuanya berjalan baik, ini seharusnya muncul di terminal Anda.

Di latar belakang, Laravel menggunakan Laravel Mix, yang merupakan pembungkus halus untuk webpack. Webpack, seperti yang mungkin sudah Anda ketahui, adalah modul bundler. Ini menyelesaikan semua dependensi modul dan menghasilkan aset statis yang diperlukan untuk JavaScript dan CSS. React membutuhkan modul bundler untuk bekerja, dan webpack sangat sesuai dengan peran itu. Jadi Laravel Mix adalah lapisan yang berada di atas webpack dan membuatnya lebih mudah untuk menggunakan webpack di Laravel.

Pemahaman yang lebih baik tentang bagaimana cara kerja Laravel Mix sangat penting jika anda perlu menyesuaikan konfigurasi webpack saat di lain waktu. Perintah React preset memberi kita tidak ada informasi tentang bagaimana segala sesuatu bekerja di latar belakang. Jadi, mari kita hapus React preset dan menelusuri kembali langkah-langkahnya secara manual

Metode Manual (Laravel 5.4)

Jika anda menjalankan Laravel 5.4, atau jika anda hanya ingin tahu bagaimana Laravel Mix dikonfigurasi, berikut adalah langkah-langkah yang harus anda ikuti:

Pasang react, react-dom dan babel-preset-react menggunakan npm. Mungkin ide bagus untuk memasang benang juga. Bukan rahasia lagi bahwa Laravel dan React lebih memilih yarn dibanding npm.

Menuju ke webpack.mix.js, terletak di dalam root direktori proyek Laravel anda. Ini adalah file konfigurasi dimana anda menyatakan bagaimana aset anda harus dikompilasi. Ganti barismix.js('resources/assets/js/app.js', 'public/js'); dengan mix.react('resources/assets/js/app.js', 'public/js');. app.js adalah titik masuk untuk file JavaScript kita, dan file yang dikompilasi akan ditempatkan di dalam public/js. Jalankan npm install di terminal untuk memasang semua dependensi.

Selanjutnya, masuk ke resources/assets/js. Sudah ada folder komponen dan beberapa file JavaScript lainnya. Komponen react akan masuk ke dalam direktori komponen. Hapus file Example.vue yang ada dan buat file baru untuk sampel komponen React.

resources/assets/js/component/Main.js

Perbarui app.js untuk menghapus semua kode terkait Vue dan impor komponen React sebagai gantinya.

resources/assets/js/app.js

Sekarang, kita hanya perlu membuat aset yang dapat diakses oleh View. File tampilan terletak di dalam direktori resources/views. Mari tambahkan <script> tag untuk welcome.blade.php, yang merupakan halaman default yang diberikan saat anda menavigasi ke localhost:8000/. Hapus isi file view dan ganti dengan kode di bawah ini:

resources/views/welcome.blade.php

Akhirnya, jalankan npm run dev atau yarn run dev untuk mengkompilasi aset. Jika Anda mengunjungi localhost:8000, anda seharusnya melihat:

Laravel and React running togetherLaravel and React running togetherLaravel and React running together
React tertanam di dalam view Laravel.

package.json memiliki watch script yang otomatis-mengkompilasi aset ketika perubahan terdeteksi. Untuk mengaktifkan mode ini, jalankan npm run watch.

Selamat, Anda telah berhasil mengkonfigurasi React untuk bekerja dengan Laravel. Sekarang, mari kita buat beberapa komponen React untuk front ned.

Mengembangkan Aplikasi React

Jika anda baru mengenal React, anda akan mendapati sisa dari tutorial agak menantang. Saya sarankan untuk mengikuti rangkaian Kursus Kilat React Untuk Pemula untuk berkenalan dengan konsep React dengan lebih baik. Mari kita mulai!

Aplikasi React dibangun di sekitar komponen. Komponen adalah struktur terpenting dalam React, dan kita memiliki direktori yang didedikasikan untuk komponen.

Komponen membiarkan anda membagi UI menjadi potongan yang dapat diandalkan dan dapat digunakan kembali, dan memikirkan masing-masing bagian dalam isolasi. Secara konseptual, komponen seperti fungsi JavaScript. Mereka menerima masukan yg berubah-ubah (disebut "props") dan mengembalikan elemen React yang menjelaskan apa yang seharusnya muncul di layar.
— Dokumentasi Resmi React

Untuk aplikasi yang sedang kita bangun, kita akan mulai dengan komponen dasar yang menampilkan semua produk yang dikembalikan oleh server. Anggap saja itu komponen utama. Komponen harus menangani hal-hal berikut ini pada awalnya:

  • Ambil semua produk dari API (GET /api/products).
  • Simpan data produk pada state-nya.
  • Tampilkan data produk.

React bukan framework lengkap, dan karenanya library tidak memiliki fitur AJAX sendiri. Saya akan menggunakan fetch(), yang merupakan API JavaScript standar untuk mengambil data dari server. Tetapi ada banyak alternatif untuk membuat panggilan AJAX ke server.

resources/assets/js/component/Main.js

Di sini kita menginisialisasi state products ke array kosong di constructor. Setelah komponen dipasang, kita menggunakan fetch() untuk mengambil produk dari /api/products dan menyimpannya di dalam state-nya. Metode render digunakan untuk menggambarkan UI komponen. Semua produk bisa diberikan sebagai daftar di sana.

Screenshot of the React Application - List of all productsScreenshot of the React Application - List of all productsScreenshot of the React Application - List of all products

Halaman hanya mencantumkan judul produk, yang membosankan. Selain itu, kita belum memiliki elemen interaktif di sana. Mari membuat judul produk bisa diklik, dan saat diklik, rincian lebih lanjut tentang produk akan diberikan.

Menampilkan Data Produk

Inilah daftar hal-hal yang perlu kita bahas:

  • Sebuah state untuk melacak produk yang diklik. Mari kita sebut currentProduct dengan nilai awal null.
  • Saat judul produk diklik, this.state.currentProduct akan diperbarui.
  • Rincian produk-produk yang bersangkutan ditampilkan di sebelah kanan. Sampai sebuah produk dipilih, ini akan menampilkan pesan "Tidak ada produk yang dipilih".

resources/assets/js/component/Main.js

Di sini kita telah menambahkan createProduct ke state dan menginisialisasinya dengan nilai null. Baris onClick={ () =>this.handleClick(product) } memanggil metode handleClick()saat daftar item diklik. Metode handleClick() memperbarui state currentProduct.

Sekarang untuk menampilkan data produk, kita bisa memasukkannya ke dalam komponen Main atau membuat sebuah komponen baru. Seperti yang telah disebutkan sebelumnya, membelah UI menjadi komponen yang lebih kecil adalah cara React untuk melakukan sesuatunya. Jadi kita akan membuat komponen baru dan menamainya Product.

Komponen Product bersarang di dalam komponen Main. Komponen Main melewati state-nya sebagai alat peraga. Komponen Product menerima alat peraga ini sebagai inputan dan me-render informasi yang bersangkutan.

resources/assets/js/component/Main.js

resources/assets/js/component/Product.js

Aplikasi akan terlihat seperti ini sekarang:

Screenshot of the React application with product details displayedScreenshot of the React application with product details displayedScreenshot of the React application with product details displayed

Menambahkan Produk Baru

Kita telah berhasil mengimplementasikan front end yang sesuai untuk mengambil semua produk dan menampilkannya. Selanjutnya, kita memerlukan suatu form untuk menambahkan produk baru ke daftar produk. Proses untuk menambahkan produk mungkin terasa sedikit lebih rumit daripada hanya mengambil data dari API.

Inilah yang saya pikir diperlukan untuk mengembangkan fitur ini:

  • Komponen stateful baru yang me-render UI untuk sebuah form input. State komponen menyimpan data form.
  • Saat disubmit, komponen anak melewati state ke komponen Main menggunakan callback.
  • Komponen Main memiliki sebuah metode, katakanlah handleNewProduct(), yang menangani logika untuk memulai permintaan POST. Setelah menerima tanggapan, komponen Main memperbarui state-nya (baik this.state.products dan this.state.currentProduct)

Itu tidak terdengar sangat rumit, bukan? Mari kita lakukan langkah demi langkah. Pertama, buat komponen baru. Saya akan menyebutnya AddProduct.

resources/assets/js/component/AddProduct.js

Komponen pada dasarnya me-render sebuah form input, dan semua nilai masukan yang disimpan di state (this.state.newProduct). Kemudian, pada form pengajuan, metode handleSubmit() akan dipanggil. Tetapi AddProduct perlu mengkomunikasikan informasi yang kembali ke induk dan kita melakukannya dengan menggunakan callback.

Komponen Main, yang merupakan induk, melewati referensi fungsi sebagai alat peraga. Komponen anak, AddProduct dalam kasus kita, memanggil alat peraga ini untuk memberitahu induk dari perubahan state. Jadi baris this.props.onAdd(this.state.newProduct); adalah contoh callback yang memberitahu komponen induk dari produk baru.

Sekarang, di dalam komponen Main, kita akan menyatakan <AddProduct /> sebagai berikut:

Event handler OnAdd dikaitkan ke metode komponen handleAddProduct(). Metode ini menempati kode untuk membuat permintaan POST ke server. Jika respon menunjukkan bahwa produk telah berhasil dibuat, state products dan currentProducts akan diperbarui.

Jangan lupa untuk mengikat metode handleProduct ke kelas menggunakan this.handleAddProduct = this.handleAddProduct.bind(this); di dalam konstruktor. Dan ini adalah versi final dari aplikasi:

Screenshot of the final version of the applicationScreenshot of the final version of the applicationScreenshot of the final version of the application

Apa Selanjutnya?

Aplikasi tidak lengkap tanpa fitur hapus dan ubah. Tetapi jika anda sudah mengikuti tutorial dengan teliti sampai sekarang, Anda harus mampu mengisi kekosongan tanpa banyak kesulitan. Untuk anda memulai, Saya telah menyediakan logika event handler untuk skenario hapus dan ubah.

Logika untuk Menghapus Produk

Logika untuk Memperbarui Produk yang Sudah Ada

Apa yang perlu anda lakukan adalah menyelaminya lebih dalam, biarkan tangan anda kotor dan selesaikan aplikasi dengan menggunakan logika diatas. Saya akan menunrunkan anda suatu petunjuk: tombol hapus idealnya harus masuk ke dalam komponen Product, sedangkan fitur ubah harus memiliki komponen sendiri. Saya mendorong anda untuk mengambil tantangan ini dan menyelesaikan komponen yang hilang.

Ringkasan

Kita telah melangkah jauh dari saat dimana kita memulai. Pertama, kita menciptakan sebuah REST API menggunakan framework Laravel. Kemudian, kita mendiskusikan pilihan kita untuk menggabungkan Laravel dan React. Yang Terakhir, kita membangun sebuah front end ke API menggunakan React.

Meskipun semula kita fokus untuk membuat aplikasi satu-halaman menggunakan React, anda bisa membuat widget atau komponen yang dipasang untuk unsur-unsur tertentu di view anda. React sangat fleksibel karena ini sebuah library, dan salah satu yang bagus. 

Selama beberapa tahun terakhir, React telah tumbuh dalam popularitas. Bahkan, kami telah memiliki sejumlah item di marketplace yang tersedia untuk pembelian, peninjauan, implementasi, dan sebagainya. Jika anda sedang mencari sumber-sumber tambahan seputar React, jangan ragu untuk memeriksanya.

Apakah anda mencoba bereksperimen dengan Laravel dan React sebelumnya? Apa yang anda pikirkan? Berbagilah dengan kami di komentar.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.