??

???? ??? ? ?? ???? ?? ????? ???? ???? ? ?? ???? ?? ?????. ??? ????? ??? ?? JavaScript ??? React? ??? ????? ?? React? ? ??? ?????. ??? PHP? ??? ??? ?????? ??? ??? ?????. ? ??????? PHP ???? React ?????? ??? ?? ???? ??? ??? ??? ???? ??? ?????.

PHP? React? ?? ?? ?? ????

PHP??

PHP?? ??? Hypertext Preprocessor? ?????. ? ??? ???? ?? ? ???? ?????. HTML ??? ?? ??? ? ????. HTML ??? PHP ???? ??? ? ????.

PHP? ??

PHP? ??? ??? ????
?? ? ??? ???:

• PHP? ???? ??? ?? ??? ? ?? ??? ???? ?????. ??? ???? ??? ???? ? ?????? ??? ??? ???? ? ??? ???.

???? ?? ? ???? ??:

• PHP?? ?? ???? ????? ????. ?? ???? ??, ??? ???? ? ??? ??? ???? ?????. ???? ??? ?? ??? ??? ??, ????? ? ???? ??????? ?????.

?? ??:

• PHP? ??? ??????(?: MySQL, PostgreSQL, SQLite), ? ??(?: Apache ? Nginx) ? ?? ???? ???? ?????. ??? ? ??? ?? ??? ??? ?????.

?? ??:

• PHP? ??? ???? ??? ? ????. ?? ?? ??? ??? ????? ?? ?? ??? ?????.

?? ??? ???:

• PHP? Windows, Linux, macOS? ??? ??? ????? ??? ? ????. ??? ???? ?? PHP ??????? ??? ?? ?? ??? ??? ??? ? ????.

PHP? ??

??? PHP? ? ?? ?????.

1. ???? ?? ?? ?? ?? ? ???? ??:

   • PHP? ?? ???? ?? ? ??? ???? ?? ?? ?? ??? ???? ?????. ?? ?? ???? ?? ?? ?? ?? ??(str_replace ? strpos)? ???? ??(array_filter($array, $callback) ? array_map($callback, $array))? ?? ? ????. ??? ???? ?? ?? ????? ??? ??? ??? ? ????.

2. ??? ?? ??:

   • PHP?? ?????? ???? ???? ?? ?????? ?? ???? ?? ?? ???? ?????. ?? PHP? ?? ?? ???? ?? ?????? ??? ?????? ?? ??? ??? ??? ??? ???? ??? ??? ? ????.

3. ?? ??? ??? ??:

   • PHP? ?? ??? ? ??? ?????(?? PHP 7 ????) ?? ??? ?? Node.js ?? Go? ?? ?? ??? ?? ??? ?? ? ????. ?? ?? ?? ??? ?? ?? ??? ??? ??????? ?? ??? ? ? ????.

4. ?? ???:

   • ??? ?? ??? ???? PHP? ?? ?? ?? ???? ??? ?? ??? ???? ??? ??? ??? ? ????. ?? ??, ???? ??? ???? ??? ?? ??? ?? ? ????("123" == 123? true??? "123" === 123? false???). ?? ?? ?? ??? ?????? ?? ??? ? ? ????.

5. ??? ?? ??? ?? ??? ??:

   • ?? PHP ??????? ????? ??? ?????? ?? ?? ?? ??? ????? ????? ??? ??? ????? ??? ?????. ?? ?? ?? ??? ??? ?? ??? ??? ??? ? ????. ?? ?????? ? ?? ??? ????? ??? ??? ??? ??? ????? ??? ? ? ????.

???? ????

React JS? ??? ????? ??? ?? ????? ????? ??? JavaScript ????????. MVC??? 'V'???. ReactJS? ??????? ? ???? ???? ?? ?? ?? ?? ?? ??? ?? ????????. ?????? ???? ????.

React Js? ??

React J? ??? ??? ????.

1. ???? ?? ????:

   • React? ???? ??? ??? UI ????? ??? ? ??? ?? ???? ?? ????? ????. ??? ???? ? ???? ?? ??? ???? ?? ??? ??? ?????. ?? ??? ??????? ?? ???? ???? ? ???? ??? ???? ?? ???? ?????.

2. ?? ??? ?? ?? DOM:

   • React? Virtual DOM(Document Object Model)? ???? ??? ??? ??????. ?????? ??? ???? React? Virtual DOM? ?? ????? ?? ??? ???? ?? DOM? ????? ???????. ?? DOM? ???? ??? ????? ? ??? ???? ????? ????, ?? UI ??? ??? ??? ??????? ?????.

3. ??? UI:

   • UI ??? ?? React? ??? ?? ??? ??? ? ?? ???? ????? ?? ????. ???? ??? ??? ?? UI? ??? ??? ??? ???? React? ?? ??? ?? ?? UI? ???????. ?? ?? ??? ??? ????? ?? ????? ????? ?? ???? ?????.

4. ??? ??? ? ???? ??:

   • React? ??? ????? ??? ?????, ?? ? ?? ??? ?? ??? ???? ???? ????. ??? ???? ??? ?? ???? ???? ???, ???? ? ?? ?? ??? ???? ? ????. ?? Facebook? ??? ? ?? ??? ???? ?? ??? React? ?? ??? ???? ????? ?????.

5. JSX? ?? ??? ??:

   • React? HTML? JavaScript ??? ??? ? ?? ??? ?? ??? JSX(JavaScript XML)? ?????. JSX? React ?? ??? ??? ??? ????? ??(HTML)? ??(JavaScript)? ????? ???? ??? ? ?? ?? ????. ???? ??? ??? ???? ?? ???? ???? ???? ???? ??? ?????.

React Js? ??

??? React Js? ? ?? ?????.

1. ??? ?? ??:

   • React? ???? ???? ??? ?? ? ?????? ???? ?? ??? ???? ?? ? ????. JSX, ????, ?? ?? ? ?? DOM? ???? ?? ??? ???? ?? ?? ????? ??? ? ????.

2. ???? ???:

   • React ????? ????? ??? ??? ??? ??? ??? ??? ????. Create React App? ?? ??? ?? ??? ?????? ????? ???? ?? ???? ??? ? ???? Webpack ? Babel? ?? ?? ??? ?? ?? ??? ??? ?????.

3. ???? ???? ??:

   • React ???? ?? ?????? ????? ??? ??? ????? ??? ?????. ?? ?? ??, ???? ? ?????? ???? ?? ????? ??? ? ? ????. ??? ?? ?? ??? ??? ?? ? ??? ?????? ?? ?? ??? ??? ??? ?? ????.

4. ?? SEO:

   • ????? React? ????? ??? ??????? ?????? ?? ?? ???? ?? ???? ????? ? ???? ?? ? ???? SEO ??? ??? ? ????. Next.js? ?? ?????? ?? ?? ? ???(SSR)? ?? ???? ????? ?? ???? ????? ? ??????.

5. ?? ??? ???:

   • ??? React ??????? ?? ??? ???? ? ????. React? ?? ?? ??? ??? ??????? ????? ????? Redux, MobX ?? Context API? ?? ?? ??? ?? ?? ???? ?????. ??? ???? ? ?? ???? ???? ???? ??? ??? ?????.

?? ? ???????? PHP? React? ??? ??

?? ? ???????? PHP? React? ??? ??? ? ??? ??? ???? ???? ???? ?? ??? ??????? ????. ??? ??? ??? ??? ?? ?????, ??? ? ??? ?????? ?? ? ?? ??? ?? ??? ???????.

React? ?? PHP? ???? ?? ? ?? 5?? ??

??: ??? 5? ????? ??? ??? ? ?? ??? ????!

1. ??? ???

????? ? ??? ??:

• ??? ??? ??: React? ??? ??? ????? ???? ??, PHP? ?? ? ??? ??? ??? ???? ??? ?? ??? ?????.

• API ?? ??: GraphQL ?? RESTful ?????? ?? React ?????? ???? ?????? PHP? ??? ??? API? ???? ??? ?? ??? ??? ? ????.

?? ???:

• ?? ??: ?????? ??? ????? ??? ???? ?? ?? ??? ??? ?? ??? ?? ? ????.

• ???? ?? ??: UI ??? ???? ???? React? ?? ?? ?? ?? ??? ????? ??? ? ????? ???? ????.

2. ???

? ?? ?? ??:

• ???? ???: Laravel? ?? PHP ?????? ??? ?? ???? ??? ??? ????? ???? ???? ?? ??? ??? ????? ????? ???????.

• ????? ???: ???? ??? ???? ???? React? ?? DOM? ???? ?? ??? ??? ???? ??? UI ??? ?????.

??????? ????:

• ??? ?? ??: PHP? ??????? ????? ???? ??? ???? ????? ??? ? ????. React? ??? ?? ??? ???? ??? ? ??? ?? ???? ?????.

• ?? ??: ?? ? ??? ???? PHP? ????? ? ?? ??? ???? React ??? ??? ??? ???? ????? ? ?? ???? ???? ??? ? ????.

3. ??

?? ?? ??:

• ??? ???(SSR): ?? HTML? PHP? ?? ????? ?????? ??? ? React? ?? ??? ? ????. ? ??? ???? ??? ??? ???? ?? ?? ??? ?????.

• ??? ??? ????: React? ???? ???? ??? ??? ?????? ???? ??? ?? ??? ????? ????? PHP ????? ???? ?????? ??? ? ????.

??? ??????:

• ???? ?? ??: ???? ? ??? ?? React? ?? ?? ??? ???? UI ?? ??? ? ????? ??? ? ?? ???? ????? ???? ??????.

• ?? ? ???: PHP? ?? ? ?? ??? ???? ?? ?? ?? ??? ??? ?????? ??? ?? ??? ???? ? ????.

4. ??? ??? ?????

????? ??? UI:

• ???? ?? ???: React? ???? ?? ???? ?? ?????? ???? ?????? ??? ? ?? ???? ??? ??? ?????? ?? ? ????.

• ??? ????: React? ?? ??? ??? ??? ????? ????? ??? ? ?? ???? ???? ??? ??? ?????.

??? ??? ??:

• ?? UI ?????: React? ?? UI ????? ? ?????(?: Material-UI ? Ant Design)? ? ????? ?????? ???? ?? ?? ???? ??? ?????? ???? ? ????.

• React? ???? ??? ??? ?? ???? ????? ???? ??? ? ??? ??? ?????(UI)? ???? ??? ? ????.

5. SEO ???

?? ?? ??? ??:

• ?? ? ???(SSR): ?????? ???? ?? PHP? ???? HTML ???? ?? ????? ? ?? ?? ?? ?? ? SEO? ?????.

• ?? ?? ? ?? ??: PHP ???? ??? ???? React? ?? ??, ?? ? ?? SEO ?? ??? ???? ???? ????? ? ????.

? ?? ??? ??:

• ?? ??? ??(SSG): React? ? ??? ?? ???? Next.js? ?? ???? ???? ?? ? ?? ???? ???? ?? ???? ?? PHP? ????? ??????? SEO? ??? ? ????. SSR? SSG.

• URL ??: React? ???? ??? ???? ???? ?? ??? ?? ???? ??? ? ??? ??, PHP? ???? SEO ???? URL ??? ??? ? ????.

???? PHP? React? ???? ??? ??? ??? ?? ?? ???? ?? ???? ?? ???? ?? ???? ??? ?? ??? ? ????. ??? ??? ?? ?????? ??? ??? ???? ???? ?? ??? ?? ????? ?? ? ????.

---

PHP ? React ?? ?? ??

?? React.js? PHP? ??? ??? ???? ?? ????? ????? ???.

?? ??

????? ??? ? ???? React? ???? PHP? ???? ????? ?? ??? ? ??? ????. ?? ??? ??? ????!

• PHP? ?? ?? ??? ??? ?
• React.J? ?? ?????
• npm? ?? Node.js? ???? ???? ??? ?????.
• ???? Apache ?? Nginx? PHP? ???? ??? ???

React? ??? ??? ???? PHP? ???? ???? ??? ?? ??? ????

React? ?? PHP? ???? ???? ??? ?? ???? ??? ????.

????? ??

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**???. ?? ?? ??? ?? ??? ??? ????? ? ? ????!

????? public ??? 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);
 }
}

? ?? ?? ??? ? ?? ??? ??? ????.

??? ???? ???? ?????????. ???? ???? ??? ???? ?? ???? ??????? ???? ?????.

???? **Freddie**?? ?? ?? ??? ???? ??? ??? ?? ????? ??????. ? ??? ?? ??? ?? ?? ??? ?? ? ? ????.

??? ?? ?? ???????? React? PHP?? ??? ?????.

??

????? PHP? ???? ???? React? ?????? ???? ?? ? ?????? ??? ?? ???? ??? ???? ?????. ??? ?? ??, ? ??? PHP? ?? ? ??? React? ?? ?? ?? ?? ????? ??? ???? ?? ??? ??? ??????? ????. PHP? ?? ? ??, ?????? ?? ?? ? API ??? ????? ???? ?? React? ???? ???? ??? ??? ?????? ??? ??? ??? ?????.

PHP? React? ??? ??? ??? ?? ????? ???? ?? ??? ????? ????? SEO ???? ? ??????? ??????. ? ??? ??? ?? ???? ????? ??? ???? ? ??????? ?? ????? ??? ? ????.

? ????? ?? ????? ????! ?? ???? ??? ???.

?? ??

? ?? Laravel ??? Emmanuel Okolie? ????? ?? ???? 4? ??? ??? ???? ????. ?? ????? ??, ???, ??? ?? ?? ?? ???? ???? ?? ???? ???? ??? ??????.

?? ???? ReactJ, Laravel, PHP, JavaScript ? ?? ??? ?????? ???? ????.
?????? ?? ??? ?? ????? ??? ????? ??? ?? ?? ???? ??? ???? ?? ???? ?????.

??? ????? Emmanuel Okolie? ??? ???? ??? ?? ??? ????. ?? ????, Facebook, Github, LinkedIn, Twitter? ???? ??????.

? ??? ?????? React? ???? PHP? ???? ???? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!