LaravelのバックエンドでReactアプリを構築する：パート2、React

これは、LaravelバックエンドとのReactアプリケーションの構築に関するシリーズの2番目と最終部分です。シリーズの最初の部分では、基本的な製品上場アプリケーションのためにLaravelを使用してRESTFUL APIを作成しました。このチュートリアルでは、Reactを使用してフロントエンドを開発します。

LaravelとReactのギャップを埋めるための利用可能なすべてのオプションも検討します。このチュートリアルを理解するために、シリーズのパート1に従う必要はありません。あなたがここにいるなら、あなたがどのように反応し、Laravelが一緒に運賃するかを見るなら、あなたは実際、最初の部分を避けることができます。 GitHubにアクセスし、リポジトリをクローンし、以下の簡単な要約に従って開始してください。

前のチュートリアルでは、API呼び出しに応答するLaravelアプリケーションを作成しました。単純な製品リストアプリケーションのルート、コントローラー、およびモデルを作成しました。 HTTPリクエストへの応答を返すのはコントローラーの仕事であったため、ビューセクションは完全にスキップされました。

その後、Laravelを使用した例外処理と検証の手法について説明しました。チュートリアルの終わりまでに、LaravelバックエンドAPIがありました。このAPIを使用して、Webと幅広いモバイルデバイスの両方のアプリケーションを構築できるようになりました。

React Presetコマンド（Laravel 5.5およびLaravel 7）

Laravel 5.5を使用して、ArtisanのLaravel/UI

Composerパッケージを使用してReactコンポーネントのコードを足場にできる機能が付属しています。どちらもユーザー認証用の登録コンポーネント。

バックグラウンドでは、LaravelはWebパックのスムーズなラッパーであるLaravel Mixを使用します。ご存知のように、Webpackはモジュールバンドラーです。すべてのモジュールの依存関係を解決し、JavaScriptとCSSに必要な静的資産を生成します。 Reactは動作するためにモジュールバンドラーを必要とし、Webpackはその役割に完全に適合します。したがって、Laravel Mixは、Webpackの上にあるレイヤーであり、LaravelでWebpackを使いやすくします。 React Presetコマンドは、バックグラウンドで物事がどのように機能するかについての情報を提供しません。それでは、反応プリセットを削除し、代わりに手動で手順をたどりましょう。

Manual Method（Laravel 5.4）

Laravel 5.4を実行している場合、またはLaravel Mixがどのように構成されているかを知りたい場合は、従う必要があるステップを次に示します。 effect

は実行されます。その内部では、renderproducts

メソッドを使用して、コンポーネントのUIを記述します。すべての製品がそこにリストとしてレンダリングされます。最後に、returnステートメント内のページにレンダリングします。さらに、そこにはまだインタラクティブな要素がありません。製品のタイトルをクリック可能にしましょう。クリックすると、製品の詳細がレンダリングされます。コンポーネントと呼びましょう。親であるメイン

コンポーネントは、プロップとして関数参照を渡します。子コンポーネント、メイン

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

コンポーネント、製品

コンポーネントを宣言しますが、更新機能には独自のコンポーネントが必要です。この課題を取り上げて、欠落しているコンポーネントを完了することをお勧めします。概要

私たちが始めた場所から長い道のりを歩んできました。まず、Laravel Frameworkを使用してREST APIを作成しました。次に、LaravelとReactを混合するためのオプションについて説明しました。最後に、Reactを使用してAPIへのフロントエンドを構築しました。

Reactを使用して単一ページアプリケーションの作成に焦点を当てましたが、ビューで特定の要素に取り付けられたウィジェットまたはコンポーネントを作成できます。 Reactは、ライブラリであり、良いものであるため、非常に柔軟です。

ここ数年、Reactは人気が高まっています。実際、市場には、購入、レビュー、実装などが可能な多くのアイテムがあります。 Reactに関する追加のリソースを探している場合は、それらをチェックアウトすることをheしないでください。

Laravelで実験して以前に反応したことがありますか？あなたの考えは何ですか？フォーラムでそれらを共有してください。

この投稿は、キングスレーウバからの貢献により更新されました。キングスレーは、読者を教育し、刺激するコンテンツを作成することに情熱を傾けています。趣味には、読書、サッカー、サイクリングが含まれます

以上がLaravelのバックエンドでReactアプリを構築する：パート2、Reactの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。