搭建一个简单的react工程-Toy模板网

这篇具有很好参考价值的文章主要介绍了搭建一个简单的react工程。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

首先，需要确保安装了 Node.js 和 npm。可以在命令行中输入 node -v 和 npm -v 命令来检查版本。
创建一个新的项目目录，并进入该目录。
在命令行中运行以下命令来初始化 npm 项目：
```
npm init -y
```
这将创建一个名为 package.json 的文件，其中包含了项目的依赖和配置信息。
安装 React 和 ReactDOM 库，可以运行以下命令：
```
npm install react react-dom
```
安装 Babel 编译器和相关插件，用于将 ES6+ 的代码转换为浏览器可识别的 JavaScript 代码。可以运行以下命令：
```
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react babel-loader
```
创建一个名为 index.html 的 HTML 文件，用于承载 React 应用程序的内容。

在 index.html 中引入 React 和 ReactDOM 库以及 Babel 转换后的 JavaScript 文件。例如：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.production.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
    <script src="dist/bundle.js"></script>
  </body>
</html>

在项目根目录中创建一个名为 src 的文件夹，并在其中创建一个名为 index.js 的文件，用于编写 React 应用程序的核心代码。

在 index.js 中导入必要的库和组件，并使用 ReactDOM 将 React 组件渲染到页面上。例如：

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

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

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

配置 Babel 编译器，使得它可以将 ES6+ 和 JSX 语法转换为浏览器可识别的 JavaScript 代码。可以在项目根目录下创建一个名为 .babelrc 的文件，同时添加以下内容：
```
{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
```

配置 webpack 打包工具，将多个 JavaScript 文件打包成一个文件。可以在项目根目录下创建一个名为 webpack.config.js 的文件，同时添加以下内容：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  devtool: 'source-map',
  devServer: {
    contentBase: path.join(__dirname, 'public'),
    port: 3000
  }
};

在命令行中运行以下命令，使用 webpack 打包应用程序：
```
npx webpack --mode development
```
启动开发服务器，可以使用以下命令：
```
npx webpack-dev-server --open
```
这将会启动一个本地服务器，自动打开浏览器，并在 http://localhost:3000 上显示 React 应用程序。如果需要修改代码，Webpack 将会自动重新编译并重新启动