React 入门教程系列（二）——Hello React-蒲公英云

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

文章目录

- - 1. 引入相关库文件
  - 1. 输出 Hello React
  - 1. 检查元素
  - 1. 相关插件
  - 1. 源码

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

在这里插入图片描述

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 的代码，并在标签内输入以下的代码。

<!-- 告诉babel.js解析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 容器中。接受
两个参数：

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

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

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

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