diff --git a/README.md b/README.md
index b47329dca..9813f2b15 100644
--- a/README.md
+++ b/README.md
@@ -122,6 +122,8 @@ The username and password of the admin test account is `devtable` and `password`
 
 * `local-run` runs the web server for testing
 * `local-test` runs the unit test suite
+* `npm run build` builds front end dependencies (webpack, typescript, react)
+* `npm run watch` a watcher for webpack
 
 ### Development inside Docker
 
diff --git a/static/js/app.tsx b/static/js/app.tsx
index f41266e1e..b59f05101 100644
--- a/static/js/app.tsx
+++ b/static/js/app.tsx
@@ -1,2 +1,9 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
\ No newline at end of file
+import * as angular from "angular";
+
+import repoHeader from "./directives/components/component";
+
+angular.module('quayPages').directive('repoHeader', function(reactDirective) {
+  return reactDirective(repoHeader);
+});
+
diff --git a/static/js/directives/components/component.tsx b/static/js/directives/components/component.tsx
new file mode 100644
index 000000000..0c5b6919e
--- /dev/null
+++ b/static/js/directives/components/component.tsx
@@ -0,0 +1,10 @@
+import * as React from "react";
+
+class repoHeader extends React.Component<{}, {}> {
+  render () {
+    return <p> The component for the header</p>;
+  }
+}
+
+export default repoHeader;
+
diff --git a/static/js/directives/components/testComponent.js b/static/js/directives/components/testComponent.js
deleted file mode 100644
index 58bd0cd9f..000000000
--- a/static/js/directives/components/testComponent.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * A react component implemented using the ngReact library
- */
-var testComponent = React.createClass({
-  propTypes: {
-    firstProp: React.PropTypes.string.isRequired,
-    secondProp: React.PropTypes.string.isRequired
-  },
-  render: function() {
-    return React.DOM.span(null, 
-      'This is a react component: ' + this.props.firstProp + ' ' + this.props.secondProp
-    );
-  }
-});
-
-angular.module('quayPages').value('test-component', testComponent);
-angular.module('quayPages').directive('testComponent', function(reactDirective) {
-    return reactDirective('testComponent');
-});
-
diff --git a/static/partials/repo-view.html b/static/partials/repo-view.html
index f996ff52c..f3da86092 100644
--- a/static/partials/repo-view.html
+++ b/static/partials/repo-view.html
@@ -4,17 +4,8 @@
   <div class="page-content">
     <!-- New Public Repo Page experiment -->
     <div ng-if="newRepoExperiment" class="main-panel">
-      <!-- Test React Component -->
-      <div>
-        <div>
-          <div>This is using the generic react-component directive</div>
-          <react-component name="test-component" props="reactProps"/>
-        </div>
-        <div>
-          <div>This is creating a specific directive corresponding to a react component</div>
-          <test-component first-prop="reactProps.firstProp" second-prop="reactProps.secondProp"/>
-        </div>
-      </div>
+      <!-- React Components -->
+      <repo-header />
     </div>
     <!-- Old Repo Page -->
     <div ng-if="!newRepoExperiment">