React入门理解demo
1.React文档结构
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>React-demo1</title> 6 <!-- 核心库 --> 7 <script src="build/react.js"></script> 8 <!-- 提供与dom相关功能 --> 9 <script src="build/react-dom.js"></script> 10 <!-- 将jsx转化为js --> 11 <script src="build/browser.min.js"></script> 12 </head> 13 <body> 14 <div id="example"></div> 15 <!-- script的type="text/babel"必不可少，js与jsx不兼容 --> 16 <script type="text/babel"> 17 //文档内容转自：http://www.ruanyifeng.com/blog/2015/03/react.html 18 //**our code goes here** 19 //ReactDOM.render是React最基本的语法,用于将模板转为html语言,并插入制定的DOM节点 20 ReactDOM.render( 21 <h1>Hello,world!</h1>, 22 document.getElementById("example") 23 ) 24 </script> 25 </body> 26 </html>
2.ReactDOM.render（）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>react-demo2</title> 6 <script src="build/react.js"></script> 7 <script src="build/react-dom.js"></script> 8 <script src="build/browser.min.js"></script> 9 </head> 10 <body> 11 <div id="example"></div> 12 <script type="text/babel"> 13 //map()方法一次对数组元素进行处理,map方法不会对空数组进行检测,map方法不会改变原数组 14 var names = ['Alice','Lily','Kate']; 15 ReactDOM.render( 16 <div> 17 {names.map(function(name){ 18 return <div>hello,{name}!</div> 19 })} 20 </div>, 21 document.getElementById('example') 22 ) 23 </script> 24 </body> 25 </html>
3.JSX 语法
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>react-demo3</title> 6 <script src="build/react.js"></script> 7 <script src="build/react-dom.js"></script> 8 <script src="build/browser.min.js"></script> 9 </head> 10 <body> 11 <div id="example"></div> 12 <script type="text/babel"> 13 var arr = [ 14 <h1>Hello,world!</h1>, 15 <h2>React is awesome!</h2> 16 ]; 17 ReactDOM.render( 18 <div>{arr}</div>, 19 document.getElementById('example') 20 ) 21 </script> 22 </body> 23 </html>
4.组件
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>React-demo4</title> 6 <script src="build/react.js"></script> 7 <script src="build/react-dom.js"></script> 8 <script src="build/browser.min.js"></script> 9 </head> 10 <body> 11 <div id="example"></div> 12 <script type="text/babel"> 13 //React允许将代码封装成组件,React.createClass()方法用于生成一个组件类 14 //注意,组件类的第一个字母必须大写,如HelloMessage 15 //组件的属性可以在组件类的this.props对象上读取,如组件的name属性读取：this.props.name 16 //属性注意：class属性要写成className,for属性要写成htmlFor,因为class和for都是js的保留字 17 //this.props对象的属性与组件的属性一一对应，例外的是this.props.children属性,它表示组件的所有子节点 18 //另外，组件内只能包含一个顶层标签 19 var HelloMessage = React.createClass({ 20 render : function(){ 21 return <h1>hello,{this.props.name}</h1> 22 } 23 }); 24 ReactDOM.render( 25 <HelloMessage name="John" />, 26 document.getElementById('example') 27 ) 28 </script> 29 </body> 30 </html>
5.this.props.children
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>react-demo5</title> 6 <script src="build/react.js"></script> 7 <script src="build/react-dom.js"></script> 8 <script src="build/browser.min.js"></script> 9 </head> 10 <body> 11 <div id="example"></div> 12 <script type="text/babel"> 13 //this.props.children的值可能有三种，如果当前组件没有子节点，就是undefined;如果当前组件有一个子节点，就是object;如果当前组件有多个子节点，就是Array. 14 //React提供了React.Children这个工具方法来处理this.props.Children，我们可以用React.Children.Map()来遍历子节点，而不用担心this.props.children的类型 15 var NotesList = React.createClass({ 16 render : function(){ 17 return <ol> 18 { 19 React.Children.map(this.props.children,function(child){ 20 return <li>{child}</li> 21 }) 22 } 23 </ol> 24 } 25 }); 26 ReactDOM.render( 27 <NotesList> 28 <span>Hello</span> 29 <span>World</span> 30 </NotesList>, 31 document.getElementById('example') 32 ) 33 </script> 34 </body> 35 </html>
6.PropTypes
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>react-demo6</title> 6 <script src="build/react.js"></script> 7 <script src="build/react-dom.js"></script> 8 <script src="build/browser.min.js"></script> 9 </head> 10 <body> 11 <div id="example"></div> 12 <script type="text/babel"> 13 //组件的属性，可以接受任意值，组件类的PropTypes属性可以验证实例的属性是否符合要求 14 //MyTitle组件有一个title属性，PropTypes告诉React这个title是必须的，并且要是string类型的 15 //当我们设置title的属性值为数值时，这一条验证就通不过，控制台就会报错 16 var MyTitle = React.createClass({ 17 propTypes:{ 18 title:React.PropTypes.string.isRequired 19 }, 20 render:function(){ 21 return <h1>{this.props.title}</h1> 22 } 23 }), 24 //data = 123; 25 data = 'hello world'; 26 ReactDOM.render( 27 <MyTitle title={data}/>, 28 document.getElementById("example") 29 ) 30 </script> 31 </body> 32 </html>
7.getDefaultProps用来设置组件的默认属性
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>react-demo7</title> 6 <script src="build/react.js"></script> 7 <script src="build/react-dom.js"></script> 8 <script src="build/browser.min.js"></script> 9 </head> 10 <body> 11 <div id="example"></div> 12 <script type="text/babel"> 13 //getDefaultProps用来设置组件的默认属性 14 var MyTitle = React.createClass({ 15 getDefaultProps:function(){ 16 return { 17 title:'hello world!' 18 }; 19 }, 20 render:function(){ 21 return <h1>{this.props.title}</h1>; 22 } 23 }); 24 ReactDOM.render( 25 <MyTitle />, 26 document.getElementById('example') 27 ) 28 </script> 29 </body> 30 </html>
8.获取真实的dom节点
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>react-demo8</title> 6 <script src="build/react.js"></script> 7 <script src="build/react-dom.js"></script> 8 <script src="build/browser.min.js"></script> 9 </head> 10 <body> 11 <div id="example"></div> 12 <script type="text/babel"> 13 //获取真实的dom节点 14 //组件中的DOM并不是真实的dom,称为虚拟dom(virture dom),只有当它插入到文档中以后,才变成真实的dom 15 //MyComponent组件中有一个文本输入框，用于获取用户的输入，这时就必须获取真实的dom节点，虚拟dom是拿不到用户输入的。为了做到这一点，文本输入框必须有一个[ref]属性，然后this.refs.[refName]就会返回这个真实的节点 16 //注意：因为this.refs.[refName]获取到的是真实的dom节点，所以必须等到虚拟节点插入到文档中以后，才能使用这个属性，否则就会报错。 17 //上面代码中，通过为组件指定Click事件的回调函数，确保了只有等到真实dom发生click事件以后，才会读取this.refs.[refName]属性 18 //React除了支持click事件之外，也支持keyDown、copy、scroll等事件 19 20 var MyComponent = React.createClass({ 21 handleClick:function(){ 22 this.refs.myTextInput.focus(); 23 }, 24 render:function(){ 25 return ( 26 <div> 27 <input type="text" ref="myTextInput" /> 28 <input type="button" value="Focus the Text input" onClick={this.handleClick} /> 29 </div> 30 ); 31 } 32 }); 33 ReactDOM.render( 34 <MyComponent />, 35 document.getElementById("example") 36 ) 37 </script> 38 </body> 39 </html>
9.this.state
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>react-demo9</title> 6 <script src="build/react.js"></script> 7 <script src="build/react-dom.js"></script> 8 <script src="build/browser.min.js"></script> 9 </head> 10 <body> 11 <div id="example"></div> 12 <script type="text/babel"> 13 //组件免不了要与用户互动。React的一大创新，就是将组件看成一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化,从而触发重新渲染UI。 14 //在组件LikeButton中，getInitialState方法用于定义初始状态，也就是一个对象，这个对象可以通过this.state读取。 15 //当用户点击组件，导致状态变化，this.setState方法就修改状态值，每次修改之后，就会自动调用this.render方法，再次渲染组件 16 //this.props与this.state都用于描述组价的特性，可能会产生混淆。一个简单的区分方法：this.props表示那些一旦定义，就不再改变的特性;而this.state是会随着用户互动而产生变化的特性 17 var LikeButton = React.createClass({ 18 getInitialState:function(){ 19 return {liked:false}; 20 }, 21 handleClick:function(event){ 22 this.setState({liked:!this.state.liked}); 23 }, 24 render:function(){ 25 var text = this.state.liked?'like':'haven\'t liked'; 26 return (<p onClick={this.handleClick}>You {text} this.click to toggle</p>) 27 } 28 }); 29 ReactDOM.render( 30 <LikeButton />, 31 document.getElementById("example") 32 ) 33 </script> 34 </body> 35 </html>
10.表单
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>react-demo9</title> 6 <script src="build/react.js"></script> 7 <script src="build/react-dom.js"></script> 8 <script src="build/browser.min.js"></script> 9 </head> 10 <body> 11 <div id="example"></div> 12 <script type="text/babel"> 13 //组件免不了要与用户互动。React的一大创新，就是将组件看成一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化,从而触发重新渲染UI。 14 //在组件LikeButton中，getInitialState方法用于定义初始状态，也就是一个对象，这个对象可以通过this.state读取。 15 //当用户点击组件，导致状态变化，this.setState方法就修改状态值，每次修改之后，就会自动调用this.render方法，再次渲染组件 16 //this.props与this.state都用于描述组价的特性，可能会产生混淆。一个简单的区分方法：this.props表示那些一旦定义，就不再改变的特性;而this.state是会随着用户互动而产生变化的特性 17 var LikeButton = React.createClass({ 18 getInitialState:function(){ 19 return {liked:false}; 20 }, 21 handleClick:function(event){ 22 this.setState({liked:!this.state.liked}); 23 }, 24 render:function(){ 25 var text = this.state.liked?'like':'haven\'t liked'; 26 return (<p onClick={this.handleClick}>You {text} this.click to toggle</p>) 27 } 28 }); 29 ReactDOM.render( 30 <LikeButton />, 31 document.getElementById("example") 32 ) 33 </script> 34 </body> 35 </html>
11.生命周期-componentDidMount方法
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>react-demo11</title> 6 <script src="build/react.js"></script> 7 <script src="build/react-dom.js"></script> 8 <script src="build/browser.min.js"></script> 9 </head> 10 <body> 11 <div id="example"></div> 12 <script type="text/babel"> 13 //代码在Hello组件加载以后，通过componentDidMount方法设置一个定时器，每个100ms,就重新设置组件的透明度，从而引发重新渲染 14 //另外，组件的style属性不能写成style="opacity:{this.state.opacity};",而要写成style = {{opacity:this.state.opacity}} 15 var Hello = React.createClass({ 16 getInitialState:function(){ 17 return {opacity:1.0}; 18 }, 19 componentDidMount:function(){ 20 this.timer = setInterval(function(){ 21 var opacity = this.state.opacity; 22 opacity -= .05; 23 if(opacity<0.1){ 24 opacity = 1.0; 25 } 26 this.setState({ 27 opacity:opacity 28 }); 29 }.bind(this),100); 30 }, 31 render:function(){ 32 return ( 33 <div style={{opacity:this.state.opacity}}>Hello{this.props.name}</div> 34 ) 35 } 36 }); 37 ReactDOM.render( 38 <Hello name="world"/>, 39 document.getElementById("example") 40 ) 41 </script> 42 </body> 43 </html>
12.Ajax请求
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>react-demo12</title> 6 <script src="build/react.js"></script> 7 <script src="build/react-dom.js"></script> 8 <script src="build/browser.min.js"></script> 9 <script src="build/jquery.min.js"></script> 10 </head> 11 <body> 12 <div id="example"></div> 13 <script type="text/babel"> 14 //组件的数据来源，通常就是通过Ajax请求从服务器获取，可以使用componentDidMount方法设置Ajax请求，等到请求成功，再用this.setState方法重新渲染UI 15 //上面代码使用jQuery完成Ajax请求，这是为了便于说明。React本身没有任何依赖，完全可以不用jQuery,而使用其他库 16 //我们甚至可以把一个Promise对象传入组件 17 /* 18 ReactDOM.render( 19 <RepoList promise={$getJson('https://api.github.com/search/repositories?q=javascript&sort=stars')}/>, 20 document.getElementById("example") 21 ) 22 */ 23 //上面代码从Github的API抓取数据，然后将Promise作为属性，传给RepoList组件 24 var UserGist = React.createClass({ 25 getInitialState:function(){ 26 return { 27 username:'', 28 lastGistUrl:'' 29 }; 30 }, 31 componentDidMount:function(){ 32 $.get(this.props.source,function(result){ 33 var lastGist = result[0]; 34 if(this.isMounted()){ 35 this.setState({ 36 username:lastGist.owner.login, 37 lastGistUrl:lastGist.html_url 38 }); 39 } 40 }.bind(this)); 41 }, 42 render:function(){ 43 return ( 44 <div> 45 {this.state.username}'s last gist is 46 <a href={this.state.lastGistUrl}>here</a> 47 </div> 48 ) 49 } 50 }); 51 ReactDOM.render( 52 <UserGist source="https://api.github.com/users/octocat/gists" />, 53 document.getElementById("example") 54 ) 55 </script> 56 </body> 57 </html>
13.组件的状态
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>react-demo13</title> 6 <script src="build/react.js"></script> 7 <script src="build/react-dom.js"></script> 8 <script src="build/browser.min.js"></script> 9 <script src="build/jquery.min.js"></script> 10 </head> 11 <body> 12 <div id="example"></div> 13 <script type="text/babel"> 14 //如果promise对象正在抓取数据(pending状态)，组件显示"正在加载";如果promise对象报错（rejected状态），组件显示报错信息；如果promise对象抓取数据成功（fullfilled状态），组件显示获取的数据 15 //报错：then未定义 16 var RepoList = React.createClass({ 17 getInitialState:function(){ 18 return {loading:true,error:null,data:null}; 19 }, 20 componentDidMount:function(){ 21 this.props.promise.then( 22 value => this.setState({loading:false,data:value}), 23 error => this.setState({loading:false,error:error}) 24 ) 25 }, 26 render:function(){ 27 if(this.state.loading){ 28 return <span>Loading...</span>; 29 }else if(this.state.error !==null){ 30 return <span>Error:{this.state.error}</span> 31 }else{ 32 var repos = this.state.data.items; 33 var repoList = repos.map(function(repo){ 34 return ( 35 <li> 36 <a href={repos.html_url}>{repo.name}</a> 37 </li> 38 ); 39 }); 40 return ( 41 <main> 42 <h1>Most Popular Iavascript Projects in Github</h1> 43 <ol>{repoList}</ol> 44 </main> 45 ) 46 } 47 } 48 }); 49 ReactDOM.render( 50 <RepoList />, 51 document.getElementById("example") 52 ) 53 </script> 54 </body> 55 </html>
参考原文：http://www.ruanyifeng.com/blog/2015/03/react.html
