React入门2
最简单开始学习 JSX 的方法就是使用浏览器端的 JSXTransformer。我们强烈建议你不要在生产环境中使用它。你可以通过我们的命令行工具 react-tools 包来预编译你的代码。
如果往原生 HTML 元素里传入 HTML 规范里不存在的属性，React 不会显示它们。如果需要使用自定义属性，要加 data- 前缀。
如果需要在手机或平板等触摸设备上使用 React，需要调用 React.initializeTouchEvents(true); 启用触摸事件处理。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p>遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析</p> <p>添加组件属性，有一个地方需要注意，就是 class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字</p> <div id="example1"></div> <div id="example2"></div> <div id="example3"></div> <div id="example4"></div> <div id="example5"></div> <div id="example6"></div> <script src="react.js"></script> <script src="JSXTransformer.js"></script> <script type="text/jsx"> var names = ['Alice', 'Emily', 'Kate']; React.render( <div> { names.map(function (name) { return <div>Hello, {name}!</div> }) } </div>, document.getElementById('example1') ); var myDivElement = <div className="foo" />; React.render(myDivElement, document.getElementById('example2')); var MyComponent = React.createClass({ render: function() { return ( <div className="commentBox">{this.props.name}</div> ) }, componentDidMount: function() { console.log(this.props.someProperty) } }); var myElement = <MyComponent name="John" someProperty={true} />; React.render(myElement, document.getElementById('example3')); var NotesList = React.createClass({ render: function() { return ( <ol> { this.props.children.map(function (child) { return <li>{child}</li> }) } </ol> ); } }); // 这里需要注意，只有当子节点多余1个时，this.props.children 才是一个数组，否则是不能用 map 方法的， 会报错。 React.render( <NotesList> <span>hello</span> <span>world</span> </NotesList>, document.getElementById('example4') ); var MyTitle = React.createClass({ getDefaultProps : function () { return { title : 'Hello World' }; }, // PropTypes 告诉 React，这个 title 属性是必须的，而且它的值必须是字符串 propTypes: { title: React.PropTypes.string.isRequired, }, render: function() { return <h1> {this.props.title} </h1>; } }); var data = '123'; React.render( <MyTitle title={data} />, document.getElementById('example5') ); var MyComponent = React.createClass({ handleClick: function() { React.findDOMNode(this.refs.myTextInput).focus(); }, render: function() { return ( <div> <input type="text" ref="myTextInput" /> <input type="button" value="Focus the text input" onClick={this.handleClick} /> </div> ); } }); React.render( <MyComponent />, document.getElementById('example6') ); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="example1"></div> <div id="example2"></div> <div id="example3"></div> <script src="react.js"></script> <script src="JSXTransformer.js"></script> <script type="text/jsx"> var GroceryList = React.createClass({ handleClick: function(i) { alert('You clicked: ' + this.props.items[i]); }, render: function() { return ( <div> {this.props.items.map(function(item, i) { return ( <div onClick={this.handleClick.bind(this, i)} key={i}>{item}</div> ); }, this)} </div> ); } }); React.render( <GroceryList items={['Apple', 'Banana', 'Cranberry']} />, document.getElementById('example1') ); var Box = React.createClass({ getInitialState: function() { return {windowWidth: window.innerWidth}; }, handleResize: function(e) { this.setState({windowWidth: window.innerWidth}); }, componentDidMount: function() { window.addEventListener('resize', this.handleResize); }, componentWillUnmount: function() { window.removeEventListener('resize', this.handleResize); }, render: function() { return <div>Current window width: {this.state.windowWidth}</div>; } }); React.render(<Box />, document.getElementById('example2')); function createMarkup() { return {__html: '<script>alert(2);<\/script><b>22</b>First · Second'}; }; React.render(<div dangerouslySetInnerHTML={createMarkup()} />, document.getElementById('example3')); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="example1"></div> <div id="example2"></div> <div id="example3"></div> <script src="react.js"></script> <script src="JSXTransformer.js"></script> <script type="text/jsx"> React.render(<input value="hi" />, document.getElementById('example1')); React.render(<input value={null} />, document.getElementById('example2')); var mountNode = document.getElementById('example3') var Todo = React.createClass({ render: function() { return <div onClick={this.props.onClick}>{this.props.title}</div>; }, //this component will be accessed by the parent through the `ref` attribute animate: function() { console.log('Pretend %s is animating', this.props.title); } }); var Todos = React.createClass({ getInitialState: function() { return {items: ['Apple', 'Banana', 'Cranberry']}; }, handleClick: function(index) { var items = this.state.items.filter(function(item, i) { return index !== i; }); this.setState({items: items}, function() { if (items.length === 1) { this.refs.item0.animate(); } }.bind(this)); }, render: function() { return ( <div> {this.state.items.map(function(item, i) { var boundClick = this.handleClick.bind(this, i); return ( <Todo onClick={boundClick} key={i} title={item} ref={'item' + i} /> ); }, this)} </div> ); } }); React.render(<Todos />, mountNode); </script> </body> </html>
