30-50% off hundreds of digital assets! WordPress themes, video, music and more 30-50% Off Go to Sale
Advertisement
  1. Code
  2. React
Code

Bina Reaksi App Dengan Laravel Akhir: Bahagian 2, Reaksi

by
Difficulty:IntermediateLength:LongLanguages:
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 5.5 API

Malay (Melayu) translation by Seurion (you can also view the original English article)

Final product image
What You'll Be Creating

Ini adalah bahagian kedua dan terakhir siri membina aplikasi React dengan akhir belakang Laravel. Di bahagian pertama siri ini, kami mencipta API RESTful menggunakan Laravel untuk aplikasi penyenaraian produk asas. Dalam tutorial ini, kami akan membangunkan bahagian depan menggunakan React.

Kami juga akan mempertimbangkan semua pilihan yang ada untuk merapatkan jurang antara Laravel dan React. Anda tidak perlu mengikuti sebahagian daripada siri untuk memahami tutorial ini. Jika anda di sini untuk melihat bagaimana React dan Laravel tambang bersama, anda boleh, sebenarnya, elakkan bahagian pertama. Anda harus menuju ke GitHub, mengklon semula repo, dan mengambil rekod cepat di bawah untuk memulakan.

Recap Cepat

Dalam tutorial sebelumnya, kami membangunkan aplikasi Laravel yang bertindak balas terhadap panggilan API. Kami mencipta laluan, pengawal, dan model untuk aplikasi penyenaraian produk mudah. Oleh kerana tugas pengawal untuk membalas respon permintaan HTTP, bahagian pandangan sepenuhnya dilangkau.

Kemudian kami membincangkan teknik untuk pengendalian pengecualian dan pengesahan menggunakan Laravel. Pada akhir tutorial, kami mempunyai API back-end Laravel. Kini kami boleh menggunakan API ini untuk membina aplikasi untuk kedua-dua web dan pelbagai peranti mudah alih.

Dalam tutorial ini, kami akan memindahkan fokus kami ke arah hujung depan. Separuh pertama tutorial adalah mengenai menubuhkan React dalam persekitaran Laravel. Saya juga akan memperkenalkan anda kepada Laravel Mix (disokong oleh Laravel 5.4 dan kemudian), yang merupakan API untuk menyusun aset. Pada separuh kedua tutorial, kami akan mula membina aplikasi React dari awal.

Menyediakan React dalam Laravel

Laravel Mix diperkenalkan di Laravel 5.4, dan kini ia merupakan cara yang ideal untuk menyambung React dan Laravel. Dengan Laravel 5.5, keseluruhan proses dibuat lebih mudah. Saya telah menerangkan kedua-dua kaedah di bawah.

Menggunakan Perintah Preset Reaktik (Laravel 5.5)

Laravel 5.5 mempunyai ciri baru yang membolehkan anda membuat perancah kod untuk komponen React menggunakan arahan reaksi pratetap artisan. Dalam versi sebelumnya Laravel, menubuhkan React di dalam Laravel tidak mudah. Jika anda menjalankan versi terkini Laravel, kemudian jalankan arahan di bawah untuk menambah pratetapan React pada projek anda.

Laravel secara lalai akan dihantar dengan preset Vue, dan perintah di atas menggantikan semua contoh Vue dengan React. Menariknya, jika anda tidak memerlukan pratetap, anda boleh mengalihnya menggunakan perintah php artisan preset none.

Sekiranya semuanya berjalan lancar, ini akan muncul di terminal anda.

Di latar belakang, Laravel menggunakan Laravel Mix, yang merupakan pembalut lembut untuk webpack. Webpack, seperti yang anda sudah tahu, adalah pengatur modul. Ia menyelesaikan semua ketergantungan modul dan menghasilkan aset statik yang diperlukan untuk JavaScript dan CSS. React memerlukan bundler module untuk bekerja, dan webpack sesuai dengan peranan tersebut. Jadi Laravel Mix adalah lapisan yang terletak di atas webpack dan memudahkan untuk menggunakan webpack di Laravel.

Pemahaman yang lebih baik tentang bagaimana kerja-kerja Laravel Mix adalah penting jika anda perlu menyesuaikan konfigurasi webpack pada masa akan datang. Perintah pratetapan React memberikan kita tiada maklumat tentang bagaimana kerja-kerja di latar belakang. Oleh itu mari kita keluarkan pratetapan React dan menjejaki semula langkah-langkah secara manual.

Kaedah Manual (Laravel 5.4)

Jika anda menjalankan Laravel 5.4, atau jika anda hanya ingin tahu bagaimana Mix Laravel dikonfigurasikan, berikut langkah-langkah yang perlu anda ikuti:

Pasang react, react-dom dan babel-preset- react menggunakan npm. Mungkin idea yang baik untuk memasang benang juga. Bukan rahsia lagi bahawa Laravel dan React lebih suka benang berbanding npm.

Kepala ke webpack.mix.js, yang terletak di dalam direktori root projek Laravel anda. Ini ialah fail konfigurasi di mana anda mengisytiharkan bagaimana aset anda perlu disusun. Gantikan barisan mix.js('resources/assets/js/app.js', 'public/js'); dengan mix.react('resources/assets/js/app.js', 'public/js'); app.js adalah titik masuk untuk fail JavaScript kami, dan fail yang dikompilasi akan ditempatkan di dalam awam/js. Jalankan pemasangan npm di terminal untuk memasang semua ketergantungan.

Seterusnya, pergi ke sumber/aset/js. Terdapat folder komponen dan beberapa fail JavaScript yang lain. Komponen reaksi akan masuk ke dalam direktori komponen. Keluarkan fail Example.vue yang ada dan buat fail baru untuk komponen React sample.

resources/assets/js/component/Main.js

Kemas kini app.js untuk mengalih keluar semua kod berkaitan Vue dan mengimport komponen React sebaliknya.

resources/assets/js/app.js

Sekarang, kita hanya perlu membuat aset boleh diakses oleh View. Fail paparan terletak di dalam direktori sumber/pandangan. Mari tambahkan <script> tag kepada welcome.blade.php, yang merupakan halaman lalai yang diberikan apabila anda menavigasi ke localhost:8000/. Keluarkan kandungan fail paparan dan gantikannya dengan kod di bawah:

resources/views/welcome.blade.php

Akhirnya, jalankan npm run dev atau yarn run dev untuk menyusun aset. Jika anda melawat localhost:8000, anda harus melihat:

Laravel and React running together
Reaktikkan tertanam di dalam pandangan Laravel.

Package.json mempunyai skrip menonton yang menyusun auto aset apabila sebarang perubahan dikesan. Untuk mendayakan mod ini, jalankan npm run watch.

Congrats, anda telah berjaya mengonfigurasi React untuk bekerja dengan Laravel. Sekarang, mari kita buat beberapa komponen React untuk bahagian hadapan.

Membangunkan Permohonan Reaktik

Sekiranya anda baru untuk React, anda akan mendapati tutorial lain yang agak mencabar. Saya mengesyorkan untuk mengambil siri-siri Kursus React Crash untuk Pemula untuk berkenalan dengan konsep React yang lebih baik. Mari kita mulakan!

Permohonan Reacta dibina di sekitar komponen. Komponen adalah struktur yang paling penting dalam React, dan kami mempunyai direktori khusus untuk komponen.

Komponen membolehkan anda memisahkan UI ke dalam kepingan bebas, boleh diguna semula, dan memikirkan setiap bahagian dalam pengasingan. Secara konseptual, komponen adalah seperti fungsi JavaScript. Mereka menerima input sewenang-wenangnya (disebut "props") dan mengembalikan elemen React yang menerangkan apa yang sepatutnya muncul di skrin.
Dokumen Reaktif Rasmi

Untuk aplikasi yang kami sedang membina, kami akan bermula dengan komponen asas yang memaparkan semua produk yang dikembalikan oleh pelayan. Mari kita namakan komponen Utama. Komponen ini harus menjaga perkara-perkara berikut pada mulanya:

  • Ambil semua produk dari API (GET/api/produk).
  • Simpan data produk dalam keadaannya.
  • Paparkan data produk.

Reaktik bukan kerangka penuh, dan oleh itu perpustakaan tidak mempunyai ciri-ciri AJAX sendiri. Saya akan menggunakan fetch(), yang merupakan API JavaScript standard untuk mengambil data dari pelayan. Tetapi terdapat banyak alternatif untuk membuat panggilan AJAX ke pelayan.

sumber/aset/js/komponen/Main.js

Di sini kita memulakan keadaan produk ke array kosong dalam pembina. Setelah komponen dipasang, kami menggunakan fetch() untuk mendapatkan produk dari /api/produk dan menyimpannya dalam keadaan. Kaedah render digunakan untuk menggambarkan UI komponen. Semua produk boleh dijadikan sebagai senarai di sana.

Screenshot of the React Application - List of all products

Halaman hanya menyenaraikan tajuk produk, yang membosankan. Lebih-lebih lagi, kita tidak mempunyai elemen interaktif di sana lagi. Mari buat penjelasan produk yang dapat diklik, dan pada klik, butiran lanjut tentang produk akan diberikan.

Memaparkan Data Produk

Inilah senarai perkara yang perlu kita capai:

  • Negeri untuk menjejaki produk yang telah diklik. Mari kita panggil currentProduct dengan nilai awal nol.
  • Apabila tajuk produk diklik, this.state.currentProduk dikemas kini.
  • Butiran produk produk berkenaan dipaparkan di sebelah kanan. Sehingga produk dipilih, ia memaparkan mesej "Tiada produk yang dipilih".

resources/assets/js/component/Main.js

Di sini kami telah menambah createProduct ke dalam negeri dan memulakannya dengan nilai nol. Garis onClick={()=>this.handleClick(produk)} memanggil kaedah handleClick() apabila item senarai diklik. Kaedah handleClick() mengemas kini keadaan currentProduct.

Kini untuk memaparkan data produk, kita boleh menjadikannya di dalam komponen utama atau membuat komponen baru. Seperti yang dinyatakan sebelum ini, memecah UI ke dalam komponen yang lebih kecil adalah cara React untuk melakukan perkara-perkara. Jadi kami akan membuat komponen baru dan namakan Produk.

Komponen Produk bersarang di dalam komponen Utama. Komponen utama melepasi keadaannya sebagai prop. Komponen produk menerima alat ini sebagai input dan membuat maklumat yang relevan.

resources/assets/js/component/Main.js

resources/assets/js/component/Product.js

Aplikasi ini sepatutnya kelihatan seperti ini sekarang:

Screenshot of the React application with product details displayed

Menambah Produk Baru

Kami telah berjaya melaksanakan hujung depan yang sepadan untuk mendapatkan semua produk dan mempamerkannya. Seterusnya, kami memerlukan borang untuk menambah produk baru ke senarai produk. Proses menambah produk mungkin merasakan sedikit lebih kompleks daripada hanya mengambil data dari API.

Inilah yang saya fikir diperlukan untuk membangunkan ciri ini:

  • Komponen negara baru yang membuat UI untuk borang input. Negeri komponen memegang data borang.
  • Semasa menyerahkan, komponen kanak-kanak melepasi keadaan kepada komponen Utama menggunakan panggilan balik.
  • Komponen utama mempunyai kaedah, kata handleNewProduct(), yang menangani logik untuk memulakan permintaan POST. Setelah menerima respons, komponen Utama mengemas kini negeri (kedua-dua this.state.products dan this.state.currentProduct)

Itu tidak begitu rumit, bukan? Mari kita lakukan langkah demi langkah. Pertama, buat komponen baru. Saya akan memanggilnya AddProduct.

resources/assets/js/component/AddProduct.js

Komponen pada dasarnya menghasilkan bentuk input, dan semua nilai masukan disimpan dalam keadaan (this.state.newProduct). Kemudian, dalam penyerahan borang, kaedah handleSubmit() akan digunakan. Tetapi AddProduct perlu menyampaikan maklumat kembali kepada ibu bapa, dan kami melakukan ini menggunakan panggilan balik.

Komponen utama, yang merupakan ibu bapa, melepasi rujukan fungsi sebagai alat peraga. Komponen kanak-kanak, AddProduct dalam kes kami, memanggil alat ini untuk memberitahu ibu bapa perubahan negeri. Jadi baris ini.props.onAdd (this.state.newProduct); adalah contoh panggilan balik yang memberitahu komponen induk produk baru.

Sekarang, dalam komponen Utama, kami akan mengisytiharkan <AddProduct/> seperti berikut:

Pengendali acara onAdd dirantai ke kaedah handleAddProduct() komponen. Kaedah ini menjadi tuan rumah kod untuk membuat permintaan POST ke pelayan. Sekiranya respons menunjukkan bahawa produk telah berjaya dicipta, keadaan produk dan currentProduct terkini dikemas kini.

Jangan lupa untuk mengikat kaedah handleProduct ke kelas menggunakan this.handleAddProduct = this.handleAddProduct.bind (ini); dalam pembina. Dan inilah versi akhir permohonan:

Screenshot of the final version of the application

Apa selepas ini?

Aplikasi ini tidak lengkap tanpa memadam dan mengemas kini ciri-ciri. Tetapi jika anda telah mengikuti tutorial ini sehingga kini, anda sepatutnya dapat mengisi kekosongan tanpa banyak masalah. Untuk memulakan anda, saya telah memberikan anda logik pengendali peristiwa untuk kedua-dua memadam dan mengemas kini senario.

Logik untuk Menghapuskan Produk

Logik untuk Mengemaskini Produk Sedia Ada

Apa yang perlu anda lakukan adalah menyelam, dapatkan tangan anda kotor, dan selesaikan aplikasi menggunakan logik di atas. Saya akan menggugurkan petunjuk anda: Butang padam sebaiknya masuk ke dalam komponen Produk, sedangkan ciri kemas kini harus mempunyai komponen sendiri. Saya menggalakkan anda untuk mengambil cabaran ini dan menyelesaikan komponen yang hilang.

Ringkasan

Kami telah datang jauh dari mana kami mula. Pertama, kami mencipta API REST menggunakan rangka kerja Laravel. Kemudian, kami membincangkan pilihan kami untuk mencampurkan Laravel dan React. Akhirnya, kami membina bahagian hadapan API menggunakan React.

Walaupun kami memberi tumpuan utama untuk membuat aplikasi satu halaman menggunakan React, anda boleh membuat widget atau komponen yang dipasang pada elemen tertentu dalam pandangan anda. React sangat fleksibel kerana ia adalah perpustakaan, dan yang baik.

Sepanjang dua tahun terakhir, React telah berkembang popular. Malah, kami mempunyai beberapa item di pasaran yang tersedia untuk pembelian, kajian, pelaksanaan, dan sebagainya. Jika anda mencari sumber tambahan di sekitar React, jangan ragu untuk semak mereka.

Pernahkah anda cuba bereksperimen dengan Laravel and React sebelum ini? Apa pendapat awak? Berkongsi mereka dengan kami di dalam komen.

Advertisement
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.