forked from Paketik0Chaya/react-intro
-
Notifications
You must be signed in to change notification settings - Fork 1
/
app.jsx
71 lines (65 loc) · 1.84 KB
/
app.jsx
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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
var ImageCounter = function(props) {
return (
<div className="image-counter">
<div className="count">{props.count}</div>
<img src={'img/' + props.imageUrl} onClick={props.onCount} />
</div>
);
}
var Hero = React.createClass({
getInitialState: function() {
return {
count: 0
};
},
handleClick: function () {
this.setState({ count: this.state.count + 1 });
},
render: function() {
return (
<div className="container">
<ImageCounter imageUrl={this.props.imageUrl} count={this.state.count} onCount={this.handleClick} />
<h1>{this.props.title}</h1>
<p>{this.props.subtitle}</p>
</div>
);
}
});
var App = React.createClass({
render: function() {
return (
<div>
{this.props.heroes.map(function(hero) {
return <Hero key={hero.id} title={hero.title} subtitle={hero.subtitle} imageUrl={hero.imageUrl} />
})}
</div>
);
}
});
var data = [
{
id: 1,
title: 'React',
subtitle: 'Библиотека для создания пользовательских интерфейсов',
imageUrl: 'react.png'
},
{
id: 2,
title: 'Angular 2',
subtitle: 'Один фреймворк',
imageUrl: 'angular.png'
},
{
id: 3,
title: 'Ember',
subtitle: 'Фреймворк для создания амбициозных веб-приложений',
imageUrl: 'ember.png'
},
{
id: 4,
title: 'Vue',
subtitle: 'Прогрессивный фреймворк',
imageUrl: 'vue.png'
}
];
ReactDOM.render(<App heroes={data} />, document.getElementById('root'));