React的依赖包：
1.babel.min.js：解析JSX语法代码转为JS代码的库
在进行import操作时游览器是无法直接解析的，还是需要借助babel从ES6转ES5。
React写的不是js而是jsx,jsx是在js的基础上提出了一些要求和语法，我们写的是jsx游览器只认js，那么同样需要需要借助babel从jsx转js。
2.react.development.js：React核心库
3.react-dom.development.js：提供操作DOM的react扩展库
4.prop-types.js：
笔记中：依赖有旧版本（16.8.4）和新版本（17.0.1），以旧版进行学习，到与新版有差异的地方再引入新版本学习，因为工作中不可能所有人都用新版本。
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 */
//1.创建虚拟DOM
const VDOM = <h1>Hello,React</h1> /* 此处一定不要写引号，因为不是字符串 */
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>
效果：
重点：
1.此处一定要写babel
<script type="text/babel" ></script>
2.依赖的引入是由顺序的，必须先引入react核心库
<!-- 引入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>
3.创建虚拟DOM时，不要带引号，因为它不是字符串
4.打开控制台，发现此处有个警告
意思是：游览器正在使用babel翻译器，请确定你的脚本没有运行在生产环境下
为什么会有这个警告？
原因：游览器拿到中的代码的时候，发现type不是js，得靠babel来进行翻译，代码少还看不出来，要是代码多翻译的时候很耗时，那么游览器页面就会出现白屏的情况，所以这种方式肯定不在真实开发里面用。
现在只是在学习语法，会语法了再换一个平台去写不久好了。
警告上面的这段话告诉你，没有下载react的开发者工具，因为不可能所有的调试让你F12在控制台上去看的，所以为了达到更好的开发条件去下载。
391
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
