引言
- 在学习了前面几章React基础知识点，想必大家对react有了一个初步的了解
- 接下来『React-Demos』系列，帮助大家更好的学习react，对react相关知识点更进一步加深和理解
- 希望每一个Demo你都可以多敲几遍，直到自己单独流畅的敲出来，那你就可以出山，学习接下来的实战部分了
github地址☟
https://github.com/luckyMuChen/React-demos.git
源码讲解
- 『React-Demos』系列所有的源码全部存放在github，直接git clone 到本地即可
https://github.com/luckyMuChen/React-demos.git - 『React-Demos』目录下build文件是用来解析reat语法代码，让浏览器识别，每一个demo中直接
<script>标签中引用即可- react.development.js 是React核心库
- react-dom.development.js 是操作DOM的React库
- babel.min.js ES6转ES5 JSX转JS
HTML模板
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>React-demo</title>
<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>
</head>
<body>
<div id="demo"></div>
<script type="text/babel">
// ** Our code goes here! **
</script>
</body>
</html>
注意：
<!-- 先引入react，再引入react-dom，它们的顺序不可以调换 -->
<!-- react-dom是依赖于react运行的，所以react-dom必须放在react的下面，放在上面会报错，提示找不到react -->
<script type="text/javascript" src="../build/react.development.js"></script>
<script type="text/javascript" src="../build/react-dom.development.js"></script>
<!-- 引入babel将jsx语法转换成浏览器识别的语法 -->
<script type="text/javascript" src="../build/babel.min.js"></script>
小结：
- 多敲、多记、多查（面向谷歌编程）
- 原创不易，希望可以帮助到可爱的你，喜欢的话请对我素质三连吧，☛点赞、✌关注、转发✍
总有人和你说要乖要懂事 却没有人跟你说你要高兴啊 ---------------- 《世本常态》隔壁老樊
