<div id="root"></div>
<script src="./react.js"></script>
<script src="./react-dom.js"></script>
<!-- 将JSX语法转换为JS语法 -->
<script src="./babel.min.js"></script>
<script type="text/babel"> //只有写了type="text/babel"babel才会去编译，否则引入了babel也没有用 写了这个才会针对babel类型去编译
//javaScript XML:JSX,即在JS中得XML XML就是<>
ReactDOM.render(<h1>hello,React</h1>,
document.getElementById('root'));
// ReactDOM是react-dom里所导出来得对象，render函数将节点渲染到指定得视图上去，第一个是视图（<h1>hello,react</h1>），第二个就是要渲染得点,documenrt.getElementById('root') 原生得dom元素对象,h1标签在html里没问题，但你见过它写在js里没有？写在js里都要用引号，没有引号要不是变量，变量是没有<号得
</script>
<div id="root"></div>
<!-- React核心库 -->
<script src="./react.js"></script>
<!-- React和DOM相关得库 -->
<script src="./react-dom.js"></script>
<!-- babel工具包，用于转换JSX语法-->
<script src="./babel.min.js"></script>
<!-- 要给JSX所在得script设置类型为type="text/babel",babel才会去编译-->
<script type="text/babel">
var title="Hello,world"
//有时候标签比较多，要有（）才能换行，不换行也能（）
//在JSC中取变量/表达式{}取，jsx中所有变量或函数都是通过{}取
reactDOM.render((<h1>
{title+'12345'}
</h1>),document.getElementById('root'))
</script>
<div id="root"></div>
<!-- react 和reactDOM是有依赖关系的，react要放在前面-->
<script src="./react.js"></script>
<script src="./react-dom.js"></script>
<script src="./babel.min.js"></script>
<script type="text/babel">
const myId="div"
// class在js里是关键字，在html是可以直接当属性,在js中不可以，jsx本质上还是js,babel生成js对象，然后有react渲染到节点，写成class会以为生成一个类，所以在JSX中如果给元素设置属性，多个单词要以驼峰命名，class写成className
//元素取变量用{}，属性取变量也用{},比如id
//标签一定要闭合
//jsx中的注释{/*jsx注释*/}
ReactDOM.render((<h1 className="box" id={myId}>
{/*jsx注释*/}
hello.,world</h1>),
document.getElementById('root'))
</script>
<body>
input:<input id="input" />
<div>
input2:<input id="input2" />
</div>
<div id="box"></div>
<div id="root"></div>
<script src="./react.js"></script>
<script src="./react-dom.js"></script>
<script src="./babel.min.js"></script>
<script type="text/babel">
var content='<h1>Hello,React</h1>'//没有引号是对象，现在是字符串
document.getElementById('input').onkeyup=function (ev) { //input失去光标的时候
content = ev.target.value //用户输入标签就不会被执行，会是字符串，不会被解析，防止恶意输代码
//当前在jsx中{}取值时，如果所取得表达式得值是脚本字符串，则jsx不会进行解析，只以字符串得形式展示
const el=<div>{content}</div>//这是一个对象，content是字符串时不会解析成标签
ReactDOM.render(el,
document.getElementById('root'))
}
//jsDOM操作
var input2 = document.getElementById('input2')
input2.onkeyup=function(e){
var con = e.target.value
const el = document.createElement('h1')
el.innerHTML=con
document.getElementById('box').appendChild(el)
}
</script>
