feat: Migrate Header, Footer, and CommentCounter components to React

src/app.module.js

@@ -13,8 +13,10 @@ const setupRoutes = ($stateProvider) => {
                 this.comments = comments;
             },
             template: `
-                <h3>Hello World!</h3>
+                <app-header title="'Hello World!'"></app-header>
+                <comment-counter comments="$ctrl.comments"></comment-counter>
                 <comment-list comments="$ctrl.comments"></comment-list>
+                <app-footer></app-footer>
             `,
         });
 };
@@ -28,6 +30,9 @@ module.exports = angular.module('ngReactExample', [
     require('./services/CommentService').name,
     require('./services/AuthorService').name,
     require('./components/CommentList').name,
+    require('./components/Header').name,
+    require('./components/Footer').name,
+    require('./components/CommentCounter').name,
 ])
     .config(enableHtml5Mode)
     .config(setupRoutes);

src/components/CommentCounter/index.js

@@ -0,0 +1,6 @@
+import angular from 'angular';
+import { reactToAngularComponent } from '../../services/AngularReactHelper';
+import CommentCounter from './presenter';
+
+module.exports = angular.module('ngReactExample.commentCounter', [
+]).component('commentCounter', reactToAngularComponent(CommentCounter));

src/components/CommentCounter/presenter.js

@@ -0,0 +1,16 @@
+import React, { PropTypes } from 'react';
+
+const CommentCounter = ({ comments }) => {
+    const count = comments ? comments.length : 0;
+    return (
+        <div style={{ padding: '10px', backgroundColor: '#f0f0f0', marginBottom: '10px' }}>
+            Total Comments: { count }
+        </div>
+    );
+};
+
+CommentCounter.propTypes = {
+    comments: PropTypes.array.isRequired,
+};
+
+export default CommentCounter;

src/components/Footer/index.js

@@ -0,0 +1,6 @@
+import angular from 'angular';
+import { reactToAngularComponent } from '../../services/AngularReactHelper';
+import Footer from './presenter';
+
+module.exports = angular.module('ngReactExample.footer', [
+]).component('appFooter', reactToAngularComponent(Footer));

src/components/Footer/presenter.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Footer = () => (
+    <footer style={{ marginTop: '20px', padding: '10px', borderTop: '1px solid #ccc' }}>
+        <p>AngularJS to React Migration Example</p>
+    </footer>
+);
+
+export default Footer;

src/components/Header/index.js

@@ -0,0 +1,6 @@
+import angular from 'angular';
+import { reactToAngularComponent } from '../../services/AngularReactHelper';
+import Header from './presenter';
+
+module.exports = angular.module('ngReactExample.header', [
+]).component('appHeader', reactToAngularComponent(Header));

src/components/Header/presenter.js

@@ -0,0 +1,11 @@
+import React, { PropTypes } from 'react';
+
+const Header = ({ title }) => (
+    <h3>{ title }</h3>
+);
+
+Header.propTypes = {
+    title: PropTypes.string.isRequired,
+};
+
+export default Header;