react是如何引入的

React 的引入方式

React 可以通过多种方式引入到项目中，具体取决于项目的需求和构建工具的选择。以下是常见的引入方式：

通过 CDN 引入

在 HTML 文件中直接通过 CDN 链接引入 React 和 React DOM。这种方式适合快速原型开发或学习用途。

<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。这种方式适合正式项目开发，可以与构建工具（如 Webpack、Vite）结合使用。

npm install react react-dom

或

yarn add react react-dom

使用 Create React App 脚手架

Create React App 是官方推荐的快速搭建 React 项目的方式，自动配置开发环境。

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

使用 Vite 创建 React 项目

Vite 是一个现代化的前端构建工具，支持快速创建 React 项目。

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

在 TypeScript 项目中引入

如果需要使用 TypeScript，可以通过以下命令创建 TypeScript 版本的 React 项目。

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

或使用 Vite：

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

在现有项目中手动配置

对于已有项目，可以通过手动配置 Webpack 或 Rollup 等构建工具来引入 React。需要在配置文件中添加 React 和 React DOM 作为依赖，并配置相应的加载器和插件。

以上是 React 常见的引入方式，选择适合项目需求的方法即可。