React tutorial1-2

JSXのtemplate stringsで関数や変数を直接使う

by catfood

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/redux/3.4.0/redux.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.2/react-redux.js"></script>
<div id="content"></div>
<script type="text/babel">
console.log(redux);

var CommentBox = React.createClass({
  render: function() {
  	var foo = "bar"
    function foo2(str){
    	return str+"[foo2]"
    }
    return (
      <div className="commentBox">
        Hello, world! I am a {foo},you are {foo2("bar2")}.
      </div>
    );
  }
});
ReactDOM.render(
  <CommentBox />,
  document.getElementById('content')
);
</script>