Как использовать PHP в качестве бэкенда, а React для фронтенда

Как скрестить PHP с React. Это продолжение публикации – она находится здесь.

Создание среды разработки PHP и React
На этом этапе мы собираемся приступить к реальному проекту, используя React.js и PHP в качестве front-end.

Предпосылки
Есть вещи, которые вам как разработчику нужно знать или иметь, чтобы использовать PHP в качестве бэкенда с React. Вот основной список!

Иметь базовые знания PHP
Знай свой React.js
Убедитесь, что на вашем компьютере установлен Node.js вместе с npm.
Установлен ли в вашей системе PHP (Apache или Nginx)
Пошаговый процесс использования PHP в качестве бэкенда с использованием React в качестве фронтенда
Шаг по использованию PHP в качестве бэкэнда вместе с React довольно прост и заключается в следующем.

Создание фронтенда

Шаг 1: Откройте терминал и выполните следующую команду:

npx create-react-app my-react-app

Примечание: перед выполнением этой команды необходимо перейти в каталог, где должна располагаться папка React! Чтобы перейти в нужный каталог, добавьте эту команду в терминал.

cd Documents

После этого вам придется подождать, пока ваше React-приложение будет создано.

Шаг 2: Перейдите в папку вашего проекта. Для этого откройте созданный вами проект в терминале.

cd my-react-app

Шаг 3: Запустите сервер разработки:

npm start

Создание PHP-бэкэнда

Теперь, когда ваше приложение React готово к работе, пришло время создать бэкэнд PHP:

Шаг 1: Создайте новую папку для PHP-файлов в каталоге приложения React. Для этого выполните следующую команду в терминале.

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 Code и открыть папку в редакторе кода. Вы увидите папку с именем 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>
);
}

}
export default App;
Примечание: PHP работает благодаря Axios... Взгляните на фрагмент кода ниже. Вы увидите, как мы его использовали!

В общедоступной папке вашего проекта вы увидите index.htmlВ этом файле я добавил Bootstrap CDN в качестве фреймворка, который я использую.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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);
}
}

Нажав теперь Ентер – вы увидите чудо.

Заключение
В заключение отметим, что интеграция PHP в качестве бэкенда с React в качестве фронтенда представляет собой надёжное и универсальное решение для разработки современных веб-приложений. Как уже упоминалось, эта комбинация использует сильные стороны серверных возможностей PHP и динамичную компонентную архитектуру React для создания масштабируемых и высокопроизводительных приложений. PHP эффективно обрабатывает серверную логику, взаимодействие с базой данных и создание API, а React обеспечивает насыщенный, отзывчивый пользовательский интерфейс и бесперебойную обработку данных.