安装 React

React 可以在新的项目中或现有项目中使用。根据你的需求选择合适的安装方式。

新项目

如果你是从零开始，建议使用现代框架来创建 React 应用。

使用 Next.js（推荐）

Next.js 是一个强大的 React 框架，提供了服务器渲染、路由等开箱即用的功能。

1

创建新项目

在终端中运行以下命令：

Bash
npx create-next-app@latest my-app

你会看到一些选项，推荐选择以下配置：

  • TypeScript: Yes
  • ESLint: Yes
  • Tailwind CSS: Yes
  • src/ 目录: Yes
  • App Router: Yes
  • 自定义导入别名: @/*
2

进入项目目录

Bash
cd my-app
3

启动开发服务器

Bash
npm run dev

然后打开 http://localhost:3000 查看你的应用。

使用 Vite

Vite 是一个现代化的构建工具，提供极快的开发服务器启动。

Bash
# 使用 npm
npm create vite@latest my-app -- --template react

# 使用 yarn
yarn create vite my-app --template react

# 使用 pnpm
pnpm create vite my-app --template react
框架选择

如果你需要服务端渲染、路由等功能，使用 Next.js 或 Remix。 如果你只需要一个简单的单页应用，Vite 是很好的选择。

在现有项目中添加 React

如果你已经在使用 Webpack、Vite 或 Parcel 等构建工具，可以轻松添加 React。

步骤 1: 安装 React

Bash
npm install react react-dom

步骤 2: 创建 React 组件

TypeScript
// src/App.tsx
import { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>你好，React!</h1>
      <p>计数: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        增加
      </button>
    </div>
  );
}

export default App;

步骤 3: 渲染到 DOM

TypeScript
// src/main.tsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>
);

步骤 4: 更新 HTML

HTML
<!-- index.html -->
<div id="root"></div>

不使用构建工具

你可以在不使用构建步骤的情况下尝试 React。这对于学习和简单原型很有用。

在 HTML 中添加 React

在你的 HTML 文件中添加这些脚本标签：

HTML
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React App</title>

    <!-- React 和 ReactDOM -->
    <script crossorigin src="https://unpkg.com/react@19/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@19/umd/react-dom.production.min.js"></script>

    <!-- Babel Standalone (用于 JSX) -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>

    <script type="text/babel">
      const { useState } = React;
      const { createRoot } = ReactDOM;

      function App() {
        const [count, setCount] = useState(0);
        return (
          <div>
            <h1>你好，React！</h1>
            <p>计数: {count}</p>
            <button onClick={() => setCount(count + 1)}>
              增加
            </button>
          </div>
        );
      }

      const root = createRoot(document.getElementById('root'));
      root.render(<App />);
    </script>
  </body>
</html>
仅用于学习

不要在生产环境中使用这种方式。这种方式仅用于学习和原型开发。 生产环境应该使用构建工具（如 Next.js、Vite 等）。

故障排除

版本不兼容

确保 react 和 react-dom 的版本一致。

TypeScript 错误

如果你使用 TypeScript，确保安装了类型定义：

Bash
npm install --save-dev @types/react @types/react-dom

Node.js 版本

React 19 需要 Node.js 20.9.0 或更高版本。检查你的 Node 版本：

Bash
node --version

下一步

现在你已经安装了 React，接下来可以学习：