80 lines
1.5 KiB
JavaScript
80 lines
1.5 KiB
JavaScript
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");
|
|
import routes from "./config/routes";
|
|
|
|
/* 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 Link = React.createClass({
|
|
changeURL() {
|
|
console.log(this.props.href);
|
|
window.location.replace(this.props.href);
|
|
},
|
|
|
|
render() {
|
|
return (
|
|
<span
|
|
style={ { color: "blue", cursor: "pointer" } }
|
|
onClick={this.changeURL}>
|
|
{this.props.children}
|
|
</span>
|
|
);
|
|
}
|
|
});
|
|
|
|
let ProfileLink = React.createClass({
|
|
render: function () {
|
|
return (
|
|
<div>
|
|
<Link href={"https://github.com/" + this.props.username}>{this.props.username}</Link>
|
|
</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} />
|
|
<ProfileName name={user.name} />
|
|
<ProfileLink username={user.username} />
|
|
</div>
|
|
);
|
|
}
|
|
});
|
|
|
|
ReactDOM.render(
|
|
routes,
|
|
document.getElementById("app")
|
|
);
|