React学习-jsx语法
- react官网
https://reactjs.org/
- 创建一个空文件并引入React的js脚本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</html>
-
PS:第一个和第二个js不能反,必须是先有react,再有react-dom
-
jsx是js的语法糖,为了方便去写dom
-
创建一个div,让ReactDOM去渲染
<body>
<div id="app"></div>
</body>
<script type="text/babel">
let oDiv = <div>hello react!</div>;
ReactDOM.render(oDiv,document.querySelector("#app"))
</script>
- 需要让react渲染的标签要在相应的script标签带上
type="text/babel"
- 如果不带上就会报下面这个错误,用webpack配置项目的时候,会去配置babel
Uncaught SyntaxError: Unexpected token '<'
- 标签必须是嵌套的,和vue一样需要有一个root标签进行包裹,不能像下面这样
let oDiv = <div>hello react!</div><p></p>;
- react中单标签必须闭合
let oDiv = (
<div>
<div>hello react!</div>
<img src="" alt=""/>
</div>
);
- 1)一般js变量用{}渲染
- 2)style要在{}要用一个JSON对象的形式去写样式
- 3)class要用className替代
- 4)可以用三目来做判断
- 5)调用函数直接在{}中调用
- 6)事件触发的函数也写在{}中
- 7)类似img标签中src这种属性也写在{}中
<script type="text/babel">
let text = 'hello react'
let n = false
let textStyle = {color:'red'}
let imgUrl = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xMS41IC0xMC4yMzE3NCAyMyAyMC40NjM0OCI+CiAgPHRpdGxlPlJlYWN0IExvZ288L3RpdGxlPgogIDxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIyLjA1IiBmaWxsPSIjNjFkYWZiIi8+CiAgPGcgc3Ryb2tlPSIjNjFkYWZiIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIi8+CiAgICA8ZWxsaXBzZSByeD0iMTEiIHJ5PSI0LjIiIHRyYW5zZm9ybT0icm90YXRlKDYwKSIvPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIiB0cmFuc2Zvcm09InJvdGF0ZSgxMjApIi8+CiAgPC9nPgo8L3N2Zz4K'
function add(m,n){
return m+n
}
function click(){
alert('666')
}
let oDiv = (
<div>
<span>{text}</span>
<div style={textStyle}>666</div>
<div className="test">999</div>
<div>{n?'是true':'是false'}</div>
<div>{add(3,4)}</div>
<button onClick={click}>点我</button>
<img src={imgUrl}/>
</div>
);
ReactDOM.render(oDiv,document.querySelector("#app"))
</script>
<style>
.test{
color:blue
}
</style>