React入门理解demo

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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

以上是关于React入门理解demo的主要内容,如果未能解决你的问题,请参考以下文章

[vscode]--HTML代码片段(基础版,reactvuejquery)

React 入门,5个常用DEMO展示

谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo

如何理解这段代码片段中的两对括号?

react-native 入门基础介绍

React入门3