将React集成到Yii2 Basic可以通过以下步骤完成:
composer create-project --prefer-dist yiisoft/yii2-app-basic <project-name>
npm install react react-dom
web
目录下创建一个新的文件夹,例如react
。然后在该文件夹中创建一个新的React组件,例如MyComponent.jsx
。编写您的React组件代码,例如:import React from 'react';
const MyComponent = () => {
return (
<div>
<h1>Hello, React!</h1>
</div>
);
};
export default MyComponent;
views
文件夹下),然后在需要集成React组件的地方添加以下代码:<?php
// ...
// 渲染React组件容器
echo "<div id='react-container'></div>";
// 注册并加载React组件
$this->registerJs("
var React = require('react');
var ReactDOM = require('react-dom');
var MyComponent = require('./path/to/MyComponent.jsx');
ReactDOM.render(
React.createElement(MyComponent),
document.getElementById('react-container')
);
");
?>
确保将./path/to/MyComponent.jsx
替换为您实际的React组件文件路径。
webpack.config.js
,并添加以下配置:const path = require('path');
module.exports = {
entry: './web/react/MyComponent.jsx',
output: {
path: path.resolve(__dirname, 'web/dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
},
},
},
],
},
resolve: {
extensions: ['.js', '.jsx'],
},
};
确保将./web/react/MyComponent.jsx
替换为您实际的React组件文件路径。
npm install webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react --save-dev
npx webpack --config webpack.config.js
这将生成一个名为bundle.js
的文件。
<?php
// ...
// 引入构建后的React代码
$this->registerJsFile('@web/dist/bundle.js');
?>
php yii serve
现在,您的Yii2 Basic应用程序中已经成功集成了React。您可以在需要的视图中使用React组件,并根据您的实际需求进一步开发和定制。
领取专属 10元无门槛券
手把手带您无忧上云