This repository has been archived by the owner on Sep 10, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
helloworld4.html
52 lines (48 loc) · 1.42 KB
/
helloworld4.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<html>
<head>
<title>React Hello World 4</title>
<!-- DEBUG version -->
<script src="react.js"></script>
<script>
var myHelloWorld4Component = React.createClass({
displayName: 'helloWorld4',
getInitialState: function () {
// Decide what the inital state should be
return {
color: this.colors[0],
count: 1 };
},
propTypes: {
greetingName: React.PropTypes.string.isRequired,
},
// List of available link colors
colors: ['green', 'orange', 'red', 'blue'],
handleClick: function() {
// Change to next available color on each click
var newColor = this.colors[this.state.count % this.colors.length];
var newCount = this.state.count + 1;
// calling setState will cause React to render the component
this.setState({color: newColor, count: newCount });
},
render: function() {
return React.DOM.h1(
{
onClick: this.handleClick, // JS onClick event
style: { color: this.state.color } // Inline CSS
},
'Hello ' + this.props.greetingName + " " + this.state.count
);
}
});
</script>
</head>
<body>
<div id="my-react-div"></div>
<script>
React.render(
React.createElement(myHelloWorld4Component, { greetingName: 'Kristofer' } ),
document.getElementById('my-react-div')
);
</script>
</body>
</html>