React搭配PHP的使用方法, PHP 和 React.js一起使用, An advanced guide on how to setup a React and PHP

React搭配PHP的使用方法, PHP 和 React.js一起使用, An advanced guide on how to setup a React and PHP
React搭配PHP的使用方法, PHP 和 React.js一起使用, An advanced guide on how to setup a React and PHP

A quick guide on setting up a React and PHP web. I love React and I still use PHP

 

在本文中,我将引导您为React Application设置PHP后端服务器

要下载或浏览代码,请通过Github链接访问存储库

通过此设置,您将能够在普通的Apache localhost而不是node js localhost:3000上运行和开发React应用,当您在开发Web应用时不想通过PHP或使用安全cookie强制进行身份验证重定向时,这很疯狂。或在应用程序启动前用PHP渲染一些东西我还将添加SCSS支持和不错的高级功能。

好吧,现在让我们开始吧!

要求:您需要在本地计算机上安装Node.js和npm。以及XAMPP,WAMP或任何其他Web服务器解决方案。

 

设置文件夹结构

这是尘埃落定后我们将剩下的文件夹结构:

React搭配PHP的使用方法, PHP 和 React.js一起使用, An advanced guide on how to setup a React and PHP
React搭配PHP的使用方法, PHP 和 React.js一起使用, An advanced guide on how to setup a React and PHP

首先,我们现在需要创建php-react-app根目录。这将保存我们所有的文件。接下来,app将拥有包含整个React应用程序的文件夹。我添加了一个额外的文件夹_devapp来托管我的React应用程序代码。如果服务器后端未在Node js上运行,我也建议您也这样做。还有一个assets文件夹,其中包含我们编译的react和css。该node_modules文件夹是不言自明的,但是它将包含我们app.js文件的所有NPM软件包。当我们安装NPM时,它将自动创建。

 

后端入门

创建一个名为的新文件index.php

<?php 
$user = (object) [
    'name' => 'Jane Doe',
    'email' => 'janedoe@gmail.com',
    'logged' => true
];

?>
<!doctype html>
<html lang="en">
    <head>
        <title>React PHP starter Kit</title>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="/app/assets/css/app.css" type="text/css">
    </head>
    <script type="text/javascript">
        var myApp = {
            user : <?php echo json_encode($user); ?>,
            logged : <?php echo $user->logged; ?>
        };
    </script>
    <body>

        <div id="app"></div>

        <script type="text/javascript" src="/app/assets/bundle/main.bundle.js" ></script>

    </body>
</html>

 

我们通过在index.php文件中添加此javascript行来访问React应用。

<script type=”text/javascript” src=”/app/assets/bundle/main.bundle.js” ></script>

 

设置一个React应用

现在我们已经创建了index.php文件,让我们创建应用程序的前端。在我们的index.php文件所在的位置创建一个新目录,并将其命名为app。在我们的新终端中打开您的终端并输入,

npm init

 

在我们的应用目录中,找到package.json文件。向其添加以下配置。

{
  "name": "react-php",
  "version": "1.0.0",
  "description": "Setting up php and react web app",
  "main": "index.js",
  "scripts": {
    "build": "webpack --progress --env.NODE_ENV=production --mode production",
    "watch": "webpack  --colors --debug --display-chunk -w --env.NODE_ENV=development --mode development"
  },
  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.2.3",
    "@babel/preset-react": "^7.0.0",
    "react": "^16.7.0",
    "react-async-component": "^2.0.0",
    "react-dom": "^16.7.0",
    "react-helmet": "^5.2.0",
    "react-hot-loader": "^4.6.3",
    "react-router-dom": "^4.3.1"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0-rc.1",
    "@babel/plugin-proposal-decorators": "^7.2.3",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/preset-env": "^7.0.0-rc.1",
    "@babel/preset-typescript": "^7.1.0",
    "autoprefixer": "^9.4.4",
    "babel-loader": "^8.0.0-beta.4",
    "css-loader": "^2.1.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^3.0.1",
    "node-sass": "^4.11.0",
    "path": "^0.12.7",
    "postcss-flexibility": "^2.0.0",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^6.0.7",
    "style-loader": "^0.23.1",
    "webpack": "^4.17.0",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.14"
  },
  "author": "I am a Pro",
  "license": "ISC"
}

 

重要注意事项

我们正在将webpack配置为使用app.js(具有我们的react javascript)和app.scss(具有我们的应用程序css / style)作为我们的主要/入口文件。

entry: {
    main: [
      ‘./_devapp/app.js’,
      ‘./_devapp/css/app.scss’
    ]
 },

 

我们正在定义已编译脚本(assets/bundle文件夹)的输出。

output: {
   path: path.resolve(__dirname, ‘assets’, ‘bundle’),
   filename: ‘[name].bundle.js’
},

 

由于某些原因,我没有将捆绑的css和js文件混合在一个文件夹中,而上面的代码就是这种情况,因此我在webpack.config.js文件中添加了以下脚本。

plugins: [
     new ExtractTextPlugin(path.join(‘..’, ‘css’, ‘app.css’))
]

 

在我们的应用程序中,我们将MyApp全局变量导入到我们的react JS应用程序中。
这可以保持我们的应用程序清洁。window除非有必要,否则避免从全局变量中导入变量。

externals: {
     myApp: ‘myApp’,
},

 

最后,如果您的react应用正在连接到api,则最好通过webpack或应用将使用的api版本等其他静态变量来传递静态端点

plugins: [
   new webpack.DefinePlugin({
      ‘__DEV__’ : JSON.stringify(true),
      ‘__API_HOST__’ : JSON.stringify(‘http://localhost/my-app/'),
    }),
],

 

为了捆绑/编译我们的SCSS和React应用程序,我们将使用webpack。将以下内容复制到webpack.config.js文件中

'use strict';

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

let config = {
  	entry: {
    	main: [
			'./_devapp/app.js',
			'./_devapp/css/app.scss'
    	]
  	},
  	output: {
		path: path.resolve(__dirname, 'assets', 'bundle'),
		filename: '[name].bundle.js'
	},
	resolve: {
        extensions: ['.js', '.jsx', '.json', '.ts', '.tsx']
    },
  	module: {
		rules: [
			{
				test: /\.(js|jsx|tsx|ts)$/,
				exclude:path.resolve(__dirname, 'node_modules'),
				use: {
				loader: 'babel-loader',
				options: {
					presets: [
							'@babel/preset-env',
							'@babel/preset-react',
							'@babel/preset-typescript'
						],
						plugins : [
							["@babel/plugin-proposal-decorators", { "legacy": true }],
							'@babel/plugin-syntax-dynamic-import',
							['@babel/plugin-proposal-class-properties', { "loose": true }]
						]
					}
				},
			},
			{
				test: /\.scss$/,
				use: ExtractTextPlugin.extract({
				fallback: 'style-loader',
				use: [
						{
							loader: 'css-loader',
						},
						'postcss-loader',
						'sass-loader'
					]
				})
			},
			{
				test: /.(png|woff(2)?|eot|ttf|svg|gif)(\?[a-z0-9=\.]+)?$/,
				use: [
				{
					loader: 'file-loader',
					options: {
						name: '../css/[hash].[ext]'
					}
				}
				]
			},
			{
				test : /\.css$/,
				use: ['style-loader', 'css-loader', 'postcss-loader']
			}
		]
	},
	externals: {
		myApp: 'myApp',
	},
  	plugins: [
		new ExtractTextPlugin(path.join('..', 'css', 'app.css')),
		new webpack.DefinePlugin({
			'__DEV__' : JSON.stringify(true),
			'__API_HOST__' : JSON.stringify('http://localhost/my-app/'),
		}),
	],
	  
};

if (process.env.NODE_ENV === 'production') {
  	config.plugins.push(
    	new webpack.optimize.UglifyJsPlugin({
			sourceMap: false,
			compress: {
				sequences: true,
				conditionals: true,
				booleans: true,
				if_return: true,
				join_vars: true,
				drop_console: true
			},
			output: {
				comments: false
			},
			minimize: true
    	})
  	);
}

module.exports = config;

 

现在,让我们在前端显示用户数据。遍历/app/_devapp/app.js文件并执行以下操作。借助webpack,我们将通过导入JS myApp变量来导入用户数据。

import React, { Component, Fragment } from 'react';
import { render } from 'react-dom';
import { asyncComponent } from 'react-async-component';

/** We are importing our index.php my app Vairaible */
import myApp from 'myApp';

class Myapp extends Component {
    render() {

        const { user : { name, email }, logged } = myApp;

        return (
            <Fragment>
                <div className="dashboard">
                    {logged &&
                        <h2 className="status">Logged In</h2>
                    }
                    <h1 className="name"> {name}</h1>
                    <p className="email">{email}</p>

                    <p>API host variable {__API_HOST__}</p>
                </div>
            </Fragment>
        )
    }
}

render(<Myapp/>, document.getElementById('app'));
/** We are importing our index.php myApp Vairaible */
import myApp from ‘myApp’;

 

运行npm install以安装我们的依赖项。

我们将关注React应用程序文件中的更改,这将使我们能够在仍处于开发模式时将React文件用作捆绑文件。这是通过package.json文件中的这一行完成的。

watch”: “webpack — colors — debug — display-chunk -w — env.NODE_ENV=development — mode development”

要显示我们的React App前端,我们需要通过terminal或cmd运行此命令npm run-script watch

 

生产

开发的最后一步是生产。但是首先,初始代码必须经过处理,编译和最小化的多个阶段。

为了完成我们在我们的 package.json

“build”: “webpack — progress — env.NODE_ENV=production — mode production”,

 

最后,我们需要执行命令"run-script build"。之后,已编译的React代码将出现在“ app / assets / bundles /”文件夹中。该scss将被编译到“ app / assets / css”文件夹中。就这样!

要下载该项目的所有文件或浏览代码,请通过此Github链接访问存储库

就是这样!如果您喜欢这篇文章,请确保在下面给我一些信息,并关注我以获取更多文章。

 

 

本文:React搭配PHP的使用方法, PHP 和 React.js一起使用, An advanced guide on how to setup a React and PHP

Leave a Reply