1. 三个文件的引入:
babel.min.js(可以将es6==es5,JSX==>JS)
react-dom.developments.js(对DOM进行操作)
react.development.js(react 核心代码)
注意,引入文件的时候要注重引入顺序,react-development 需要在react-dom development之前。
原因:react-dom 是基于核心代码的。
2. 写个,Hello react页面
<div id="test"></div>
<script type="text/babel">
//1创建虚拟DOM
const VDOM=<h1>hello,react</h1>
//2渲染虚拟DOM到页面
ReactDOM.render(虚拟DOM,容器)
</script>
原来type="text/JavaScript",是来写js代码的,但react用的是jsx代码,所以必须改掉JavaScript,将type="text/babel" 为了可以将jsx 转换成 js代码(浏览器不认JSX代码,JSX代码需转换成JS代码)。
虚拟DOM 在写的时候,不能加'',因为我们并未使用JS,而用的JSX
ReactDOM.render()函数有两个参数,(虚拟DOM,渲染容器)
渲染容器,需要取出容器的节点,但react并未提供选择器,以下这种方法来获取节点是不对的
ReactDOM.render(VDOM,'#test')
需要通过原生JS的方式来获取节点
ReactDOM.render(VDOM,document.getElementById('test'))
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width= , initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--容器-->
<div id="test"></div>
<!--引入react核心库-->
<script src="./js/react.development.js"></script>
<!--引入react-dom,用于支持react操作DOM-->
<script src="./js//react-dom.development.js"></script>
<!--引入babel 用于JSX转为JS-->
<script src="./js/babel.min.js"></script>
<script type="text/babel"> /* 此处需要写babel type="text/javascriptt" 因为之前是js代码,但现在写的不是js而是jsx*/
//1创建虚拟DOM
const VDOM=<h1>hello,react</h1>
//2渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>
结果:
3. 为什么使用JSX而不用JS
1. 两种创建虚拟DOM的方式
1.使用JSX创建
上述创建即使JSX创建虚拟DOM
2.使用JS创建虚拟DOM
<body>
<!--容器-->
<div id="test"></div>
<!--引入react核心库-->
<script src="./js/react.development.js"></script>
<!--引入react-dom,用于支持react操作DOM-->
<script src="./js//react-dom.development.js"></script>
<script type="text/javascript">
//1创建虚拟DOM 创建节点
const VDOM=React.createElement(标签名,标签属性,标签内容)
//2渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>
JS 创建虚拟DOM 需要层层写React.createElement,很不方便