Facebook前端框架React.js JSX语法基础

简介

JSX为面书为react.js开发的一套语法糖，也是react.js的使用基础。当然也可以选择使用原生js开发。

JSX即Javascript XML

相关资料

• React.js官网
• React JSFiddle

Hello World

HTML代码

<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script><div id="container">    <!-- container的内容将会被组件替代 --></div>

JS代码

var Hello = React.createClass({  render: function() {  <!--{this.props.name}的name对应Hello标签的name值  -->    return <div>Hello {this.props.name}</div>;  }});ReactDOM.render(  <Hello name="World" />,  document.getElementById('container'));

输出结果

注意：若在html混杂js代码，请留意以下代码

<script type="text/jsx"><!-- your code --></script>

在JSX代码中使用样式

在JSX代码中无法使用传统css改变组件样式，因为你编写的是js代码

定义class改变样式

var Hello = React.createClass({  render: function() {  <!-- 使用className代替class -->    return <div className="content">Hello {this.props.name}</div>;  }});ReactDOM.render(  <Hello name="World" />,  document.getElementById('container'));

css代码

.content{  color:red;}

结果如图

使用style改变样式
写法1：

var Hello = React.createClass({  render: function() {    return <div style={{color:'red'}}>Hello {this.props.name}</div>;  }});ReactDOM.render(  <Hello name="World" />,  document.getElementById('container'));

写法2：

var Hello = React.createClass({  render: function() {  var styleObj = {        color:'red'  }    return <div style={styleObj}>Hello {this.props.name}</div>;  }});ReactDOM.render(  <Hello name="World" />,  document.getElementById('container'));

结果如图