知识点
1: jsx语法规则
-
定义虚拟dom时，不要写引号。
-
标签中混入
js表达式时，需要加上{}
注意：js表达式和js语句
1：表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方。例如：
(1)：a
(2)：a+b
(3)：arr.map()
(4)：demo()
(5)：function test(){}2：语句：控制代码走向
(1)：for(){}
(2): if(){}
(3):switch(){} -
样式的类名指定要用className,不要用class,因为在es6中class是声明类的关键字。
-
内联样式，要用style={{key:value}}的形式去写。如果是两个单词的，需要写成小驼峰的形式：如fontSize
-
虚拟dom,只有一个根标签。
-
标签必须闭合。
-
标签首字母
a.如果首字母是小写，则转化为对应的html同名标签，如果html中无对应的同名标签则报错。
b.如果首字母是大写，react就会渲染对应的组件，若组件没有定义，则报错。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>react</title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script type="text/babel">
const myId="Niuniu";
const myText ="hellO";
const vDOM =(
<div>
<h1 id={myId.toLocaleLowerCase()}>
<span style={{color:'red'}}>{myText.toLocaleLowerCase()}</span>
</h1>
<input type="text"/>
</div>
);
ReactDOM.render(vDOM,document.getElementById('test'));
</script>
</body>
</html>
网友评论