virtual-dom -> React

gulpfile.js

@@ -26,7 +26,8 @@ var config = {
   scripts: {
     source: './src/js/main.js',
     destination: './public/js/',
-    filename: 'bundle.js'
+    filename: 'bundle.js',
+    extensions: ['.jsx']
   },
   templates: {
     source: './src/jade/*.jade',
@@ -137,4 +138,4 @@ gulp.task('no-js', ['templates', 'styles', 'assets']);
 
 gulp.task('build', ['scripts', 'no-js']);
 
-gulp.task('default', ['watch', 'no-js', 'server']);
+gulp.task('default', ['watch', 'no-js', 'server']);

package.json

@@ -18,7 +18,7 @@
   "dependencies": {
     "axios": "^0.4.2",
     "lodash": "^2.4.1",
-    "virtual-dom": "^1.2.0"
+    "react": "^0.12.2"
   },
   "devDependencies": {
     "6to5ify": "^3.1.2",
@@ -48,13 +48,14 @@
     "karma-coffee-preprocessor": "~0.2.1",
     "karma-jasmine": "~0.2.2",
     "pretty-hrtime": "~0.2.2",
+    "reactify": "^1.0.0",
     "through2": "^0.6.3",
     "vinyl-source-stream": "~1.0.0",
     "watchify": "~2.0.0"
   },
   "browserify": {
     "transform": [
-      "./jsx-transform",
+      "reactify",
       "6to5ify",
       "debowerify",
       "deamdify"

src/jade/index.jade

@@ -57,7 +57,7 @@ html
       a(href='https://github.com/koodiklinikka/koodiklinikka.fi')
         i.fa.fa-github
 
-    .fader
+    #fade.fader
 
 
     script(src='js/bundle.js')

src/js/components/inviteForm.js

@@ -1,60 +0,0 @@
-'use strict';
-
-var {h} = require('virtual-dom');
-var classList = require('../util/classList');
-
-function render(props, state) {
-  var formClasses = classList({
-    'invite-form': true,
-    'has-success': state.submitted,
-    'has-error': state.error
-  });
-
-  var inputClasses = classList({
-    'input': true,
-    'has-success': state.submitted,
-    'has-error': state.error
-  });
-
-  var feedbackMessage;
-
-  if(state.error || state.submitted) {
-    let messageText;
-
-    if(state.submitted) {
-      messageText = 'Kutsu lähetetty antamaasi sähköpostiosoitteeseen.';
-    } else if(state.error.status === 400) {
-      messageText = 'Tarkasta syöttämäsi sähköpostiosoite';
-    } else {
-      messageText = 'Jotain meni pieleen. Yritä hetken päästä uudelleen.';
-    }
-
-    feedbackMessage = (
-      <div className='invite-form--message'>
-        {messageText}
-      </div>
-    );
-
-  }
-  return (
-    <form className={formClasses} onsubmit={props.onSubmit}>
-      <input
-        className={inputClasses}
-        type='text'
-        name='email'
-        placeholder='Email'
-        value={state.email}
-        onkeydown={props.onChange} />
-      <button
-        className='btn btn__submit'
-        type='submit'
-        title='Lähetä'
-        disabled={state.error || state.submitted}>
-        ⏎
-      </button>
-      {feedbackMessage}
-    </form>
-    )
-}
-
-module.exports = render;

src/js/components/inviteForm.jsx

@@ -0,0 +1,98 @@
+'use strict';
+
+var request = require('axios');
+var React = require('React/addons');
+var classSet = React.addons.classSet
+
+module.exports = React.createClass({
+  getInitialState() {
+    return {
+      email: '',
+      submitted: false,
+      error: null
+    };
+  },
+  onSubmit(e) {
+    e.preventDefault();
+
+    this.setState({
+      submitted: false,
+      error: null
+    });
+
+    request.post('/api/invites', {
+      email: this.state.email
+    })
+    .then(this.handleSuccess)
+    .catch(this.handleError);
+  },
+  handleSuccess() {
+    this.setState({submitted: true});
+  },
+  handleError(err) {
+    this.setState({error: err});
+  },
+  onChange(e) {
+    if(e.target.value === this.state.email) {
+      return;
+    }
+    this.setState({
+      email: e.target.value,
+      error: null,
+      submitted: false
+    });
+  },
+  render() {
+    var formClasses = classSet({
+      'invite-form': true,
+      'has-success': this.state.submitted,
+      'has-error': this.state.error
+    });
+
+    var inputClasses = classSet({
+      'input': true,
+      'has-success': this.state.submitted,
+      'has-error': this.state.error
+    });
+
+    var feedbackMessage;
+
+    if(this.state.error || this.state.submitted) {
+      let messageText;
+
+      if(this.state.submitted) {
+        messageText = 'Kutsu lähetetty antamaasi sähköpostiosoitteeseen.';
+      } else if(this.state.error.status === 400) {
+        messageText = 'Tarkasta syöttämäsi sähköpostiosoite';
+      } else {
+        messageText = 'Jotain meni pieleen. Yritä hetken päästä uudelleen.';
+      }
+
+      feedbackMessage = (
+        <div className='invite-form--message'>
+          {messageText}
+        </div>
+      );
+    }
+
+    return (
+      <form className={formClasses} onSubmit={this.onSubmit}>
+        <input
+          className={inputClasses}
+          type='text'
+          name='email'
+          placeholder='Email'
+          value={this.state.email}
+          onChange={this.onChange} />
+        <button
+          className='btn btn__submit'
+          type='submit'
+          title='Lähetä'
+          disabled={this.state.error || this.state.submitted}>
+          ⏎
+        </button>
+        {feedbackMessage}
+      </form>
+      )
+  }
+});

src/js/main.js

@@ -1,66 +1,9 @@
 'use strict';
-
 require('./ga');
 
-var _ = require('lodash');
-var request = require('axios');
-
-var inviteForm = require('./components/inviteForm');
-var {diff, patch, create} = require('virtual-dom');
-
-var state = {
-  email: '',
-  submitted: false,
-  error: null
-};
-
-function setState(newState) {
-  state = _.extend({}, state, newState);
-  rerender(state);
-}
-
-var props = {
-  onSubmit: function(e) {
-    e.preventDefault();
-
-    setState({
-      submitted: false,
-      error: null
-    });
-
-    request.post('/api/invites', {
-      email: state.email
-    }).then(function() {
-      setState({submitted: true});
-    }).catch(function(err) {
-      setState({error: err});
-    });
-  },
-  onChange: function(e) {
-    if(e.target.value === state.email) {
-      return;
-    }
-
-    setState({
-      email: e.target.value,
-      error: null,
-      submitted: false
-    });
-  },
-};
-
-var tree = inviteForm(props, state);
-var rootNode = create(tree);
-
-document
-  .getElementById('invite-form')
-  .appendChild(rootNode);
-
-function rerender() {
-  var newTree = inviteForm(props, state);
-  var patches = diff(tree, newTree);
-  rootNode = patch(rootNode, patches);
-  tree = newTree;
-}
+var React = require('React');
 
+React.render(
+  require('./components/inviteForm')(),
+  document.getElementById('invite-form'));
 

src/js/util/classList.js

@@ -1,11 +0,0 @@
-'use strict';
-
-module.exports = function classList(classesObj) {
-  var classes = [];
-  for(var key in classesObj) {
-    if(!!classesObj[key]) {
-      classes.push(key);
-    }
-  }
-  return classes.join(' ');
-};