当前位置：首页 > React

react如何启动项目

2026-03-10 15:17:26React

使用 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 方式：

react如何启动项目

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

其他工具链选择

Next.js：适合服务端渲染或静态站点生成。
```
npx create-next-app@latest
```
Remix：全栈 React 框架。
```
npx create-remix@latest
```

标签: 项目 react

分享给朋友：

react如何开发组件

React 组件开发基础 React 组件分为函数组件和类组件两种形式。函数组件是现代 React 开发的主流方式，结合 Hooks 可以实现完整功能。函数组件示例： function Gree…

react架构如何

React 架构核心概念 React 的架构围绕组件化、虚拟 DOM 和单向数据流设计。组件是构建用户界面的独立模块，分为函数组件和类组件。虚拟 DOM 通过高效的 Diff 算法减少直接操作真实 D…

react如何验证

表单验证方法在React中验证表单数据通常使用以下几种方式：内置HTML5验证利用HTML5原生表单验证属性如required、pattern等，结合form.noValidate属性禁用浏览…

react如何迭代

在 React 中迭代数组或对象 React 提供了多种方式来处理数组或对象的迭代，以下是常见的方法：使用 map 方法迭代数组 map 是 JavaScript 数组的内置方法，常用于在 Rea…