FIRST components.

.gitignore

@@ -1,3 +1,5 @@
 /.idea/
 /dist/
 /node_modules/
+
+/npm-debug.log

app/index.js

@@ -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")
 );
-

webpack.config.js

@@ -1,5 +1,5 @@
-let HtmlWebpackPlugin = require("html-webpack-plugin");
-let HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
+var HtmlWebpackPlugin = require("html-webpack-plugin");
+var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
   template: __dirname + "/app/index.html",
   filename: "index.html",
   inject: "body"