当前位置:首页 > React

react如何下载包

2026-03-30 22:00:52React

使用 npm 安装 React 包

通过 npm(Node Package Manager)可以快速安装 React 及其相关依赖。确保已安装 Node.js 和 npm。运行以下命令安装 React:

npm install react react-dom

如果需要创建完整的 React 项目结构,可以使用 create-react-app

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

使用 Yarn 安装 React 包

Yarn 是另一个流行的包管理工具,安装 React 的方式与 npm 类似。确保已安装 Yarn,然后运行:

yarn add react react-dom

使用 create-react-app 时,也可以通过 Yarn 初始化项目:

react如何下载包

yarn create react-app my-app
cd my-app
yarn start

通过 CDN 引入 React

如果不使用包管理工具,可以直接通过 CDN 在 HTML 文件中引入 React。将以下代码添加到 HTML 的 <head><body> 中:

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

安装特定版本的 React

如果需要安装特定版本的 React,可以在安装时指定版本号:

react如何下载包

npm install react@17.0.2 react-dom@17.0.2

或使用 Yarn:

yarn add react@17.0.2 react-dom@17.0.2

安装其他 React 生态包

React 生态中有许多常用库,如状态管理工具 Redux 或路由库 React Router。安装方式类似:

npm install redux react-redux
npm install react-router-dom

或使用 Yarn:

yarn add redux react-redux
yarn add react-router-dom

分享给朋友:

相关文章

如何选购react

如何选购react

选购 React 相关产品或服务的建议 React 是一个用于构建用户界面的 JavaScript 库,广泛应用于前端开发。以下是选购 React 相关产品(如课程、书籍、工具、组件库等)的参考方法:…

react如何运行

react如何运行

运行React项目的步骤 安装Node.js 确保系统已安装Node.js(建议版本12以上),可从官网下载并安装。Node.js自带npm包管理器,用于后续依赖安装。 创建React项目 使用官方…

react如何迭代

react如何迭代

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

react 如何遍历

react 如何遍历

遍历数组 在React中遍历数组通常使用map方法,它会返回一个新的数组。map是处理数组并渲染列表元素的首选方法。 const items = ['Apple', 'Banana', 'Cherr…

react 如何精通

react 如何精通

掌握核心概念 深入理解React的基础概念,包括组件(函数组件与类组件)、状态(useState)、生命周期(useEffect)、Props传递、虚拟DOM与Diff算法。通过官方文档或《React…

react如何同步修改

react如何同步修改

同步修改状态的常见方法 在React中同步修改状态通常涉及使用useState或useReducer钩子,结合React的批处理机制确保状态更新的一致性。以下是几种典型场景的解决方案: 直接使用us…