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在控制台上去看的,所以为了达到更好的开发条件去下载。