当前位置:首页 > React

react如何安装

2026-03-30 16:40:05React

安装 React

React 可以通过多种方式安装,最常见的是使用 create-react-app 或直接通过 CDN 引入。以下是几种常用的安装方法:

使用 create-react-app

create-react-app 是官方推荐的脚手架工具,适合快速创建 React 项目。

确保已安装 Node.js(版本 14 或更高)和 npm(或 yarn)。运行以下命令创建新项目:

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

项目创建完成后,会自动启动开发服务器,默认在 http://localhost:3000 打开应用。

react如何安装

使用 Vite

Vite 是一个现代前端构建工具,支持快速启动 React 项目。

运行以下命令创建 React 项目:

react如何安装

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

通过 CDN 引入

如果不需要构建工具,可以直接在 HTML 文件中通过 CDN 引入 React。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React CDN Example</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      function App() {
        return <h1>Hello, React!</h1>;
      }
      ReactDOM.render(<App />, document.getElementById('root'));
    </script>
  </body>
</html>

使用 npm 或 yarn 安装

如果已有项目需要集成 React,可以通过 npm 或 yarn 安装。

npm install react react-dom

yarn add react react-dom

安装完成后,在项目中引入 React 即可开始开发。

标签: react
分享给朋友:

相关文章

react中monent如何获取日期

react中monent如何获取日期

使用 Moment.js 获取当前日期 在 React 中通过 Moment.js 获取当前日期,可以直接调用 moment() 函数。它会返回包含当前日期和时间的 Moment 对象。 impor…

react 如何分页

react 如何分页

分页实现方法 在React中实现分页功能可以通过多种方式完成,具体取决于数据来源(如API或本地数据)和UI库的选择。以下是常见的实现方法: 使用本地数据分页 对于存储在组件状态或Context中…

react如何检测

react如何检测

检测 React 应用的方法 使用 PropTypes 进行类型检查 PropTypes 是 React 内置的类型检查工具,用于验证组件的 props 是否符合预期。在开发环境中,PropTypes…

如何恢复react

如何恢复react

恢复 React 项目的方法 检查并修复依赖项 运行 npm install 或 yarn install 重新安装所有依赖项。如果依赖项损坏或缺失,这将恢复项目所需的库和工具。 恢复删除的文件 如…

react如何减少伤病

react如何减少伤病

减少React应用中的性能问题(避免"伤病") 优化React应用性能需要从组件渲染、状态管理和外部依赖等多方面入手。以下是关键优化策略: 使用React.memo进行组件记忆 对函数组件使用Rea…

react项目如何启动

react项目如何启动

启动React项目的步骤 确保已安装Node.js(建议版本12以上)和npm/yarn。可通过以下命令检查版本: node -v npm -v 全局安装create-react-app脚手架工具(…