react项目如何创建

创建React项目的步骤

使用官方工具create-react-app（CRA）是最简单的方式。确保已安装Node.js（版本≥14）和npm/yarn。

安装create-react-app全局工具（非必须，npx可直接运行）：

npm install -g create-react-app

通过npx直接创建项目（推荐）：

npx create-react-app my-app

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

cd my-app
npm start

使用Vite创建React项目

Vite是更快的现代构建工具，适合对性能有要求的项目。

通过npm/yarn初始化Vite项目：

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

进入项目并安装依赖：

cd my-react-app
npm install
npm run dev

手动配置Webpack项目

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

初始化项目并安装基础依赖：

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

安装Webpack和相关插件：

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: ['babel-loader']
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ],
  devServer: {
    static: './dist',
    hot: true
  }
};

项目结构说明

典型React项目结构：

my-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── App.js
│   ├── index.js
│   └── styles.css
├── package.json
└── README.md

TypeScript支持

创建时添加TypeScript模板：

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

或为现有项目添加TypeScript：

npm install --save typescript @types/react @types/react-dom

测试与构建

运行测试：

npm test

生成生产环境构建：

npm run build