如何将react集成到Yii2 Basic

composer create-project --prefer-dist yiisoft/yii2-app-basic <project-name>

npm install react react-dom

import React from 'react';

const MyComponent = () => {
  return (
    <div>
      <h1>Hello, React!</h1>
    </div>
  );
};

export default MyComponent;

<?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')
  );
");
?>

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'],
  },
};

npm install webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react --save-dev

npx webpack --config webpack.config.js

<?php
// ...

// 引入构建后的React代码
$this->registerJsFile('@web/dist/bundle.js');
?>

php yii serve