diff --git a/static/js/directives/components/testComponent.js b/static/js/directives/components/testComponent.js
index 7c405b2b0..58bd0cd9f 100644
--- a/static/js/directives/components/testComponent.js
+++ b/static/js/directives/components/testComponent.js
@@ -3,19 +3,18 @@
  */
 var testComponent = React.createClass({
   propTypes: {
-    prop1: React.PropTypes.string.isRequired,
-    prop2: React.PropTypes.string.isRequired
+    firstProp: React.PropTypes.string.isRequired,
+    secondProp: React.PropTypes.string.isRequired
   },
   render: function() {
     return React.DOM.span(null, 
-      'This is a react component: ' + this.props.prop1 + ' ' + this.props.prop2
+      'This is a react component: ' + this.props.firstProp + ' ' + this.props.secondProp
     );
   }
 });
 
-angular.module('quayPages')
-  .value('TestComponent', testComponent)
-  .directive('testComponent', function(reactDirective) {
-    return reactDirective(testComponent);
-  });
+angular.module('quayPages').value('test-component', testComponent);
+angular.module('quayPages').directive('testComponent', function(reactDirective) {
+    return reactDirective('testComponent');
+});
 
diff --git a/static/js/pages/repo-view.js b/static/js/pages/repo-view.js
index 675c1fd07..09beb7d3b 100644
--- a/static/js/pages/repo-view.js
+++ b/static/js/pages/repo-view.js
@@ -2,19 +2,18 @@
   /**
    * Repository view page.
    */
-  angular.module('quayPages')
-    .config(['pages', function(pages) {
-      pages.create('repo-view', 'repo-view.html', RepoViewCtrl, {
-        'newLayout': true,
-        'title': '{{ namespace }}/{{ name }}',
-        'description': 'Repository {{ namespace }}/{{ name }}'
-      });
-    }])
+  angular.module('quayPages').config(['pages', function(pages) {
+    pages.create('repo-view', 'repo-view.html', RepoViewCtrl, {
+      'newLayout': true,
+      'title': '{{ namespace }}/{{ name }}',
+      'description': 'Repository {{ namespace }}/{{ name }}'
+    });
+  }]);
 
   function RepoViewCtrl($scope, $routeParams, $location, $timeout, ApiService, UserService, AngularPollChannel, ImageLoaderService, CookieService) {
     $scope.reactProps = {
-      prop1: 'Prop 1',
-      prop2: 'Prop 2'
+      firstProp: 'Prop 1',
+      secondProp: 'Prop 2'
     };
 
     $scope.namespace = $routeParams.namespace;
diff --git a/static/partials/repo-view.html b/static/partials/repo-view.html
index a99c168b3..6992dfa90 100644
--- a/static/partials/repo-view.html
+++ b/static/partials/repo-view.html
@@ -5,7 +5,16 @@
     <!-- New Public Repo Page experiment -->
     <div ng-if="newRepoExperiment">
       <!-- Test React Component -->
-      <div><react-component name="TestComponent" props="reactProps"/></div>
+      <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>
     </div>
     <!-- Old Repo Page -->
     <div ng-if="!newRepoExperiment">