動的でインタラクティブな Web アプリの開発は、動的で常に変化する Web 開発の世界において非常に重要です。ユーザー インターフェイスを作成するための JavaScript ツールキットである React は、その速度と多用途性により大きな人気を博しています。ただし、PHP は依然としてサーバーサイド プログラミングの強力な選択肢です。このチュートリアルでは、PHP バックエンドと React フロントエンドの機能を簡単に組み合わせて、それぞれの長所を最大限に活用する方法を説明します。
PHP という用語は、Hypertext Preprocessor の頭字語です。 Web開発に使用されるサーバーサイドスクリプト言語です。 HTML ファイルに簡単に埋め込むことができます。 HTML コードは PHP ファイルに記述することもできます。
以下に PHP の利点をいくつか示します
学習と使用の容易さ:
幅広い採用とコミュニティサポート:
統合機能:
オープンソース:
クロスプラットフォーム互換性:
以下に PHP のデメリットをいくつか示します。
関数の名前とパラメータの順序が一貫していません:
過去のセキュリティ問題:
他の言語と比較したパフォーマンス:
弱い型付け:
古い手続きコードへの過度の依存:
React JS は、ユーザー インターフェイスを構築するための宣言的で効率的かつ柔軟な JavaScript ライブラリです。 MVC の「V」です。 ReactJS はオープンソースのコンポーネントベースのフロントエンド ライブラリであり、アプリケーションのビュー層のみを担当します。 Facebook によって管理されています。
以下に React Js のメリットをいくつか示します。
コンポーネントベースのアーキテクチャ:
パフォーマンスを向上させる仮想 DOM:
宣言型 UI:
豊かなエコシステムとコミュニティのサポート:
JSX の強力なサポート:
以下に React Js のデメリットをいくつか示します。
急な学習曲線:
定型文と複雑さ:
急速に変化する環境:
SEO が悪い:
状態管理の複雑さ:
最新の Web アプリケーションにおける PHP と React の相乗効果は、両方のテクノロジーの強みを活用して、堅牢で動的、スケーラブルなアプリケーションを作成します。ここでは、これらのテクノロジーがどのように相互に補完し合うのか、またそれらを組み合わせることで得られる利点について詳しく説明します。
注: メリットは 5 つ以上ありますが、ここではその一部を紹介します。
フロントエンドとバックエンドの統合:
シームレスなデータ処理: React はフロントエンドを効果的に管理し、PHP はサーバー側のロジックとデータ交換を処理できるため、一貫した開発環境が実現します。
API 主導の開発: GraphQL または RESTful エンドポイントを介して React フロントエンドにデータを供給することで、PHP は強力なバックエンド API として機能し、明確な責任分担が可能になります。
開発の効率:
並行開発: チームがフロントエンド プロジェクトとバックエンド プロジェクトに同時に取り組むことで、開発をスピードアップし、ボトルネックを解消できます。
再利用されたコンポーネント: React のコンポーネントベースの設計により、フロントエンド開発はよりモジュール化され、管理しやすくなり、UI 要素の再利用が保証されます。
高負荷の管理:
効果的なバックエンド: Laravel のような PHP フレームワークは、大量のデータとユーザー リクエストを効果的に管理し、複雑でスケーラブルなバックエンド プロセスを処理するように設計されています。
フロントエンドの最適化: 複雑でデータ集約型のアプリであっても、React の仮想 DOM と効果的な差分手法により、UI の迅速かつ応答性の高い変更が保証されます。
マイクロサービスのアーキテクチャ:
モジュラーアプローチ: PHP がマイクロサービス アーキテクチャに含まれている場合、さまざまなサービスを個別に拡張できます。 React は、必要に応じてこれらのサービスを使用できるようにすることで、スケーラビリティを促進します。
負荷分散: サーバー側の操作を処理する PHP とクライアント側の対話を処理する React の間で負荷を分散することで、プログラム全体としてより多くのトラフィックをうまく管理できます。
読み込み時間の短縮:
サーバーサイド レンダリング (SSR): 初期 HTML は PHP によって事前レンダリングされてクライアントに送信され、その後 React によってハイドレートされます。この方法により、ユーザー エクスペリエンスが向上し、初期読み込み時間が短縮されます。
非同期データ取得: React を使用すると、PHP バックエンドからデータを非同期に取得でき、応答性の高いユーザー インターフェイスとデータ変更の効果的な処理を維持できます。
コミュニケーションの強化:
効果的な状態管理: コンテキストやフックなどの React の状態管理機能により、UI 状態の変更をより適切に処理できるようになり、無駄な再レンダリングの必要性が最小限に抑えられます。
キャッシュと最適化: PHP はサーバー側のキャッシュ技術を使用して、静的マテリアルの提供を高速化し、データベースの需要を下げることができるため、パフォーマンスが向上します。
インタラクティブで動的な UI:
コンポーネントベースの設計: React のコンポーネントベースの設計により、プログラマーは更新や拡張が簡単な複雑で対話型のユーザー インターフェイスを作成できます。
リアルタイム更新: React は動的なコンテンツ変更とリアルタイム更新を効率的に処理でき、スムーズで興味深いユーザー エクスペリエンスを実現します。
ユーザーエクスペリエンスの向上:
現代の UI ライブラリ: React は現代の UI ライブラリやフレームワーク (マテリアル UI や Ant Design など) とうまく連携し、プログラマーが美しく直感的なユーザー インターフェイスをデザインできるようにします。
React を使用すると、さまざまなデバイスや画面サイズで効果的に機能する、レスポンシブ と適応性のあるユーザー インターフェイス (UI) の構築が簡単になります。
検索エンジンの最適化の向上:
サーバーサイド レンダリング (SSR): HTML コンテンツをクライアントに提供する前に PHP を使用して事前レンダリングすると、検索エンジンのインデックス作成と SEO が向上します。
メタ タグと動的マテリアル: PHP バックエンドからの情報を使用して、React はメタ タグ、タイトル、その他の SEO 関連のマテリアルを動的に管理および更新できます。
クローラビリティの向上:
静的サイト生成 (SSG): React は、両方をサポートする Next.js のようなソリューションを利用することで、ビルド時に静的ページを生成し、動的コンテンツ用の PHP を保持しながらアプリケーションの SEO を向上させることができます。 SSR と SSG。
URL 構造: React はルーティングとナビゲーションを処理して、訪問者と検索エンジンがサイトを簡単に探索できるようにします。一方、PHP は明確で SEO に適した URL 構造を管理できます。
開発者は、PHP を React と統合することで、豊富なユーザー エクスペリエンスと検索エンジンの最適化を備えた、堅牢でスケーラブルでパフォーマンスが最適化されたオンライン アプリを構築できます。相乗効果により、フロントエンドとバックエンドのテクノロジーを組み合わせて、強力で適応性のある開発プロセスを作成できます。
この時点で、React.js と PHP をフロントエンドとして使用して実際のプロジェクトを開始しようとしています。
開発者として知っておくべきことや、PHP を React のバックエンドとして機能させるために必要なことがあります。必須リストはこちらです!
PHP を React と一緒にバックエンドとして使用する手順は非常に簡単で、次のとおりです。
フロントエンドの構築
ステップ 1: ターミナルを開き、以下のコマンドを実行します。
npx create-react-app my-react-app
注: このコマンドを実行する前に、反応フォルダーを配置するディレクトリに cd で移動する必要があります。目的のディレクトリに cd する方法は、ターミナルにこのコマンドを追加することです
cd Documents
この後、React アプリが作成されるまで待ちます。
ステップ 2: プロジェクト フォルダーに移動します:
作成したプロジェクトにはターミナルでアクセスする必要があります
cd my-react-app
ステップ 3: 開発サーバーを起動します:
npm start
PHP バックエンドの構築
React アプリケーションが動作できるようになったので、PHP バックエンドを構築します。
ステップ 1: React アプリのディレクトリ内に PHP ファイル用の新しいフォルダーを作成します。
これを実現するには、ターミナルで次のコマンドを実行します
mkdir php_backend
このコマンドを実行すると、php_backend という名前のフォルダーが表示されます
ステップ 2: php-backend フォルダー内に、index.php という名前のファイルを作成します。
注: 任意の名前を付けることができます。私の場合は、index.php.
ステップ 3: Index.php で、PHP エンドポイントとロジックの定義を開始できます。
以下は、私の php-backend/index.php に書かれていることです。PHP 開発者であれば、この構文に精通しているでしょう。
<?PHP
$serverName="localhost";
$userName="root";
$password="";
$databaseName="react_php";
$conn = mysqli_connect($serverName, $userName, $password, $databaseName);
$recText = $_POST['text'];
$query = ("INSERT INTO react_php (texts) VALUES('$recText')");
if (mysqli_query($conn, $query)) {
echo "Data has been inserted successfully";
}else {
echo "Error";
}
?>
次に行うことは、前に作成した React コードに移動し、コード エディターでフォルダーを開くことです。src/App.js のようなフォルダーが表示され、この構文を下に追加します。
import React, { Component } from 'react';
// import logo from './logo.svg';
import axios from 'axios'; //Import Axios
import './App.css';
class App extends Component{
state = {
text : ""
}
handleAdd = async e =>{
await this.setState({
text : e.target.value
})
}
handleSubmit = e =>{
e.preventDefault();
console.log(this.state.text);
let formData = new FormData();
formData.append("text", this.state.text);
const url = "http://localhost:80/react-backend/"
axios.post(url,formData)
.then(res=> console.log(res.data))
.catch(err=> console.log(err))
}
render(){
return(
<div className="App-header">
<input
onChange={this.handleAdd}
className="form-control"
// value={this.state.text}
type="text"
id='text'
placeholder='Enter Some Text!'/>
<br/>
<button
onClick={this.handleSubmit}
className="btn btn-success"
id='submit'> Save</button>
</div>
);
}
}
デフォルトのアプリをエクスポート;
注: PHP の動作を可能にするのは **Axios** です。以下のコード スニペットを見て、それをどのように使用したかがわかります。
プロジェクトのパブリック フォルダーに、index.html ファイルが表示されます。使用しているフレームワークとしてブートストラップ cdn を追加しました。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
それでは、ちょっとしたスタイリングをご紹介します。
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
これらすべてを試した後、得られるビューは次のとおりです。
彼女はバックエンドを制御するデータベースです。テキストを入力して「保存」をクリックすると、テキストがデータベースに自動的に表示されます。
以下、**フレディ**と書き、下に表示される画像の右上隅にある参照をクリックします。これを見たら、自分が正しいことをしたことがわかります。
これは、単一アプリケーションの React と PHP で使用したステップです。
結論として、バックエンドとしての PHP とフロントエンドとしての React を統合することで、最新の Web アプリケーション開発のための堅牢かつ多用途のソリューションが提供されます。説明したように、この組み合わせでは、PHP のサーバー側機能と React の動的なコンポーネントベースのアーキテクチャの長所を活用して、スケーラブルで高性能なアプリケーションを作成します。 PHP はサーバー側ロジック、データベース インタラクション、API 作成を効率的に処理し、React は機能豊富で応答性の高いユーザー インターフェイスとシームレスなデータ処理を保証します。
PHP と React のこの相乗効果により、開発プロセスが強化されるだけでなく、インタラクティブで魅力的で SEO に優しい Web アプリケーションが作成されます。この強力な統合を採用することで、開発者は包括的でユーザー中心の Web アプリケーションを簡単かつ効率的に構築できるようになります。
このチュートリアルが非常に価値のあるものであると感じていただければ幸いです。次回まで、さようなら。
フルスタック Laravel 開発者 Emmanuel Okolie は、ソフトウェア開発において 4 年以上の経験があります。彼は、ソフトウェア開発、執筆、他の人への指導を組み合わせることで、本格的なスキルを開発しました。
彼のスタックには、ReactJ、Laravel、PHP、JavaScript、その他の言語やフレームワークが含まれています。
フリーランサーとして、彼はクライアント向けの Web サイトを作成し、人々に自分の仕事のやり方を示す技術ガイドを執筆しています。
機会があれば、エマニュエル・オコリーはあなたとお話できることを楽しみにしています。彼の ウェブサイト、Facebook、Github、LinkedIn、および Twitterにアクセスしてフォローしてください。
以上がフロントエンドに React を使用して PHP をバックエンドとして使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
