HoRain云--React 安装(CDN)

云夏之末

420人浏览 · 2026-06-12 11:30:00

云夏之末 · 2026-06-12 11:30:00 发布

🎬 HoRain云小助手：个人主页

🔥 个人专栏: 《Linux 系列教程》《c语言教程》

⛺️生活的理想，就是为了理想的生活!

⛳️ 推荐

前些天发现了一个超棒的服务器购买网站，性价比超高，大内存超划算！忍不住分享一下给大家。点击跳转到网站。

专栏介绍

专栏名称	专栏介绍
《C语言》	本专栏主要撰写C干货内容和编程技巧，让大家从底层了解C，把更多的知识由抽象到简单通俗易懂。
《网络协议》	本专栏主要是注重从底层来给大家一步步剖析网络协议的奥秘，一起解密网络协议在运行中协议的基本运行机制！
《docker容器精解篇》	全面深入解析 docker 容器，从基础到进阶，涵盖原理、操作、实践案例，助您精通 docker。
《linux系列》	本专栏主要撰写Linux干货内容，从基础到进阶，知识由抽象到简单通俗易懂，帮你从新手小白到扫地僧。
《python 系列》	本专栏着重撰写Python相关的干货内容与编程技巧，助力大家从底层去认识Python，将更多复杂的知识由抽象转化为简单易懂的内容。
《试题库》	本专栏主要是发布一些考试和练习题库（涵盖软考、HCIE、HRCE、CCNA等）

React 可以直接下载使用，下载包中也提供了很多学习的实例。

本教程使用了 React 的版本为 18.2.0，你可以在官网 React 下载最新版。

使用字节跳动的 React CDN 库，地址如下：

使用 Staticfile CDN 的 React CDN 库，地址如下：

官方提供的 CDN 地址：

注意: 在浏览器中使用 Babel 来编译 JSX 效率是非常低的。

使用实例

以下实例输出了 Hello, world!

React 实例

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" ></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js" ></script> </head> <body> <div id="example"></div> <script type="text/babel"> // 简单的 React 组件 function App() { return <h1>Hello, React!</h1>; } const root = ReactDOM.createRoot(document.getElementById("example")); // 渲染 React 组件到 DOM root.render(<App />); </script> </body> </html> </script> </body> </html>

实例解析：

实例中我们引入了三个库： react.production.min.js 、react-dom.production.min.js 和 babel.min.js：

react.min.js - React 的核心库
react-dom.min.js - 提供与 DOM 相关的功能
babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平。

// 简单的 React 组件 function App() { return <h1>Hello, React!</h1>; } const root = ReactDOM.createRoot(document.getElementById("example")); // 渲染 React 组件到 DOM root.render(<App />);

以上代码将一个 h1 标题，插入 id="example" 节点中。

const root = ReactDOM.createRoot(document.getElementById("example"));

获取 DOM 容器：document.getElementById("example") 获取了一个 id 为 "example" 的 DOM 元素。
创建根节点：ReactDOM.createRoot 是 React 18 引入的新方法，用于创建一个 React 根节点。在这个例子中，root 变量保存了这个根节点。