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安装

在已有Node.js环境的项目中，通过包管理器安装：

npm install react react-dom

或

yarn add react react-dom

使用create-react-app创建项目

官方推荐的脚手架工具，快速创建React项目：

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

使用Vite创建React项目

现代化的前端构建工具，速度更快：

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

模块化导入方式

在模块化项目中，通常这样导入React：

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

React 18+版本推荐使用新的根API：

import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(<App />);

TypeScript支持

如需TypeScript支持，创建项目时可选择TypeScript模板：

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

或通过Vite：

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