Add a react version

nathanmarks · Jun 29, 2016 · c237234 · c237234
1 parent 15a1615
commit c237234
Show file tree

Hide file tree

Showing 8 changed files with 149 additions and 47 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,6 +1,6 @@
 {
-  "presets": ["es2015", "stage-0"],
-  "plugins": ["transform-runtime"],
+  "presets": ["es2015", "stage-0", "react"],
+  "plugins": ["react-hot-loader/babel", "transform-runtime"],
   "env": {
     "test": {
       "sourceMaps": "both"

diff --git a/index.html b/index.html
@@ -10,12 +10,7 @@
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   </head>
   <body>
-    <div id="app">
-      <div class="logo__container">
-        <img src="/assets/images/logo.svg" alt="Front End Skeleton logo" class="logo">
-        <h1 class="logo__text">Front End Skeleton</h1>
-      </div>
-    </div>
+    <div id="app"></div>
     <script src="/static/bundle.js"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -16,8 +16,19 @@
     "test:watch": "cross-env NODE_ENV=test babel-node test/watch.js"
   },
   "dependencies": {
+    "classnames": "^2.2.5",
     "dom-helpers": "^2.4.0",
-    "normalize.css": "^4.1.1"
+    "normalize.css": "^4.1.1",
+    "react": "^15.1.0",
+    "react-dom": "^15.1.0",
+    "stylishly": "^0.5.0",
+    "stylishly-chained": "^0.5.0",
+    "stylishly-descendants": "^0.5.0",
+    "stylishly-media-queries": "^0.5.0",
+    "stylishly-nested": "^0.5.0",
+    "stylishly-pseudo-classes": "^0.5.0",
+    "stylishly-units": "^0.5.0",
+    "stylishly-vendor-prefixer": "^0.5.0"
   },
   "devDependencies": {
     "app-module-path": "^1.1.0",
@@ -34,6 +45,7 @@
     "coveralls": "^2.11.9",
     "cross-env": "^1.0.8",
     "css-loader": "^0.23.1",
+    "enzyme": "^2.3.0",
     "eslint": "^2.13.1",
     "eslint-plugin-babel": "^3.3.0",
     "eslint-plugin-mocha": "^3.0.0",
@@ -48,6 +60,8 @@
     "postcss-loader": "^0.9.1",
     "precss": "^1.4.0",
     "raw-loader": "^0.5.1",
+    "react-a11y": "^0.3.3",
+    "react-hot-loader": "^3.0.0-beta.2",
     "rimraf": "^2.5.2",
     "style-loader": "^0.13.1",
     "webpack": "^1.13.1",

diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,68 @@
+import React, { Component, PropTypes } from 'react';
+import { createStyleSheet, createStyleManager } from 'stylishly';
+import { createPluginRegistry } from 'stylishly/lib/pluginRegistry';
+import vendorPrefixer from 'stylishly-vendor-prefixer';
+import pseudoClasses from 'stylishly-pseudo-classes';
+import descendants from 'stylishly-descendants';
+import chained from 'stylishly-chained';
+import units from 'stylishly-units';
+import nested from 'stylishly-nested';
+import mediaQueries from 'stylishly-media-queries';
+
+import Home from './pages/Home';
+
+export const styleSheet = createStyleSheet('App', () => {
+  return {
+    '@raw body': {
+      color: '#111',
+      backgroundColor: '#fafafa',
+      fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif'
+    },
+    '@raw img': {
+      maxWidth: '100%'
+    },
+    '@raw #app': {
+      width: '100%',
+      height: '100vh',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  };
+});
+
+export default class App extends Component {
+  static propTypes = {
+    styleManager: PropTypes.object
+  };
+
+  static childContextTypes = {
+    styleManager: PropTypes.object.isRequired
+  };
+
+  getChildContext() {
+    const { styleManager } = this;
+    return {
+      styleManager: styleManager
+    };
+  }
+
+  componentWillMount() {
+    this.styleManager = createStyleManager({
+      pluginRegistry: createPluginRegistry(
+        nested(),
+        mediaQueries(),
+        descendants(),
+        pseudoClasses(),
+        chained(),
+        units(),
+        vendorPrefixer()
+      )
+    });
+  }
+
+  render() {
+    this.styleManager.render(styleSheet);
+    return <Home />;
+  }
+}
diff --git a/src/index.css b/src/index.css
diff --git a/src/index.js b/src/index.js
@@ -1,10 +1,31 @@
 import 'normalize.css';
-import './index.css';
+import { AppContainer } from 'react-hot-loader';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
 
-if (process.env.NODE_ENV !== 'production') {
-  require('../index.html');
-}
+// import a11y from 'react-a11y';
+
+// if (process.env.NODE_ENV !== 'production') {
+//   a11y(React, {includeSrcNode: true});
+// }
+
+const rootEl = document.getElementById('app');
+ReactDOM.render(
+  <AppContainer>
+    <App />
+  </AppContainer>,
+  rootEl
+);
 
-export default function hello() {
-  return 'hello';
+if (module.hot) {
+  module.hot.accept('./App', () => {
+    const NextApp = require('./App').default;
+    ReactDOM.render(
+      <AppContainer>
+        <NextApp />
+      </AppContainer>,
+      rootEl
+    );
+  });
 }
diff --git a/src/pages/Home.js b/src/pages/Home.js
@@ -0,0 +1,35 @@
+import React, { Component, PropTypes } from 'react';
+import { createStyleSheet } from 'stylishly';
+
+export const styleSheet = createStyleSheet('Home', () => {
+  return {
+    logoContainer: {
+      display: 'flex',
+      alignItems: 'center'
+    },
+    logo: {
+      width: 75,
+      marginRight: 10
+    },
+    logoText: {
+      whiteSpace: 'nowrap',
+      fontWeight: 500
+    }
+  };
+});
+
+export default class Home extends Component {
+  static contextTypes = {
+    styleManager: PropTypes.object.isRequired
+  }
+
+  render() {
+    const classes = this.context.styleManager.render(styleSheet);
+    return (
+      <div className={classes.logoContainer}>
+        <img src="/assets/images/logo.svg" alt="Front End Skeleton logo" className={classes.logo} />
+        <h1 className={classes.logoText}>Front End Skeleton</h1>
+      </div>
+    );
+  }
+}
diff --git a/webpack.dev.config.js b/webpack.dev.config.js
@@ -7,6 +7,7 @@ module.exports = {
   devtool: 'inline-source-map',
   entry: {
     'main': [
+      'react-hot-loader/patch',
       'webpack-dev-server/client?http://localhost:3000',
       'webpack/hot/dev-server',
       './src/index'