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')
);

结果如图