Master upgrade & React/JS Setup. Includes:

- Add browserify gem.
- Add React/React-Router/React-Bootstrap.
- Add jest.
- Add alt.js.
- Add data fetcher.

.gitignore

@@ -15,3 +15,4 @@
 .ruby-gemset
 .ruby-version
 /config/database.yml
+/node_modules

Gemfile

@@ -2,17 +2,14 @@ source 'https://rubygems.org'
 
 # Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
 gem 'rails', '4.2.0'
+
+gem "haml-rails", "~> 0.9"
 # Use SCSS for stylesheets
 gem 'sass-rails', '~> 5.0'
 # Use Uglifier as compressor for JavaScript assets
 gem 'uglifier', '>= 1.3.0'
 # Twitter bootstrap styles
 gem 'bootstrap-sass', '~> 3.3.5'
-# Use CoffeeScript for .coffee assets and views
-gem 'coffee-rails', '~> 4.1.0'
-# See https://github.com/sstephenson/execjs#readme for more supported runtimes
-# gem 'therubyracer', platforms: :ruby
-
 # Use jquery as the JavaScript library
 gem 'jquery-rails'
 # Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
@@ -26,17 +23,10 @@ gem 'pg'
 
 gem 'devise'
 
-gem 'react-rails', '~> 1.0'
-gem 'sprockets', '>= 3.0.0'
-gem 'sprockets-es6'
-
-gem "haml-rails", "~> 0.9"
-
-# Use Unicorn as the app server
-# gem 'unicorn'
+gem 'browserify-rails'
 
-# Use Capistrano for deployment
-# gem 'capistrano-rails', group: :development
+# react specific gems
+gem 'react-rails', '~> 1.1.0'
 
 group :development, :test do
   # Call 'byebug' anywhere in the code to stop execution and get a debugger console

Gemfile.lock

@@ -40,7 +40,7 @@ GEM
     autoprefixer-rails (5.2.0.1)
       execjs
       json
-    babel-source (5.4.7)
+    babel-source (5.8.9)
     babel-transpiler (0.7.0)
       babel-source (>= 4.0, < 6)
       execjs (~> 2.0)
@@ -50,6 +50,9 @@ GEM
     bootstrap-sass (3.3.5)
       autoprefixer-rails (>= 5.0.0.1)
       sass (>= 3.2.19)
+    browserify-rails (1.2.0)
+      railties (>= 4.0.0, < 5.0)
+      sprockets (> 3.0.2)
     builder (3.2.2)
     byebug (5.0.0)
       columnize (= 0.9.0)
@@ -146,13 +149,13 @@ GEM
     rake (10.4.2)
     rdoc (4.2.0)
       json (~> 1.4)
-    react-rails (1.0.0)
+    react-rails (1.1.0)
+      babel-transpiler (>= 0.7.0)
       coffee-script-source (~> 1.8)
       connection_pool
       execjs
-      rails (>= 3.1)
-      react-source (~> 0.13)
-    react-source (0.13.3)
+      rails (>= 3.2)
+      tilt
     responders (2.1.0)
       railties (>= 4.2.0, < 5)
     rspec-core (3.2.0)
@@ -188,9 +191,6 @@ GEM
     spring (1.3.6)
     sprockets (3.2.0)
       rack (~> 1.0)
-    sprockets-es6 (0.6.2)
-      babel-transpiler
-      sprockets (>= 3.0.0)
     sprockets-rails (2.3.1)
       actionpack (>= 3.0)
       activesupport (>= 3.0)
@@ -222,8 +222,8 @@ PLATFORMS
 
 DEPENDENCIES
   bootstrap-sass (~> 3.3.5)
+  browserify-rails
   byebug
-  coffee-rails (~> 4.1.0)
   devise
   factory_girl_rails
   haml-rails (~> 0.9)
@@ -231,13 +231,11 @@ DEPENDENCIES
   jquery-rails
   pg
   rails (= 4.2.0)
-  react-rails (~> 1.0)
+  react-rails (~> 1.1.0)
   rspec-rails
   sass-rails (~> 5.0)
   sdoc (~> 0.4.0)
   spring
-  sprockets (>= 3.0.0)
-  sprockets-es6
   thin
   turbolinks
   uglifier (>= 1.3.0)

README.md

-# Setup
+# Basic Setup
 * Copy `config/database.yml.example` to `config/database.yml` and enter your database connection information.
 * Copy `.ruby-gemset.example` to `.ruby-gemset`.
 * Copy `.ruby-version.example` to `.ruby-version`.
@@ -6,7 +6,14 @@
 * Execute `bundle install`.
 * Execute `rake db:reset` (this creates and seeds the database).
 
+# JS Setup & Testing
+
+* Install `nvm` from https://github.com/creationix/nvm.
+* Execute `nvm install 0.10` (in order to work with jest).
+* Switch to newly installed node version (`nvm use`) if not already happened.
+* Execute `npm install`.
+* Execute `npm test`.
+
 # Available Seeds
 
 A user is seeded with email `test@ninjaconcept.com` and password `ninjaconcept`.
-

app/assets/javascripts/application.js

@@ -13,7 +13,5 @@
 //= require jquery
 //= require jquery_ujs
 //= require turbolinks
-//= require react
 //= require react_ujs
 //= require components
-//= require_tree .

app/assets/javascripts/components.js

-//= require_tree ./components
+//= require_self
+//= require react_ujs
+
+React = require('react');
+Test = require('./components/test');
+
+// fetch example
+fetch('/').then(function(response) {
+    return response.text()
+  }).then(function(body) {
+    console.log(body)
+  });
+
+// Immutable example
+const Immutable = require('immutable');
+var map = Immutable.Map({foo: 'bar'});
+console.log(map.get('foo'));
+
+// alt initialization
+const Alt = require('alt');
+const alt = new Alt();

app/assets/javascripts/components/__tests__/test-test.js

+// see also https://github.com/facebook/jest/blob/master/examples/react-es6/__tests__/CheckboxWithLabel-test.js
+// for an example
+jest.dontMock('../test');
+
+import React from 'react/addons';
+const Test = require('../test');
+var TestUtils = React.addons.TestUtils;
+
+describe('Test', () => {
+  it('should tell you it is a test component', () => {
+    var testComponent = TestUtils.renderIntoDocument(<Test/>);
+    var testComponentNode = React.findDOMNode(testComponent);
+    expect(testComponentNode.textContent).toBe('Something');
+  });
+});

app/assets/javascripts/components/test.js

+import React from 'react';
+import {Button} from 'react-bootstrap';
+
+class Test extends React.Component {
+  render() {
+    return(
+      <Button bsStyle="success" bsSize="small">
+        Something
+      </Button>
+    );
+  }
+}
+
+module.exports = Test;

app/assets/javascripts/components/test.js.jsx

-var Test = React.createClass({
-  render: function() {
-    return(
-      <div>
-        {this.props.name}
-      </div>
-    );
-  }
-});

package.json

+{
+  "name": "chemotion",
+  "dependencies" : {
+    "alt": "0.17.1",
+    "babelify": "6.1.3",
+    "browserify": "~> 10.2.4",
+    "browserify-incremental": "^3.0.1",
+    "immutable": "3.7.4",
+    "react": "0.13.3",
+    "react-router": "0.13.3",
+    "react-tools": "0.13.3",
+    "react-bootstrap": "0.24.2",
+    "whatwg-fetch": "0.9.0"
+  },
+  "browserify": {
+    "transform": ["babelify"]
+  },
+  "devDependencies": {
+    "babel-jest": "*",
+    "jest-cli": "*"
+  },
+  "scripts": {
+    "test": "jest"
+  },
+  "jest": {
+    "rootDir": ".",
+    "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
+    "moduleFileExtensions": [ "js", "json", "es6"],
+    "unmockedModulePathPatterns": [
+      "<rootDir>/node_modules/react",
+      "<rootDir>/node_modules/react-tools"
+    ],
+    "testFileExtensions": ["js", "es6"]
+  },
+  "license": "MIT",
+  "engines": {
+    "node": ">= 0.10"
+  }
+}