引言
- 在学习了前面几章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>
小结:
- 多敲、多记、多查(面向谷歌编程)
- 原创不易,希望可以帮助到可爱的你,喜欢的话请对我素质三连吧,☛点赞、✌关注、转发✍
总有人和你说要乖要懂事 却没有人跟你说你要高兴啊 ---------------- 《世本常态》隔壁老樊