react如何引入

React 引入方式

React 可以通过多种方式引入项目，具体选择取决于项目需求和开发环境。以下是常见的引入方法：

通过 CDN 引入

在 HTML 文件中直接通过 CDN 链接引入 React 和 ReactDOM。适用于快速原型开发或小型项目。

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

生产环境建议使用压缩版本：

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

使用 npm 或 yarn 安装

通过包管理器安装 React 作为项目依赖。适用于现代前端项目构建。

npm install react react-dom

或使用 yarn：

yarn add react react-dom

使用 Create React App 脚手架

官方推荐的快速创建 React 项目的方式，内置 Webpack、Babel 等工具链。

npx create-react-app my-app
cd my-app
npm start

使用 Vite 构建工具

Vite 提供更快的开发体验，适合现代 React 项目。

npm create vite@latest my-react-app --template react
cd my-react-app
npm install
npm run dev

模块化导入

在支持 ES6 模块的项目中，可以直接导入 React：

import React from 'react';
import ReactDOM from 'react-dom/client';

TypeScript 支持

如果需要 TypeScript 支持，安装对应的类型定义：

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