learningjs/insta.html at master · jsj14/learningjs · GitHub

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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<html>
<head>
<script src="https://fb.me/react-15.0.1.js"></script>
<script src="https://fb.me/react-dom-15.0.1.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0-alpha1/JSXTransformer.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
  <div id="container"></div>
  <div id="container2"></div>
<script type="text/babel">
var Photo = React.createClass({

  toggleLiked: function() {
    this.setState({
      liked: !this.state.liked
    });
  },

  getInitialState: function() {
    return {
      liked: false
    };
  },

  render: function() {
    var buttonClass = this.state.liked ? 'active' : '';

    return (
      <div className='photo'>
        <img src={this.props.src} />

        <div className='bar'>
          <button onClick={this.toggleLiked} className={buttonClass}>
            Like
          </button>
          <span>{this.props.caption}</span>
        </div>
      </div>
    );
  }
});

var PhotoGallery = React.createClass({

  render: function() {

    var photos = this.props.photos.map(function(photo) {
      return <Photo src={photo.url} caption={photo.caption} key={photo.id}/>
    });

    return (
      <div className='photo-gallery'>
        {photos}
      </div>
    );
  }
});

var data = [
  {
    url: 'fractal.png',
    caption: 'Fractal!',
    id: '101'
  },
  {
    url: 'forest.jpeg',
    caption: 'forrest',
    id: '102'
  },
  {
    url: 'stars.jpg',
    caption: 'Piano guys',
    id: '103'
  }
];

ReactDOM.render(<PhotoGallery photos={data} />, document.getElementById("container"));


var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

ReactDOM.render(<HelloMessage name="John" />, container2);
//key={result.id}

///ReactDOM.render(<Photo src='fractal.png' caption='Fractal Analytics. Influencing the future' />, document.getElementById("container"));

</script>

</body>
</html>