React updates

.travis.yml

@@ -12,7 +12,6 @@ before_cache:
 env:
   global:
   - NOKOGIRI_USE_SYSTEM_LIBRARIES=true  # speeds up installation of html-proofer
-  - secure: "UDM1SACHM7XVf6oG8oFTe2A8Jd5Drsd8HCwMvlOkkeab02KO+0sS9myTRrDicvvEoKB8gNG1u1S74KH43mPScT58qgwYQMDkGl4IkSTyfZPnukbErQGyRoFlL8OY8G33ksjav/O0hnQyhWLtKXcFL/NL0AF0xavzmLBTP6jyi9k="
 
 branches:
   except:

Makefile

@@ -15,20 +15,22 @@ INSTALLED_FLAG := $(VENDOR_DIR)/.installed
 install: $(INSTALLED_FLAG)
 $(INSTALLED_FLAG): Gemfile Gemfile.lock Makefile
 	bundle install --path $(VENDOR_DIR)
-	npm install react-tools
+	npm install -g webpack
+	npm install
 	@ touch $(INSTALLED_FLAG)  # indicate that dependencies are installed
 
 .PHONY: update
 update: install
 	bundle update
-	npm update react-tools
+	npm update webpack
+	npm update
 	@ touch $(INSTALLED_FLAG)  # indicate that dependencies are installed
 
 # BUILD ########################################################################
 
 .PHONY: build
 build: install
-	jsx _src/ dist/js/ --no-cache-dir
+	webpack
 	bundle exec jekyll build --quiet
 	echo ${URL} > _site/CNAME
 	bundle exec htmlproof _site --href-ignore "#"

README.md

@@ -10,10 +10,12 @@ Based on the Code for Virginia Beach landing page (http://code4hr.org/)
 
 * Ruby 2.1.2: `$ rbenv install 2.1.2`
 * Bundler: `$ gem install bundler`
+* Node: [Download Node](https://nodejs.org/en/)
 
 ### Running locally
 
 ```
+$ make build
 $ make run
 ```
 

_src/app.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+import GithubProjectList from './containers/GithubProjectList';
+
+render(
+  <GithubProjectList source='https://api.github.com/orgs/friendlycode/repos' />,
+  document.getElementById('github-projects')
+);

_src/components/GithubRepositoryItem.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+export default class GithubRepositoryItem extends React.Component {
+  render() {
+    return (
+      <li className="project">
+        <div>
+          <h3>{this.props.repo.name}</h3>
+          <p>{this.props.repo.description}</p>
+          <a className="btn" href={this.props.repo.html_url} target="_blank">View on Github</a>
+        </div>
+      </li>
+    );
+  }
+};

_src/github-projects.js → _src/containers/GithubProjectList.jsx

@@ -1,19 +1,9 @@
-var GithubRepositoryItem = React.createClass({
-  render: function() {
-    return (
-      <li className="project">
-        <div>
-          <h3>{this.props.repo.name}</h3>
-          <p>{this.props.repo.description}</p>
-          <a className="btn" href={this.props.repo.html_url} target="_blank">View on Github</a>
-        </div>
-      </li>
-    );
-  }
-});
+import React from 'react';
 
-var GithubRepositoryList = React.createClass({
-  render: function() {
+import GithubRepositoryItem from '../components/GithubRepositoryItem'
+
+export default class GithubProjectList extends React.Component {
+  render() {
     var repos = [];
 
     jQuery.ajax({
@@ -39,9 +29,4 @@ var GithubRepositoryList = React.createClass({
       </div>
     );
   }
-});
-
-React.render(
-  <GithubRepositoryList source='https://api.github.com/orgs/friendlycode/repos' />,
-  document.getElementById('github-projects')
-);
+}

index.html

@@ -165,7 +165,7 @@
     // do it
     LZLD.lazyLoadImages();
     </script>
-    <script src="https://fb.me/react-0.13.3.min.js"></script>
-    <script src="dist/js/github-projects.js"></script>
+    <script src="dist/js/vendors.js"></script>
+    <script src="dist/js/app.js"></script>
   </body>
 </html>

package.json

@@ -0,0 +1,26 @@
+{
+  "name": "friendlycode.homepage",
+  "description": "front end task runner for bundling and building the FriendColde hompage ui",
+  "dependencies": {
+    "babel-preset-es2015": "^6.3.13",
+    "babel-preset-react": "^6.3.13",
+    "history": "^1.17.0",
+    "i": "^0.3.4",
+    "npm": "^3.5.3",
+    "react": "^0.14.6",
+    "react-addons-transition-group": "^0.14.6",
+    "react-dom": "^0.14.6"
+  },
+  "devDependencies": {
+    "babel-core": "^6.4.0",
+    "babel-loader": "^6.2.1",
+    "react-hot-loader": "^1.3.0",
+    "style-loader": "^0.13.0",
+    "webpack": "^1.12.10",
+    "webpack-dev-server": "^1.14.0"
+  },
+  "scripts": {
+    "dev-server": "webpack-dev-server --inline --hot --progress --colors --content-base dist/",
+    "dev": "webpack --progress --colors --watch"
+  }
+}

webpack.config.js

@@ -0,0 +1,38 @@
+var webpack = require('webpack');
+
+module.exports = {
+  entry: {
+    app: './_src/app.jsx',
+    vendors: ['react', 'react-dom', 'react-addons-transition-group']
+  },
+  output: {
+    path: './dist/js/',
+    publicPath: '/js/',
+    filename: 'app.js'
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.jsx?$/,
+        loader: 'babel',
+        exclude: '/node_modules/',
+        query: {
+          cacheDirectory: true,
+          presets: ['react', 'es2015']
+        }
+      }
+    ]
+  },
+  resolve: {
+    extensions: ['', '.js', '.jsx']
+  },
+  devServer: {
+      historyApiFallback: true
+  },
+  plugins: [
+      new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
+      new webpack.optimize.UglifyJsPlugin({
+        sourceMap: true,
+          minimize: true})
+    ]
+};