当前位置:首页 > 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

电脑如何安装react

安装 Node.js 和 npm React 依赖于 Node.js 和 npm(Node Package Manager)。从 Node.js 官网下载并安装最新稳定版本,安装完成后会自动包含 np…

如何改造react

如何改造react

改造 React 项目的关键方法 分析当前项目结构 通过评估现有组件、状态管理和依赖项,明确需要改进的部分。使用工具如 webpack-bundle-analyzer 识别性能瓶颈。 升级 Reac…

如何升级react native

如何升级react native

升级 React Native 的步骤 检查当前版本 运行以下命令查看当前项目的 React Native 版本: react-native --version 更新 React Native CL…

如何搭建react项目

如何搭建react项目

使用 Create React App 搭建项目 Create React App (CRA) 是官方推荐的快速搭建 React 项目的工具,无需配置构建工具(如 Webpack 或 Babel)。…

react如何代码优化

react如何代码优化

减少不必要的重新渲染 使用 React.memo 包装函数组件以避免在 props 未变化时重新渲染。对于类组件,可以通过 shouldComponentUpdate 或继承 PureComponen…

react如何提交表单

react如何提交表单

表单提交的基本方法 在React中提交表单通常通过控制组件状态和事件处理实现。表单数据通过onSubmit事件捕获,并阻止默认提交行为以避免页面刷新。 import { useState } fro…