Hello react 案例

引入`react`

学习基本使用方法时，以最方便的方式引入react，就像引入原生jQuery一样。需要引入相关的JavaScript文件。

babel 可以将ES6转ES5，在react中将jsx转为js。
prop-types 这个我们目前还用不到，等后面再做详细了解
react为react核心库。
react-dom为react扩展库，用于操作DOM

`react`基本结构

创建新目录
创建html文件
初始化项目环境

文件目录为：

+
code
|-- js
|   |-- babel.min.js
|   |-- prop-types.js // 暂时用不上，可以不复制到文件结构中
|   |-- react.development.js
|   |-- react-dom.development.js
|-- test0.html

代码文件详情见code目录

创建html文件之后，按照规范编写好html文件的相应的格式，如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hello react</title>
</head>
<body>
</body>
</html>

react项目在html的<body>中需要一个带有id的<div>容器来供react来进行相应的注册。
在html文件中引入我们所需要的JavaScript文件
引入JavaScript文件时需要注意相应的顺序
其中必须先引入react库之后才可以紧接着引入react-dom库，因为核心库必须先就位才可以准备扩展库
至于babel库则无需在意引入顺序

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hello react</title>
</head>
<body>
<!--准备好一个初始容器-->
<div id="test"></div>
<!--引入react核心库-->
<script type="text/javascript" src="js/react.development.js"></script>
<!--引入react-dom库以支持react操作DOM-->
<script type="text/javascript" src="js/react-dom.development.js"></script>
<!--引入babel库将jsx转为js-->
<script type="text/javascript" src="js/babel.min.js"></script>
</body>
</html>

到这一步，所有JavaScript文件引入完毕，完成了项目环境的初始化，接下来边可以开始进行代码的编写了。

代码编写

注意要点

众所周知，而且前文也介绍过了react是一个JavaScript库，所以我们可以在html通过<script>标签来编写相应的JavaScript代码。

但是有一点是要注意的。

因为我们已经介绍过了，react使用的是jsx，按照我们之前的习惯，<script>标签中的type属性可写可不写，通常来说我们都会完整的写上type属性，如果我们用原生JavaScript来写的话type属性都是text/javascript。

但是在react中我们写的是jsx，那么type属性就不能省略了，因为一旦省略了，<script>标签就会默认认为该标签中的代码是JavaScript语法代码，但是实际上却是jsx语法，会使得浏览器无法识别运行。

那么要想使得浏览器能够识别并运行jsx语法的代码，那么就需要用到我们之前所说到的babel库，这个库可以将ES6转为ES5，而且还可以将jsx转为JavaScript。所以这里我们用到的<script>标签的type属性就要写成text/babel

实现页面展示

上节课我们说过react操作的是虚拟DOM，然后再将虚拟DOM映射成真实DOM，但是虚拟DOM又怎么来呢？前面也提到过，react是将得到的处理好的数据渲染成HTML，也就是说react是将处理好的数据生成虚拟DOM然后由虚拟DOM来映射成真实DOM 。

但是我们目前一个简单地样例也可以有更简单的方法，就是直接写虚拟DOM，至于数据呢，我们可以直接写死，把写死的数据来当成已经处理好的数据。

既然知道了这些，那就好办了，这个简单地样例大致就可以分为两步

创建虚拟DOM
但是如何创建虚拟DOM？

我们假定虚拟DOM是个变量然后来jsx语法定义一个变量。从而就算是完成了一个虚拟DOM的创建

至于说虚拟DOM的本质到底是什么，我们先留一个问题，后面课程里再慢慢探讨

渲染虚拟DOM到页面
有是一个相似的问题，怎么渲染？

之前使用jQuery的时候，只要我们引入了jQuery，那么全局就会多出来两样东西就是jquery关键字和$，其实呢react和jQuery的使用方式也是比较相似的。

只要引入了react核心库，那么全局就多了一个对象便是react

只要引入了react扩展库，那么全局也就多了相应的对象

既然要渲染虚拟DOM,那么肯定就得用ReactDOM对象的render方法

而render方法要接受两个参数，第一个参数就是待渲染的虚拟DOM，另一个就是前文所说的容器，不然的话react不知道该将虚拟DOM渲染到哪里。

那么问题又来了，我怎么把我的容器传进去？

react也没有帮我们封装选择器，那么没有办法了，只能原生JavaScript来选择到我们容器的节点了。

到当前状态，我们就算是把最简单的这个Hello react的样例完成了，完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hello react</title>
</head>
<body>
<!--准备好一个初始容器-->
<div id="test"></div>
<!--引入react核心库-->
<script type="text/javascript" src="js/react.development.js"></script>
<!--引入react-dom库以支持react操作DOM-->
<script type="text/javascript" src="js/react-dom.development.js"></script>
<!--引入babel库将jsx转为js-->
<script type="text/javascript" src="js/babel.min.js"></script>

<script type="text/babel">/* 此处必须写 babel */
    // 创建虚拟DOM
    const VDOM = <h1>Hello react!</h1> /* jsx语法，一定不能用引号扩起来 */
    // 渲染虚拟DOM到页面
    ReactDOM.render(
        VDOM,
        document.getElementById("test")
)
</script>
</body>
</html>

当我们用浏览器打开这个html文件后看到的效果便是如下图所示：

总结

要点

react库必须要在react-dom之前引入
引入babel库来支持jsx语法
需要有容器来供react来渲染虚拟DOM
jsx语法代码部分不能用引号把相关代码扩起来

易犯错误

没写容器
用引号把jsx语法扩起来了
<script>的type属性写错了

以上内容便是本节课程的内容。

Copyright statement：The articles of this site are all original if there is no special explanation, indicate the source please when you reprint.

Link of this article：https://work.lynchow.com/article/hello_react/