1.react示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- react的核心库-->
<script src="lib/react.development.js"></script>
<!-- 负责对你应用层实现解析渲染，依赖你的react.development.js -->
<script src="./lib/react-dom.development.js"></script>
</head>
<body>
<div id="myApp">
</div>
</body>
<script>
//第一个参数是你要呈现的内容，第二个参数是指定呈现的位置
ReactDOM.render("你好世界",document.querySelector("#myApp"))
</script>
</html>
2.JSX语法
ReactDOM.render("<h2>你好世界</h2>",document.querySelector("#myApp"));
元素变量：
const dom = <h5>我是一个元素变量</h5> //值为元素的变量称为元素变量
ReactDOM.render(dom,document.querySelector("#myApp"))
引入外部js
<!-- 引入时需要加上type -->
<script type="text/babel" src="./lib/react-jsx.js"></script>
<script type="text/babel">
//第一个参数是你要呈现的内容，第二个参数是指定呈现的位置
ReactDOM.render(dom,document.querySelector("#myApp"))
</script>
3.className
<style>
.one{
color:yellow;
}
.two{
color:red;
}
</style>
<script type="text/babel">
let a = "one";
let b = "two";
ReactDOM.render((
<div className={b}>
我确定你就是那只匹着羊皮的狼
</div>
),document.querySelector("#myApp"))
// ReactDOM.render((
// <div className="one">
// 我确定你就是那只匹着羊皮的狼
// </div>
// ),document.querySelector("#myApp"))
</script>
指定属性值时（属性值是一个变量，不要在{}外加上双引号）
let a = "one"
let b = "two";
ReactDOM.render((
<div className={b}>
我确定你就是那只匹着羊皮的狼
</div>
),document.querySelector("#myApp"))
4. style.html
<script type="text/babel">
let obj = {
background:"yellow",
color:"red"
}
ReactDOM.render((
<div>
<p style={{color:"blue"}}>你很好，我知道</p>
<p style={{color:"red"}}>你来或不来，我都在这里，你走或不走，我也不等你</p>
<p style={obj}>你来或不来，我都在这里，你走或不走，我也不等你</p>
</div>
),document.querySelector("#myApp"))
</script>
</script>
5.列表渲染
<script type="text/babel">
// jsx 会将你的数组直接展开
let a = [1,2,3,4,5,6]
ReactDOM.render(<div>{a}</div>,document.querySelector("#myApp"))
</script>
6.//只能用一个根元素。
// 遇到小写的标签会被视为普通标签，如果遇到首字母大写的标签会被视为组件。如果遇到{}，会被认为要输出，或要解析表达式。
ReactDOM.render(<Div>adsfasdf</Div>,document.querySelector("#myApp"))
// no
// let arr = [1,2,3,4];
// ReactDOM.render({arr},document.querySelector("#myApp"))
// yes:
// let arr = [1,2,3,4];
// ReactDOM.render(arr,document.querySelector("#myApp"))
// yes:
ReactDOM.render("123123123",document.querySelector("#myApp"))
//yes:
ReactDOM.render(<div>asdfasdf</div>,document.querySelector("#myApp"))
//no:
// ReactDOM.render(
<h1>你好，世界</h1><div>asdfasdf</div>， document.querySelector("#myApp")）