Как использовать 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-разработчик, вам знаком этот синтаксис. $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 =>http://localhost:80/react-backend/]" axios.post (url,formData)
.then(res=> console.log(res.data))
.catch(err=> console.log(err))
render()
return(
Save
);
export default App;
Примечание: PHP работает благодаря Axios... Взгляните на фрагмент кода ниже. Вы увидите, как мы его использовали! В общедоступной папке вашего проекта вы увидите index.htmlВ этом файле я добавил Bootstrap CDN в качестве фреймворка, который я использую.
Итак, немного стилизации. .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 обеспечивает насыщенный, отзывчивый пользовательский интерфейс и бесперебойную обработку данных. https://xrust.ru/ https://xrust.ru/news/311464-kak-ispolzovat-php-v-kachestve-bjekenda-a-react-dlja-frontenda.html Оригинал статьи размещен в https://xrust.ru и в https://dzen.ru/xrust