【react学习】使用jsx

React JSX 优势：

• 执行更快
• 类型安全，可以在编译过程中发现错误
• 写法更加简单

 

JSX 语法：

      样例：var myJSXElement=<div>hello word!</div> 

      这样一个直接把标签元素直接给一个变量的 就是jsx语法

• 自定义属性 

          需要用data-前缀。  

 <p data-myattribute=“hhh”>hello!</p> 

• Js表达式

          需要用{}包裹          

          

<p>{1+1}</p>

• 三目运算

          不可以用if else 可以用三目      

         

 <p>{ i==1?’是’:’否'}</p>

• css样式

          推荐使用内联样式，                  

         

 var myStype={fontSize:100,color:’red’}   <p stype={myStype}>hello</p>

 

         也可以使用行内样式                

<p stype={{fontSize:100,color:’red'}}>hello</p>

• 注释

          在标签内的注释 要写在{}内       

  <div>{/*这是注释*/}</div>

• 数组

         可以将标签写在一个数组里，渲染的时候会自动展开所有成员     

var arr=[
         <h1>标题一</h1>
         <h2>标题二</h3>
        ]
ReactDOM.render(
  <div>{arr}</div>,
  Document.getElementById(‘example’)
)