react之jsx语法规则

Posted 2021-06-30 李耀书

开始之前也没什么，先说点别的，前段事件一直在忙找工作这件事，所以对于学习新的知识这块也耽误了不少，不过还好，最终进入了一家不错的公司，公司名就不说了，技术太菜，怕你找到我，当面Diss我！！！

​ 公司用的是react，对于我这样一直用Vue的人来说，并不是十分的友好，毕竟，当面对一个新的事物的时候，我们总要花一番经历去进行了解他，所以，我就开始了！！！但......加油吧！

希望在之后的日子里，能够时常更新！

1. 定义虚拟DOM时，不要写引号

2. 标签中混入JSX表达式时，要用{}

3. 样式的类名不要用class属性，要是用clsaaName属性

   • <h1 className='title'>
       <span style='{ {color:'while'，fontSize:'50px'} }'> {content}  </span>
     </h1>
     

4. 内联样式要用style={ {key:value} }的形式去写

   • <span style='{ {color:'while'，fontSize:'50px'} }'> {content}  </span>
     

5. 只能有一个根标签。

6. 标签必须闭合

   • 利用<div></div>标签进行包裹。

7. 标签首字母

   • 如果标签首字母小写，会把该标签转为html中同名元素，如果找不到同名元素，就会报错
   • 如果标签首字母是大写，react就去渲染对应的组件，如果组件没定义，就会报错。

最后：

• 在页面最底部渲染DOM到页面

  ReactDOM.render(VDOM,doucument.getElementById('test'))
  

最后给大家个链接吧，对于刚接触react的同学来说还是十分友好的

学习猿地_01