import React from "react";
import ReactDOM from "react-dom";

class Hello extends React.Component {
  render(){
    return (
      <div>
        Hello World! Hello {this.props.year}! Hello {this.props.name}!
      </div>
    );
  }
}

ReactDOM.render(
  <Hello name="Ivan" year={2016} />,
  document.getElementById('app')
);

@@ -59,19 +59,692 @@
 %22;%0A%0A
-class Hello
+/**%0A * %5BUSER_DATA Github %E7%94%A8%E6%88%B7%E6%95%B0%E6%8D%AE%5D%0A * @type %7BArray%7D %EF%BD%9Bname, username, image%7D%0A */%0Alet USER_DATA = %5B%0A  %7B%0A    name: 'Tyler McGinnis',%0A    username: 'tylermcginnis',%0A    image: 'https://avatars0.githubusercontent.com/u/2933430?v=3&s=460'%0A  %7D,%0A  %7B%0A    name: 'Ruan YiFeng',%0A    username:'ruanyf',%0A    image: 'https://avatars3.githubusercontent.com/u/905434?v=3&s=460',%0A  %7D,%0A  %7B%0A    name: 'Ivan',%0A    username: 'Ivanwangcy',%0A    image: 'https://avatars3.githubusercontent.com/u/6278969?v=3&s=460'%0A  %7D%0A%5D;%0A%0A/**%0A * %E7%AE%80%E4%BB%8B %E5%A4%B4%E5%83%8F%0A */%0Aclass ProfilePic extends React.Component %7B%0A  render()%7B%0A    return %3Cimg src=%7Bthis.props.imageUrl%7D style=%7B%7Bheight: 100, width: 100%7D%7D/%3E%0A  %7D%0A%7D%0A%0A/**%0A * %E7%AE%80%E4%BB%8B %E9%93%BE%E6%8E%A5%0A */%0Aclass ProfileLink
  ext
@@ -815,51 +815,76 @@
     
-Hello World! Hello %7Bthis.props.year%7D! Hello
+%3Ca href=%7B'https://www.github.com/' + this.props.username%7D%3E%0A         
  %7Bth
@@ -896,14 +896,30 @@
 ops.
+user
 name%7D
-!
+%0A        %3C/a%3E
 %0A   
@@ -941,61 +941,669 @@
 ;%0A  
+ 
 %7D%0A%7D%0A%0A
-ReactDOM.
+/**%0A * %E7%AE%80%E4%BB%8B %E5%A7%93%E5%90%8D%0A */%0Aclass ProfileName extends React.Component %7B%0A  
 render(
+)%7B
 %0A  
-%3CHello name=%22Ivan%22 year=%7B2016
+  return %3Cdiv%3E%7Bthis.props.name%7D%3C/div%3E;%0A  %7D%0A%7D%0A%0A/**%0A * github %E4%B8%AA%E4%BA%BA%E7%AE%80%E4%BB%8B%0A */%0Aclass Avatars extends React.Component %7B%0A  render() %7B%0A    console.log(this.props);%0A    var avatarList = this.props.users.map((value) =%3E %7B%0A      return (%0A        %3Cli key=%7Bvalue.username%7D%3E%0A          %3CProfilePic imageUrl=%7Bvalue.image%7D%3E%3C/ProfilePic%3E%0A          %3CProfileName name=%7Bvalue.name%7D%3E%3C/ProfileName%3E%0A          %3CProfileLink username=%7Bvalue.username%7D%3E%3C/ProfileLink%3E%0A        %3C/li%3E%0A      );%0A    %7D);%0A    return (%0A      %3Cul%3E%0A        %7BavatarList%7D%0A      %3C/ul%3E%0A    );%0A  %7D%0A%7D%0A%0AReactDOM.render(%0A  %3CAvatars users=%7BUSER_DATA
 %7D /%3E

add github userinfo