Bina aplikasi React dengan hujung belakang Laravel: Bahagian 2, React

Ini adalah bahagian kedua dan terakhir siri untuk membina aplikasi React dengan back-end 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. Anda tidak perlu mengikuti bahagian satu siri untuk memahami tutorial ini. Jika anda berada di sini untuk melihat bagaimana reaksi dan tambang Laravel bersama -sama, anda boleh, sebenarnya, elakkan bahagian pertama. Anda harus menuju ke GitHub, mengklon repo, dan ikuti rekap cepat di bawah untuk memulakan. Kami membuat laluan, pengawal, dan model untuk aplikasi penyenaraian produk mudah. Memandangkan tugas pengawal untuk mengembalikan respons kepada permintaan HTTP, bahagian pandangan telah dilangkau sepenuhnya. Menjelang akhir tutorial, kami mempunyai API back-end Laravel. Kami kini boleh menggunakan API ini untuk membina aplikasi untuk kedua -dua web dan pelbagai peranti mudah alih. Separuh pertama tutorial adalah mengenai penubuhan 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. Dengan Laravel 7, keseluruhan proses dibuat lebih mudah. Saya telah menerangkan kedua -dua kaedah di bawah. Komponen log masuk dan pendaftaran, kedua -duanya untuk pengesahan pengguna.

Di latar belakang, Laravel menggunakan Laravel Mix, yang merupakan pembungkus lancar untuk webpack. Webpack, seperti yang anda sudah tahu, adalah modul modul. Ia menyelesaikan semua kebergantungan modul dan menghasilkan aset statik yang diperlukan untuk JavaScript dan CSS. React memerlukan bundler modul untuk berfungsi, dan webpack sempurna sesuai dengan peranan itu. Jadi campuran Laravel adalah lapisan yang duduk di atas webpack dan menjadikannya lebih mudah untuk menggunakan webpack di Laravel. Perintah pratetap React tidak memberi kita maklumat tentang bagaimana keadaan berfungsi di latar belakang. Oleh itu mari kita keluarkan pratetap 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 campuran Laravel dikonfigurasi, berikut adalah langkah-langkah yang perlu anda ikuti:

useeffect

akan dilaksanakan. Di dalamnya, kami menggunakan kaedah RenderProducts untuk menggambarkan UI komponen. Semua produk akan diberikan sebagai senarai di sana. Lebih -lebih lagi, kami tidak mempunyai unsur -unsur interaktif di sana lagi. Mari buat tajuk produk yang boleh diklik, dan pada klik, lebih lanjut mengenai produk akan diberikan. Mari kita panggil komponen utama . Komponen utama , yang merupakan ibu bapa, melewati rujukan fungsi sebagai prop. Komponen kanak -kanak, komponen

utama, kami akan mengisytiharkan komponen

composer require laravel/ui<br>php artisan ui react<br><br>// Generate login & registration scaffolding...<br>php artisan ui react --auth<br>

produk, sedangkan ciri kemas kini harus mempunyai komponen sendiri. Saya menggalakkan anda untuk mengambil cabaran ini dan menyelesaikan komponen yang hilang. Pertama, kami mencipta API REST menggunakan rangka kerja Laravel. Kemudian, kami membincangkan pilihan kami untuk mencampurkan Laravel dan bertindak balas. Akhirnya, kami membina front-end ke API menggunakan React. React sangat fleksibel kerana ia adalah perpustakaan, dan yang baik. Malah, kami mempunyai beberapa item di pasaran yang tersedia untuk pembelian, semakan, pelaksanaan, dan sebagainya. Jika anda sedang mencari sumber tambahan di sekitar React, jangan ragu untuk menyemaknya. Apa pendapat anda? Kongsi mereka dengan kami di forum. Kingsley bersemangat untuk mencipta kandungan yang mendidik dan memberi inspirasi kepada pembaca. Hobi termasuk membaca, bola sepak dan berbasikal.

Atas ialah kandungan terperinci Bina aplikasi React dengan hujung belakang Laravel: Bahagian 2, React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!