<!-- 引入核心组件库 -->
<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 VADOM = <h1>Hello React</h1> /* 此处不要写引号，因为不是字符串*/
// 2 渲染虚拟dom到页面
//ReactDOM.render() 用于将模版转换成HTML语言,渲染DOM,并插入指定的DOM节点中 该方法有3个参数 :
// 模版的渲染内容(HTML形式) 需要插入的DOM节点 渲染后的回调(一般用不到)
ReactDOM.render(VADOM,document.getElementById('test'));
</script>
创建虚拟dom两种方法 jsx和js
2-使用jsx创建虚拟DOM 3-使用js创建虚拟DOM<script type="text/javascript">
window.onload=function(){
// 1.创建虚拟DOM
// React.createElement(标签名，属性[对象]，内容)
// const VDOM =(
// <h1 id='title'>
// <span> Hello React</span>
// </h1>
// )
const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello React'))
// 2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'));
}
</script>
虚拟dom和真实dom
2-使用jsx创建虚拟DOM// debugger;
// console.log(typeof VDOM);//object
// console.log(VDOM instanceof Object);//true
/**
* 关于虚拟DOM
* 1 本质是Object类型的对象( 一般对象)
* 2.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上。
*
* */
</script>
什么是JSX？
要想写jsx的语法，那么就得先了解jsx是什么，有什么用？借用百度的话：
JSX是一种JavaScript的语法扩展，运用于React架构中，其格式比较像是模版语言，但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位，JSX就是用来声明React当中的元素，React使用JSX来描述用户界面。
那么本质就出来了，JSX说白了就是js语法的一个扩展，是一个看起来很像 XML 的 JavaScript 语法扩展！我们也许不一定使用JSX，但是需要知道JSX有什么优点！
JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化 它是类型安全的，在编译过程中就能发现错误 使用 JSX 编写模板更加简单快速
reactjs基础：jsx小练习
jsx小练习<!-- 引入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" >
/*
一定注意区分：【js语句(代码)】与【js表达式】
1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
下面这些都是表达式：
(1). a
(2). a+b
(3). demo(1)
(4). arr.map()
(5). function test () {}
2.语句(代码)：
下面这些都是语句(代码)：
(1).if(){}
(2).for(){}
(3).switch(){case:xxxx}
*/
//模拟一些数据
const data = ['Angular','React','Vue']
//1.创建虚拟DOM
const VDOM = (
<div>
<h1>前端js框架列表</h1>
<ul>
{
data.map((item,index)=>{
return <li key={index}>{item}</li>
})
}
</ul>
</div>
)
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
函数式组件？
03-jsx小练习类组件
原生 html元素名称以小写字母开头，符合驼峰命名法规范，比如hello、myComponent。 自定义的 React 类名以大写字母开头，比如 HelloWorld不能写成 helloWorld。 React组件类只能包含一个顶层标签。 React类式组件使用的必要条件
组件类必须继承React.Component类 必须要有render方法； render方法的return返回的就是组件的内容 类式组件，执行ReactDOM.render函数的原理：
首先找到组件对应的类，并new了这个类的一个实例 通过实例找到原型上的render函数并执行 ReactDOM.render接收到原型上render函数retrun返回的虚拟dom 将虚拟dom转换成真实dom，并插入到页面中
03-jsx小练习
