React JSX

使用JSX代替常规Javascript

使用JSX自定义属性 data-自定义属性名

ReactDOM.render(
  <p data-selfattr='somevalue'>JSX</p1>,
  document.getElementById('example')   
)

独立文件

hello.js
ReactDOM.render(
  <div>hello</div>,
  document.getElementById('example')
)
//在要使用的文件里引入
<div id="example"></div>
<script src="hello.js" type="text/babel"></script>

表达式写在{}中，JSX不能使用if else 可以用三元运算符

样式

var myStyle={
  fontSize:100,//自动加上px
  color:'#ff0000'
}
ReactDOM.render(
  <h1 style={myStyle}>hello</h1>,
  document.getElementById('example')
)

ReactDOM.render(
    <h1 style = {{fontSize:12}}>菜鸟教程</h1>,
    document.getElementById('example')
);

数组

//JSX允许在模板中插入数组，数组会自动展开
var arr=[
  <h1>hello world</h1>,
  <h1>hello JSX</h1>
];
ReactDOM.render(
 <div>{arr}</div>,
  document.getElementById('example')
)