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

文章目录

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

几乎每种语言或者框架学习的第一条语句就是输出 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 的相关概念会在下节提到。

扫描二维码关注公众号，回复： 10303090 查看本文章