|
@@ -1,16 +1,62 @@
|
|
|
+const USER_DATA = {
|
|
|
+ name: "Tyler McGinnis",
|
|
|
+ username: "tylermcginnis",
|
|
|
+ image: "https://avatars0.githubusercontent.com/u/2933430?v=3&s=460"
|
|
|
+};
|
|
|
+
|
|
|
let React = require("react");
|
|
|
let ReactDOM = require("react-dom");
|
|
|
|
|
|
-let HelloWorld = React.createClass({
|
|
|
+/* React components should be:
|
|
|
+
|
|
|
+ Focused
|
|
|
+ Independent
|
|
|
+ Reusable
|
|
|
+ Small
|
|
|
+ Testable
|
|
|
+
|
|
|
+ */
|
|
|
+
|
|
|
+let ProfilePic = React.createClass({
|
|
|
+ render: function () {
|
|
|
+ return (
|
|
|
+ <img src={this.props.imageUrl} style={{ height: 100, width: 100 }} />
|
|
|
+ );
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+let ProfileLink = React.createClass({
|
|
|
render: function () {
|
|
|
return (
|
|
|
- <div>Hello, world!</div>
|
|
|
+ <div>
|
|
|
+ <a href={"https://github.com/" + this.props.username}>{this.props.username}</a>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+let ProfileName = React.createClass({
|
|
|
+ render: function () {
|
|
|
+ return (
|
|
|
+ <div>{this.props.name}</div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+let Avatar = React.createClass({
|
|
|
+ render: function () {
|
|
|
+ const user = this.props.user;
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ <ProfilePic imageUrl={user.image} />
|
|
|
+ <ProfileLink username={user.username} />
|
|
|
+ <ProfileName name={user.name} />
|
|
|
+ </div>
|
|
|
);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
ReactDOM.render(
|
|
|
- <HelloWorld />,
|
|
|
+ <Avatar user={USER_DATA} />,
|
|
|
document.getElementById("app")
|
|
|
);
|
|
|
-
|