React 和 PHP 一起使用
我們將在一個應用程式中介紹 React 和 PHP 的優缺點。
React 和 PHP 一起使用
如果你有一個用 PHP 構建的舊網站，並且希望使用 React 更改網站的前端，那麼你可以將 React 與 PHP 一起使用而不會出現任何問題。
有不少網站同時使用 React 和 PHP。
一起使用 React 和 PHP 的優勢
PHP 是一種廣泛使用的語言，支援許多大型網站。在我們的 React 應用程式中使用 PHP 作為後端有以下好處。
- PHP 是一門簡單的語言，使其在我們的應用程式中易於學習和使用。
- PHP 是一種久經考驗且真正成熟的語言，因為它已被用於網路上的許多網站。
- PHP 有大量的庫和框架，我們可以使用它們來完成許多後端任務。
- PHP 是一種古老的語言，因為它具有出色的社群支援。
- 有很多方法可以擴充套件 PHP。
一起使用 React 和 PHP 的缺點
在我們的 React 應用程式中使用 PHP 作為後端語言的一些缺點如下。
- PHP 不是像
Node這樣的基於 JavaScript 的語言。 - PHP 比可用的基於 JavaScript 的語言（如
Node）慢。 Node提供了比 PHP 解決方案更好的解決方案。Node和React工作得更好，因為它們都是基於 JavaScript 的語言。- 另一個缺點是如果我們在 PHP 的
MVC 框架中使用 React，React 將只能充當MVC中的V。
一起使用 React 和 PHP 建立聯絡表單
我們將通過一個同時使用 React 和 PHP 的示例來構建一個聯絡表單以使用 React 和 PHP。
我們將在 React 中建立前端部分並在 PHP 中處理後端。我們可能需要使用像 Apache 或 Nginx 這樣的網路伺服器作為後端。
你可以為 windows 安裝 Wamp 和為 mac 安裝 Mamp。我們將使用 PHP 從聯絡表中傳送一封電子郵件。
因此，讓我們使用以下命令建立一個新應用程式。
# react
npx create-react-app my-app
在 React 中建立我們的新應用程式後，我們將使用此命令轉到我們的應用程式目錄。
# react
cd my-app
現在，讓我們執行我們的應用程式來檢查所有依賴項是否安裝正確。
# react
npm start
完成後，我們將在 IDE 中開啟專案。然後從 ./src/App.js 開啟 App.js 檔案。
通過使用 class App 刪除 div 中的所有內容來清理我們的程式碼。它看起來像這樣。
# react
import "./styles.css";
export default function App() {
return (
<div className="App">
</div>
);
}
現在，讓我們建立一個基本的聯絡表單，其中包含 Name、Email 和 message 的文字區域和一個 button 的輸入欄位以提交聯絡表單。App.js 中的程式碼如下所示。
# react
<div className="App">
<h1>Contact Me</h1>
<div className="container">
<form action="/action_page.php">
<label>Full Name</label>
<input type="text" id="name" name="name" placeholder="Enter your name.."/>
<br/>
<label>Email</label>
<input type="email" id="email" name="email" placeholder="Enter your email"/>
<br/>
<label>Subject</label>
<textarea id="subject" name="subject" placeholder="Enter your message.."></textarea>
<input type="submit" value="Submit"/>
</form>
</div>
</div>
一旦我們建立了我們的聯絡表單，讓我們使用 CSS 為我們的聯絡表單設定樣式，使其看起來更有吸引力。預設情況下，使用命令建立 React 應用程式已經在 App.js 中匯入了一個 CSS 檔案。
我們將對齊專案，新增寬度，併為背景和按鈕著色。所以我們在 style.css 中的程式碼將如下所示。
# react
input[type=text], input[type=email], textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #04AA6D;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
一旦我們設定了聯絡表單的樣式，我們現在可以使用 npm start 命令開啟帶有 localhost 的瀏覽器來檢視我們剛剛編碼的聯絡表單。
輸出：
我們在 React 中建立了一個基本的聯絡表單。我們需要一個初始狀態和提交處理程式函式來使其工作。
在 App.js 中，我們將使用 constructor 為我們的聯絡表單新增一個狀態。
# react
constructor(props) {
super(props);
this.state = {
name: '',
email: '',
message: '',
}
}
一旦我們建立了一個 constructor 新增我們的聯絡表單的狀態，我們將建立我們的表單 submit handler 方法，如下所示。
# react
FormSubmittionHandler( event ) {
event.preventDefault();
console.log(this.state);
}
正如你在上面的處理程式中看到的那樣，我們正在記錄狀態以檢查我們是否使用 console.log 將所有值儲存在狀態中。
我們將初始狀態設定為表單輸入值。每當輸入更改時，它會將我們的狀態設定為可以在我們的表單處理程式中輕鬆使用的當前輸入值。
所以我們在 App.js 中的程式碼將如下所示。
# react
import "./styles.css";
import React, { Component } from "react";
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
name: "",
email: "",
message: ""
};
}
FormSubmittionHandler(event) {
event.preventDefault();
console.log(this.state);
}
render() {
return (
<div className="App">
<h1>Contact Me</h1>
<div className="container">
<form action="#">
<label>Full Name</label>
<input
type="text"
id="name"
name="name"
placeholder="Enter your name.."
value={this.state.name}
onChange={(e) => this.setState({ name: e.target.value })}
/>
<br />
<label>Email</label>
<input
type="email"
id="email"
name="email"
placeholder="Enter your email"
value={this.state.email}
onChange={(e) => this.setState({ email: e.target.value })}
/>
<br />
<label>Subject</label>
<textarea
id="subject"
name="subject"
placeholder="Enter your message.."
value={this.state.message}
onChange={(e) => this.setState({ message: e.target.value })}
></textarea>
<input type="submit" value="Submit" onClick={e => this.FormSubmittionHandler(e)} />
</form>
</div>
</div>
);
}
}
現在，讓我們填寫聯絡表格並測試是否正在傳送來自輸入欄位的值。
輸出：
正如你在上面的示例中所看到的，我們可以將輸入值從我們的聯絡表單傳送到 submission handler 函式。
我們需要向狀態 error 和 sent 新增另外兩個屬性。
如果我們的電子郵件未傳送，錯誤將捕獲錯誤的值，並且根據電子郵件是否傳送，傳送將具有 true 或 false 值。
# react
this.state = {
name: '',
email: '',
message: '',
sent: false,
error: null
}
我們的前端現在已經準備好了。我們需要一種後端語言來使用該聯絡表資訊向我們的郵箱傳送電子郵件。
如果你已經在 Apache 或 Nginx 資料夾中建立了此專案，你可以轉到專案的根目錄並建立一個名為 api 的資料夾，在其中建立一個 index.php 檔案.
從 React 應用程式中，我們將向 php api 傳送一個釋出請求。在我們的聯絡表格中，我們將根據需要填寫姓名和電子郵件。
因為這些值在傳送電子郵件中起著至關重要的作用，所以我們必須檢查這些欄位。如果這些欄位為空，那麼我們將丟擲錯誤。
# php
<?php
header("Access-Control-Allow-Origin: *");
$restJson = file_get_contents("php://input");
$_POST = json_decode($restJson, true);
if (empty($_POST['name']) && empty($_POST['email'])) die();
if ($_POST)
{
http_response_code(200);
$mailSubject = $_POST['name'];
$mailTo = "ranahusnain770@gmail.com";
$mailFrom = $_POST['email'];
$mailMsg = $_POST['number'] . $_POST['message'];
$mailHeader = "MIME-Version: 1.0\r\n";
$mailHeader.= "Content-type: text/html; charset=UTF-8\r\n";
$mailHeader.= "From: <" . $from . ">";
mail($mailTo, $mailSubject, $mailMsg, $mailHeader);
echo json_encode(array(
"sent" => true
));
}
else
{
echo json_encode(["sent" => false, "message" => "Something went wrong"]);
}
?>
正如你在上面的程式碼中看到的，我們將響應程式碼設定為 200、OK。
在上面的 PHP 程式碼中，我們正在檢查姓名和電子郵件，然後使用 PHP mail() 函式，我們將帶有聯絡表單資料的電子郵件傳送到我的電子郵件帳戶。
如果我們嘗試瀏覽我們的 API 資料夾，我們將看不到任何東西。它死了，因為我們沒有在 post 請求中傳送 API 的名稱和電子郵件。
所以，我們在 PHP 中的 API 現在已經準備好了。我們需要將資料從 React 聯絡表單傳送到我們的 API。
我們將使用 npm 安裝 Axios。Axios 非常適合用於 HTTP 請求的 React。
# react
npm install axios
現在，我們將在我們的 App.js 中匯入 Axios。
# react
import axios from `axios`;
我們將在 App 類之前為我們的 API 路徑建立一個常量。
# react
const PATH = 'http://localhost/api/index.php';
一旦我們為我們的 API 路徑建立了一個常量，我們現在將在我們的 FormSubmittionHandler 方法中使用 Axios 將我們的資料從狀態傳送到我們的 API。
# react
FormSubmittionHandler(event) {
event.preventDefault();
axios({
method: 'post',
url: `${PATH}`,
headers: { 'content-type': 'application/json' },
data: this.state
})
.then(result => {
this.setState({
sent: result.data.sent
})
})
.catch(error => this.setState({ error: error.message }));
}
在我們的 FormSubmittionHandler 方法中新增 Axios 後，我們會通過聯絡表傳送電子郵件。
要檢視結果，請單擊此處。
所以通過這種簡單的方式，我們可以很容易地在一個應用程式中同時使用 React 和 PHP。
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn