react如何构建项目

使用 Create React App 构建项目

Create React App (CRA) 是官方推荐的快速构建 React 项目的工具，无需配置构建流程。

安装 Create React App：

npx create-react-app my-app

进入项目目录并启动开发服务器：

cd my-app
npm start

使用 Vite 构建项目

Vite 是一个现代化的前端构建工具，提供更快的开发体验。

安装 Vite 并创建 React 项目：

npm create vite@latest my-react-app --template react

进入项目目录并安装依赖：

cd my-react-app
npm install

启动开发服务器：

npm run dev

手动配置 Webpack 构建项目

对于需要更多自定义配置的项目，可以手动设置 Webpack。

初始化项目并安装必要依赖：

mkdir my-react-app
cd my-react-app
npm init -y
npm install react react-dom
npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin css-loader style-loader

创建 webpack.config.js 文件：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    port: 3000,
    open: true,
  },
};

创建项目结构并添加必要的文件后，运行开发服务器：

npx webpack serve --mode development

使用 Next.js 构建项目

Next.js 是一个 React 框架，适合构建服务端渲染应用。

创建 Next.js 项目：

npx create-next-app@latest

进入项目目录并启动开发服务器：

cd my-next-app
npm run dev