react如何启动项目

使用 Create React App 创建项目

安装 Create React App（CRA）工具，这是官方推荐的脚手架工具。确保已安装 Node.js（版本 ≥ 14.0.0）。

npx create-react-app my-app
cd my-app
npm start

运行后，默认会在 http://localhost:3000 启动开发服务器，并自动打开浏览器。

使用 Vite 创建项目

Vite 是另一种更快的构建工具，适合现代 React 项目。

npm create vite@latest my-vite-app --template react
cd my-vite-app
npm install
npm run dev

Vite 的默认开发服务器地址通常为 http://localhost:5173。

手动配置 Webpack 项目

适合需要深度自定义配置的场景。

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

mkdir my-webpack-app
cd my-webpack-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

创建 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'],
          },
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    port: 3000,
  },
};

在 package.json 中添加启动脚本：

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

使用 TypeScript 模板

CRA 和 Vite 均支持 TypeScript 模板。

CRA 方式：

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

Vite 方式：

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

其他工具链选择

• Next.js：适合服务端渲染或静态站点生成。

  npx create-next-app@latest

• Remix：全栈 React 框架。

  npx create-remix@latest