构建最小react项目 | 郭旭升博客主页

要构建最小的React项目架构且没有多余的依赖，可以手动配置Webpack和Babel。

下面是一些基本的步骤：

首先，在你的项目文件夹中，创建一个基本的HTML文件来放置React组件渲染的内容。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React App</title>
</head>
<body>
    <div id="root"></div>
    <script src="bundle.js"></script>
</body>
</html>

其中，我们需要一个容器div来渲染React组件，和一个引入bundle.js的script标签，因为React代码的编译结果是一个JavaScript文件。

然后，创建一个入口文件src/index.js来编写React应用的代码。例如：

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  render() {
    return (
      <h1>Hello, World!</h1>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

这里我们写了一个React组件App，用于输出“Hello, World!”。然后，我们使用ReactDOM.render()方法将这个组件渲染到前面创建的div元素中。

接下来，需要安装一些必要的依赖：

npm install react react-dom webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react –save-dev
其中，webpack、webpack-cli和babel-loader用于将React代码编译成可识别的JavaScript文件，并将其打包到一个bundle.js中；@babel/core、@babel/preset-env和@babel/preset-react用于将JSX和ES6语法转换成ES5语法。

创建Webpack配置文件webpack.config.js，例如：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      }
    ]
  }
};

这里的配置文件中设置了入口文件和输出文件，同时使用了babel-loader对所以后缀名为js和jsx的文件进行转码，使之支持ES6和JSX的语法。

最后，在package.json中添加以下命令：

"scripts": {
  "start": "webpack-dev-server --mode development --open",
  "build": "webpack --mode production"
}

这样，你就可以通过运行npm start启动项目，或者通过运行npm build将项目打包到dist文件夹中。