react如何创建项目

使用 Create React App 创建项目

Create React App (CRA) 是官方推荐的 React 项目脚手架工具，适合快速初始化一个现代化的 React 项目。

安装 Create React App（如已安装可跳过）：

npm install -g create-react-app

创建新项目（以 my-app 为例）：

npx create-react-app my-app

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

cd my-app
npm start

项目默认运行在 http://localhost:3000。

使用 Vite 创建 React 项目

Vite 是一个更轻量、更快速的构建工具，适合追求开发效率的场景。

通过 Vite 初始化 React 项目（以 my-vite-app 为例）：

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

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

cd my-vite-app
npm install

启动开发服务器：

npm run dev

Vite 默认运行在 http://localhost:5173。

使用 Next.js 创建 React 项目

Next.js 是一个支持服务端渲染（SSR）的 React 框架，适合构建生产级应用。

初始化 Next.js 项目（以 my-next-app 为例）：

npx create-next-app@latest my-next-app

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

cd my-next-app
npm run dev

Next.js 默认运行在 http://localhost:3000。

手动配置 Webpack 创建 React 项目

适合需要高度自定义配置的场景，步骤如下：

初始化项目并安装核心依赖：

mkdir my-custom-app
cd my-custom-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-react html-webpack-plugin

创建 webpack.config.js 并配置基础规则：

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

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

配置 Babel（创建 .babelrc）：

{
  "presets": ["@babel/preset-react"]
}

创建项目入口文件（src/index.js 和 public/index.html），运行开发服务器：

npm run dev

选择工具的建议

• 快速原型开发：使用 Create React App 或 Vite。
• 生产级 SSR 应用：选择 Next.js。
• 深度自定义构建流程：手动配置 Webpack。

以上方法均能创建 React 项目，根据需求选择合适的方式即可。