Skip to content

Commit f85fbab

Browse files
qiileeqiilee
committed
finish: react-demos 一次练习
1 parent 44b26bb commit f85fbab

9 files changed

+488
-286
lines changed

‎myCode/01/README.md

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
## 从零开始搭建一个react项目：https://www.jianshu.com/p/324fd1c124ad
2-
3-
github:https://github.com/lijie33402/react-redux-ducks
4-
5-
看到：5. setState 搜索即可
1+
## 从零开始搭建一个react项目：https://www.jianshu.com/p/324fd1c124ad
2+
3+
github:https://github.com/lijie33402/react-redux-ducks
4+
5+
看到：5. setState 搜索即可

‎react-demos/demo/10 Component Lifecycle.html

+76-46
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,76 @@
1-
<!DOCTYPE html>
2-
<html>
3-
<head>
4-
<script src="../build/react.js"></script>
5-
<script src="../build/react-dom.js"></script>
6-
<script src="../build/browser.min.js"></script>
7-
</head>
8-
<body>
9-
<div id="example"></div>
10-
<script type="text/babel">
11-
var Hello = React.createClass({
12-
getInitialState: function () {
13-
return {
14-
opacity: 1.0
15-
};
16-
},
17-
18-
componentDidMount: function () {
19-
this.timer = setInterval(function () {
20-
var opacity = this.state.opacity;
21-
opacity -= .05;
22-
if (opacity < 0.1) {
23-
opacity = 1.0;
24-
}
25-
this.setState({
26-
opacity: opacity
27-
});
28-
}.bind(this), 100);
29-
},
30-
31-
render: function () {
32-
return (
33-
<div style={{opacity: this.state.opacity}}>
34-
Hello {this.props.name}
35-
</div>
36-
);
37-
}
38-
});
39-
40-
ReactDOM.render(
41-
<Hello name="world"/>,
42-
document.getElementById('example')
43-
);
44-
</script>
45-
</body>
46-
</html>
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<script src="../build/react.js"></script>
5+
<script src="../build/react-dom.js"></script>
6+
<script src="../build/browser.min.js"></script>
7+
</head>
8+
<body>
9+
<div id="example"></div>
10+
<script type="text/babel">
11+
// var Hello = React.createClass({
12+
// getInitialState: function () {
13+
// return {
14+
// opacity: 1.0
15+
// };
16+
// },
17+
18+
// componentDidMount: function () {
19+
// this.timer = setInterval(function () {
20+
// var opacity = this.state.opacity;
21+
// opacity -= .05;
22+
// if (opacity < 0.1) {
23+
// opacity = 1.0;
24+
// }
25+
// this.setState({
26+
// opacity: opacity
27+
// });
28+
// }.bind(this), 100);
29+
// },
30+
31+
// render: function () {
32+
// return (
33+
// <div style={{opacity: this.state.opacity}}>
34+
// Hello {this.props.name}
35+
// </div>
36+
// );
37+
// }
38+
// });
39+
40+
// ReactDOM.render(
41+
// <Hello name="world"/>,
42+
// document.getElementById('example')
43+
// );
44+
45+
// 1 注意 style={{opacity: this.state.opacity}} 写法
46+
var MyComponent = React.createClass({
47+
getInitialState(){
48+
return {
49+
opacity: 1
50+
}
51+
},
52+
componentDidMount(){
53+
setInterval(function(){
54+
var opacity = this.state.opacity;
55+
opacity -= 0.05
56+
if (opacity < 0) {
57+
opacity = 1
58+
}
59+
this.setState({
60+
opacity: opacity
61+
})
62+
}.bind(this),100)
63+
},
64+
render(){
65+
return(
66+
<div style={{opacity: this.state.opacity}}>666666666</div>
67+
)
68+
}
69+
})
70+
ReactDOM.render(
71+
<MyComponent/>,
72+
document.getElementById('example')
73+
);
74+
</script>
75+
</body>
76+
</html>

‎react-demos/demo/11 Ajax.html

+66-45
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,66 @@
1-
<!DOCTYPE html>
2-
<html>
3-
<head>
4-
<script src="../build/react.js"></script>
5-
<script src="../build/react-dom.js"></script>
6-
<script src="../build/browser.min.js"></script>
7-
<script src="../build/jquery.min.js"></script>
8-
</head>
9-
<body>
10-
<div id="example"></div>
11-
<script type="text/babel">
12-
var UserGist = React.createClass({
13-
getInitialState: function() {
14-
return {
15-
username: '',
16-
lastGistUrl: ''
17-
};
18-
},
19-
20-
componentDidMount: function() {
21-
$.get(this.props.source, function(result) {
22-
var lastGist = result[0];
23-
this.setState({
24-
username: lastGist.owner.login,
25-
lastGistUrl: lastGist.html_url
26-
});
27-
}.bind(this));
28-
},
29-
30-
render: function() {
31-
return (
32-
<div>
33-
{this.state.username}'s last gist is <a href={this.state.lastGistUrl}>here</a>.
34-
</div>
35-
);
36-
}
37-
});
38-
39-
ReactDOM.render(
40-
<UserGist source="https://api.github.com/users/octocat/gists" />,
41-
document.getElementById('example')
42-
);
43-
</script>
44-
</body>
45-
</html>
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<script src="../build/react.js"></script>
6+
<script src="../build/react-dom.js"></script>
7+
<script src="../build/browser.min.js"></script>
8+
<script src="../build/jquery.min.js"></script>
9+
</head>
10+
11+
<body>
12+
<div id="example"></div>
13+
<script type="text/babel">
14+
// var UserGist = React.createClass({
15+
// getInitialState: function() {
16+
// return {
17+
// username: '',
18+
// lastGistUrl: ''
19+
// };
20+
// },
21+
22+
// componentDidMount: function() {
23+
// $.get(this.props.source, function(result) {
24+
// var lastGist = result[0];
25+
// this.setState({
26+
// username: lastGist.owner.login,
27+
// lastGistUrl: lastGist.html_url
28+
// });
29+
// }.bind(this));
30+
// },
31+
32+
// render: function() {
33+
// return (
34+
// <div>
35+
// {this.state.username}'s last gist is <a href={this.state.lastGistUrl}>here</a>.
36+
// </div>
37+
// );
38+
// }
39+
// });
40+
41+
// ReactDOM.render(
42+
// <UserGist source="https://api.github.com/users/octocat/gists" />,
43+
// document.getElementById('example')
44+
// );
45+
46+
// 1 注意 $.get(url, func)
47+
var UserGist = React.createClass({
48+
componentDidMount(){
49+
$.get("https://api.github.com/users/octocat/gists",function(res){
50+
console.log(res)
51+
})
52+
},
53+
render(){
54+
return(
55+
<div></div>
56+
)
57+
}
58+
})
59+
ReactDOM.render(
60+
<UserGist />,
61+
document.getElementById('example')
62+
);
63+
</script>
64+
</body>
65+
66+
</html>

‎react-demos/demo/12 Display value from a Promise.html

+78-31
Original file line numberDiff line numberDiff line change
@@ -11,49 +11,96 @@
1111
<body>
1212
<div id="example"></div>
1313
<script type="text/babel">
14-
var RepoList = React.createClass({
15-
getInitialState: function() {
16-
return {
14+
// var RepoList = React.createClass({
15+
// getInitialState: function() {
16+
// return {
17+
// loading: true,
18+
// error: null,
19+
// data: null
20+
// };
21+
// },
22+
23+
// componentDidMount() {
24+
// this.props.promise.then(
25+
// value => this.setState({loading: false, data: value}),
26+
// error => this.setState({loading: false, error: error}));
27+
// },
28+
29+
// render: function() {
30+
// if (this.state.loading) {
31+
// return <span>Loading...</span>;
32+
// }
33+
// else if (this.state.error !== null) {
34+
// return <span>Error: {this.state.error.message}</span>;
35+
// }
36+
// else {
37+
// var repos = this.state.data.items;
38+
// var repoList = repos.map(function (repo, index) {
39+
// return (
40+
// <li key={index}><a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description}</li>
41+
// );
42+
// });
43+
// return (
44+
// <main>
45+
// <h1>Most Popular JavaScript Projects in Github</h1>
46+
// <ol>{repoList}</ol>
47+
// </main>
48+
// );
49+
// }
50+
// }
51+
// });
52+
53+
// ReactDOM.render(
54+
// <RepoList promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')} />,
55+
// document.getElementById('example')
56+
// );
57+
58+
// 1
59+
var RepoList = React.createClass({
60+
getInitialState(){
61+
return{
1762
loading: true,
1863
error: null,
1964
data: null
20-
};
65+
}
2166
},
22-
23-
componentDidMount() {
67+
componentDidMount(){
2468
this.props.promise.then(
25-
value => this.setState({loading: false, data: value}),
26-
error => this.setState({loading: false, error: error}));
69+
value => this.setState({
70+
loading: false,
71+
data: value
72+
}),
73+
error => this.setState({
74+
loading: false,
75+
data: error
76+
})
77+
)
2778
},
28-
29-
render: function() {
79+
render(){
3080
if (this.state.loading) {
31-
return <span>Loading...</span>;
32-
}
33-
else if (this.state.error !== null) {
34-
return <span>Error: {this.state.error.message}</span>;
35-
}
36-
else {
37-
var repos = this.state.data.items;
38-
var repoList = repos.map(function (repo, index) {
39-
return (
40-
<li key={index}><a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description}</li>
41-
);
42-
});
43-
return (
44-
<main>
45-
<h1>Most Popular JavaScript Projects in Github</h1>
46-
<ol>{repoList}</ol>
47-
</main>
48-
);
81+
return(
82+
<span>loading</span>
83+
)
84+
} else if (this.state.error) {
85+
return(
86+
<span>error</span>
87+
)
88+
} else {
89+
var repos = this.state.data.items
90+
console.log(repos)
91+
var repoList = repos.map((item, index)=>{
92+
console.log(item, index)
93+
})
94+
return(
95+
<span>success</span>
96+
)
4997
}
5098
}
51-
});
52-
99+
})
53100
ReactDOM.render(
54101
<RepoList promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')} />,
55102
document.getElementById('example')
56-
);
103+
)
57104
</script>
58105
</body>
59106

0 commit comments

Comments
 (0)