根据博主 http://www.ruanyifeng.com/blog/2015/03/react.html 的几个Demo(https://github.com/ruanyf/react-demos),持续学习一下React,一款负责UI框架的语言(使用虚拟的DOM,并且将它们储存起来,每当状态发生变化的时候就会创造新的虚拟节点和以前的进行对比,让变化的部分进行渲染。整个过程没有了获取、操作dom节点的步骤,只有一个渲染的过程,所以react就是一个ui框架。)。
首先get了几个sublime的快捷键,非常好用!command+D:选中更多的相同元素;command+control+G:选中所有相同项;command+control+上或下:将整行上移或者下移;control+shift+W:将选中的加上标签。这个几个还需持续练习!另外command+回车是换到下一行(光标在本行中)。
React需要引用的几个JS文件
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
script标签:
<script type="text/babel"></script> //为什么写text/bable呢,这样可以使用JSX
- ReactDOM.render()方法 html语言可以直接写在里面;
1 var arr = [ 2 <h1>Hello world!</h1>, 3 <h2>React is awesome</h2>, 4 ]; 5 ReactDOM.render( 6 <div>{arr}</div>, 7 document.getElementById('example') 8 );
document.getElementById('example') 之后无分号!数组使用[]扩住。
2.React.createClass 方法就用于生成一个组件类
所有组件类都必须有自己的 render
方法,用于输出组件。
render: function() {}, propTypes: {}, /*参数校验*/ XXXX: function(){}, getInitialState: function() {}/*初始态,然后用户互动,导致状态变化,从而触发重新渲染 UI*/
举一个例子
<script type="text/babel"> var Input = React.createClass({ getInitialState: function() { return {value: 'Hello!'}; }, handleChange: function(event) { this.setState({value: event.target.value}); }, render: function () { var value = this.state.value; return ( <div> <input type="text" value={value} onChange={this.handleChange} /> <p>{value}</p> </div> ); } }); ReactDOM.render(<Input/>, document.getElementById('example')); </script>