本文内容为博文http://www.ruanyifeng.com/blog/2015/03/react.html 的部分节选与总结
为了使以下代码示例生效,需要导入三个包。
<head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head>其中react.js为react的核心库。react-dom.js提供与DOM相关的功能。而browser.min.js则用于将以下Demo的jsx语法转化为js。
JSX语法
JSX语法允许html和js混在一起写
var HelloMessage = React.createClass({//注意,组件类的第一个字母一定要大写 render: function() { return <h1>Hello {this.props.name}</h1>;//组件属性使用组件类的this.props取出。 } }); ReactDOM.render( <HelloMessage name="world" />,document.getElementById('example') );
代码效果:
在JSX语法中,若插入的js变量是一个数组,则会展开该数组的所有成员
var arr = [ <h1>Hello world!</h1>,<h2>React is awesome</h2>,]; ReactDOM.render( <div>{arr}</div>,document.getElementById('example') );
运行结果