React学习笔记一——JSX语法规则 迈不过友情╰ 2022-10-09 00:34 178阅读 0赞 > 之前看过两遍关于react基础的视频,每次看完感觉非常懂,但是过一段就会忘记,所以这次再学习自己会做一些笔记记录下来,方便日后的学习,如果对你有帮助,再好不过; **通过以下代码来总结一下JSX的语法规则** * 定义虚拟DOM,不要写引号 * 标签中混入JS要使用花括号\{\} * 样式的类名指定不要用class,要用className * 内联样式,要用style=\{ \{key:value\}\}的形式去写 * 虚拟DOM必须只有一个根标签 * 标签必须闭合 * 标签首字母如果为小写字母,则将标签改为html中同名标签,若没有该标签,则报错; * 标签首字母如果为如果为大写字母,react就会渲染对应的组件,若没有定义会报错; <head> <div id="test"></div> <style> .title{ ...} </style> </head> //省略...引入一些react核心库和babel <script type="text/javascript" src="..."></script> <script type="text/babel"> const myData = "我来啦!" //1.创建一个虚拟DOM const VDOM= ( //定义虚拟DOM,不要写引号 <div> //虚拟DOM必须只有一个根标签 <h2 className={ title} id="yyds"> //样式的类名指定不要用class,要用className <span style={ { color:'red'}}>hello,react</span> //内联样式,要用style={ {key:value}}的形式去写 <span>{ myData}</span> //标签中混入JS要使用花括号{} </h2> { /*<student></student>*/} //标签首字母为小写字母,则将标签改为html中同名标签,若如无该标签,则报错; <Student></Student>//标签首字母为大写字母,react就会渲染对应的组件,如果没有定义会报错;如果定义了组件,就会渲染; </div> ) //2.渲染虚拟DOM到页面 ReactDOM.render(VDOM,document.getElementById('test')) </ script>
还没有评论,来说两句吧...