React学习笔记一——JSX语法规则

迈不过友情╰ 2022-10-09 00:34 239阅读 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>