安装 React(install React)

安装React#

1. CDN#

通过在HTML中直接引入React库，即可使用

1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <meta charset="UTF-8" />
5
    <title>Hello React!</title>
6
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" ></script>
7
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
8
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js" ></script>
9
</head>
10
<body>
11
    <div id="example"></div>
12
</body>
13
</html>
14
<script type="text/babel">
15
// 简单的 React 组件
16
function App() {
17
    return <h1>Hello, React!</h1>;
18
}
19

20
const root = ReactDOM.createRoot(document.getElementById("example"));
21
// 渲染 React 组件到 DOM
22
root.render(<App />);
23
</script>

字节跳动的 React CDN 库#

1
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" ></script>
2
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
3
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js" ></script>

Staticfile CDN 的 React CDN 库#

1
<script src="https://cdn.staticfile.org/react/18.2.0/umd/react.development.js"></script>
2
<script src="https://cdn.staticfile.org/react-dom/18.2.0/umd/react-dom.development.js"></script>
3
<!-- 生产环境中不建议使用 -->
4
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

官方提供的 CDN#

1
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
2
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
3
<!-- 生产环境中不建议使用 -->
4
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

2. NPM#

前置条件#

需要你的电脑以及安装了node.js

1
node -v
2
npm -v

开始安装和使用#

1
npm install -g create-react-app
2
npx create-react-app my-app
3
cd my-app/
4
npm start

3.Vite#

Vite 是一个现代化的前端构建工具，旨在通过利用现代浏览器的原生 ES 模块支持，提供快速的开发体验。而且是当前 React 官方推荐的首选工具，比传统的 Create React App 更快、更轻量、开发体验更好。

前置条件#

安装node和vite

创建一个Vite+React项目#

1
npm create vite@latest my-first-react-app -- --template react

或者使用pnpm(更加推荐,最快最省磁盘)

1
pnpm create vite@latest my-first-react-app -- --template react

pnpm并非node默认的包管理器需要另外安装

1
npm install -g pnpm

启动项目#

进入项目根目录cd my-first-react-app,安装环境pnpm install或者npm install

启动开发服务器npm run dev

Lovely firefly!

安装React#

1. CDN#

字节跳动的 React CDN 库#

Staticfile CDN 的 React CDN 库#

官方提供的 CDN#

2. NPM#

前置条件#

开始安装和使用#

3.Vite#

前置条件#

创建一个Vite+React项目#

启动项目#

文章分享

目录