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

几乎每种语言或者框架学习的第一条语句就是输出 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 容器中。接受
两个参数：

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

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

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

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

3. 检查元素

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

4. 相关插件

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

5. 源码

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