如何创建react项目

使用 Create React App 创建项目

安装 Node.js 确保系统已安装 Node.js（建议版本 14+），可通过 node -v 和 npm -v 检查版本。

通过 npx 快速创建项目：

npx create-react-app my-app

my-app 为项目名称，创建完成后进入项目目录：

cd my-app

启动开发服务器：

npm start

默认在浏览器打开 http://localhost:3000。

使用 Vite 创建 React 项目

Vite 提供更快的构建速度，适合现代项目。确保 Node.js 版本 ≥ 16.0.0。

通过 npm 或 yarn 初始化项目：

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

或使用 yarn：

yarn create vite my-vite-app --template react

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

cd my-vite-app
npm install
npm run dev

手动配置 Webpack 项目

适合需要自定义配置的场景。初始化项目目录：

mkdir my-react-app
cd my-react-app
npm init -y

安装 React 和 ReactDOM：

npm install react react-dom

安装开发依赖（Webpack、Babel 等）：

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: path.join(__dirname, 'dist'),
    port: 3000,
    open: true,
  },
};

添加 Babel 配置 .babelrc：

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

创建项目结构：

my-react-app/
├── src/
│   └── index.js
├── public/
│   └── index.html
├── package.json
└── webpack.config.js

在 package.json 中添加脚本：

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

使用 TypeScript 模板

Create React App 支持 TypeScript 模板：

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

Vite 创建 TypeScript 项目：

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