react如何创建项目

使用 Create React App 创建项目

安装 Create React App 工具，这是官方推荐的快速搭建 React 项目的方式。确保系统已安装 Node.js（版本需 ≥ 14.0.0）。

通过以下命令创建新项目：

npx create-react-app my-app

其中 my-app 是项目名称，可根据需求修改。该命令会自动安装 React 及相关依赖。

创建完成后进入项目目录并启动开发服务器：

cd my-app
npm start

开发服务器默认运行在 http://localhost:3000，修改代码时会自动刷新页面。

使用 Vite 创建项目

Vite 是另一种高效的构建工具，适合需要更快启动和热更新的场景。安装 Vite 并创建 React 项目：

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

进入项目目录并安装依赖后启动：

cd my-react-app
npm install
npm run dev

Vite 开发服务器默认运行在 http://localhost:5173。

手动配置 Webpack 项目

对于需要自定义配置的高级用户，可以手动设置 Webpack 环境。初始化项目并安装核心依赖：

mkdir my-react-project
cd my-react-project
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

创建 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']
          }
        }
      }
    ]
  },
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    port: 3000,
  },
};

添加启动脚本到 package.json：

"scripts": {
  "start": "webpack serve --mode development",
  "build": "webpack --mode production"
}

TypeScript 支持

如需使用 TypeScript，在创建项目时添加 TypeScript 模板：

使用 Create React App：

npx create-react-app my-app --template typescript

使用 Vite：

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

手动配置 Webpack 项目需额外安装：

npm install --save-dev typescript @types/react @types/react-dom ts-loader

并更新 Webpack 配置以处理 .tsx 文件。