react如何创建项目

创建 React 项目的步骤

使用 create-react-app 工具快速创建 React 项目。确保已安装 Node.js（版本 ≥ 14.0.0）和 npm（版本 ≥ 5.6）。

打开终端或命令行工具，运行以下命令：

npx create-react-app my-app

my-app 是项目名称，可以自定义。

等待依赖安装完成后，进入项目目录：

cd my-app

启动开发服务器：

npm start

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

使用 Vite 创建 React 项目

Vite 是一种更快的构建工具，适合现代前端开发。运行以下命令创建 Vite + React 项目：

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

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

cd my-vite-app
npm install

启动开发服务器：

npm run dev

手动配置 Webpack 的 React 项目

适用于需要深度定制的场景。初始化项目并安装核心依赖：

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

配置 Babel（创建 .babelrc 文件）：

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

项目结构说明

典型的 React 项目结构如下：

my-app/
  ├── node_modules/
  ├── public/
  │   ├── index.html
  ├── src/
  │   ├── App.js
  │   ├── index.js
  ├── package.json

public/index.html 是应用的入口 HTML 文件，src/index.js 是 React 应用的入口 JavaScript 文件。

其他工具链选择

• Next.js：适合服务端渲染（SSR）和静态网站生成（SSG）。

  npx create-next-app@latest

• Gatsby：基于 React 的静态站点生成器。

  

  npx gatsby new my-gatsby-site

根据项目需求选择合适的工具链，create-react-app 适合快速原型开发，Vite 和手动配置适合需要更高灵活性的场景。