React 入门教程系列（二）——Hello React

迈不过友情╰ 2023-06-06 10:35 7阅读 0赞

### 文章目录 ###

*   *   *  1. 引入相关库文件
         *  2. 输出 Hello React
         *  3. 检查元素
         *  4. 相关插件
         *  5. 源码

几乎每种语言或者框架学习的第一条语句就是输出 `Hello xxx`，这里我们来学习一下使用 React 框架在浏览器中输出 Hello React，效果如下面的图片：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70]

### 1. 引入相关库文件 ###

要使用 React 编写网页，需要项引入相关的库。

`这里并不推荐一上来就直接用 cli脚手架 构建项目，尤其是如果没有 Node/Webpack 基础。`我们先只用最简单的 `<script>`，把教程里的例子模仿一遍，理解用法，后面会有脚手架的相关教程。

引入相关库文件，你可以直接点击链接下载相关文件：

*  [react.development.js][]: React 的核心库
 *  [react-dom.development.js][]: 提供操作 DOM 的 react 拓展库
 *  [bable.min.js][]: 解析 JSX 语法代码转为纯 JS 语法的代码库

新建一个 html 文件，创建一个 div，并引入上面的几个文件。`*请注意引入的顺序以及路径`

<div id="element"></div>
    <script type="text/javascript" src="../build/react.development.js"></script>
    <script type="text/javascript" src="../build/react-dom.development.js"></script>
    <script type="text/javascript" src="../build/babel.min.js"></script>

### 2. 输出 Hello React ###

然后定义一个 `<script>` 标签，用于编写 JSX 的代码，并在标签内输入以下的代码。

<script type="text/babel"> // 1. 创建虚拟DOM元素对象 var vDOM = <h1>Hello React!</h1> // 2. 将虚拟DOM渲染到真实到DOM容器中 ReactDOM.render(vDOM, document.getElementById('element')) </script>

上面的 `render` 方法由`ReactDOM`提供，用于虚拟 DOM 渲染到真实到 DOM 容器中。接受  
两个参数：

1.  第一个参数传入虚拟 DOM
2.  第二个参数传入目标真实DOM

注意上面标签，`type` 的属性值是 `type="text/babel"`，这个属性是告诉 babel.js 要解析的是 `JSX` 代码。因为浏览器不能直接解析 JSX 的代码，需要 babel 编译为 js 代码才能运行。因此只要是用了 JSX 语法，需要加上 `type="text/babel"`。

关于 `JSX` 的相关概念会在下节提到。

保存文件，并使用浏览器打开，就可以看到封面中的效果了

### 3. 检查元素 ###

按 `F12` 打开开发者工具，检查页面的元素，可以看到`<h1>` 标签被成功的渲染到页面上。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70 1]

### 4. 相关插件 ###

如果你是用的是 Chrome 浏览器，推荐安装一个 [React Developer Tools][] 插件，之后会方便调试。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70 2]

### 5. 源码 ###

本节图文教程的源码：[https://github.com/Mayandev/react-tutorial/blob/master/code/react-helloreact/hello-react.html][https_github.com_Mayandev_react-tutorial_blob_master_code_react-helloreact_hello-react.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70]: /images/20230601/52b04cea3d35421faf22793513dfeda3.png
[react.development.js]: https://phillzou.cowtransfer.com/s/2a695c9ec1084b
[react-dom.development.js]: https://phillzou.cowtransfer.com/s/c09dcda5a6374a
[bable.min.js]: https://phillzou.cowtransfer.com/s/8ed58876f87749
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70 1]: /images/20230601/a2c3e8dde4f244f59e1798bb99b22f3c.png
[React Developer Tools]: https://phillzou.cowtransfer.com/s/47897d2547454a
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70 2]: /images/20230601/963a26b10aea466d88b7393f87a5b4be.png
[https_github.com_Mayandev_react-tutorial_blob_master_code_react-helloreact_hello-react.html]: https://github.com/Mayandev/react-tutorial/blob/master/code/react-helloreact/hello-react.html