compile a typescript react component with webpack

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
 

static/js/app.tsx

@@ -1,2 +1,9 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import * as angular from "angular";
+
+import repoHeader from "./directives/components/component";
+
+angular.module('quayPages').directive('repoHeader', function(reactDirective) {
+  return reactDirective(repoHeader);
+});
+

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;
+

static/js/directives/components/testComponent.js

@@ -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');
-});
-

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">