diff --git a/internal_packages/composer-templates/lib/preferences-templates.cjsx b/internal_packages/composer-templates/lib/preferences-templates.cjsx
deleted file mode 100644
index 92cbb8381..000000000
--- a/internal_packages/composer-templates/lib/preferences-templates.cjsx
+++ /dev/null
@@ -1,265 +0,0 @@
-_ = require 'underscore'
-{Contenteditable, RetinaImg, Flexbox} = require 'nylas-component-kit'
-{AccountStore, Utils, React} = require 'nylas-exports'
-TemplateStore = require './template-store'
-TemplateEditor = require './template-editor'
-
-class PreferencesTemplates extends React.Component
-  @displayName: 'PreferencesTemplates'
-
-  constructor: (@props) ->
-    @_templateSaveQueue = {}
-
-    {templates, selectedTemplate, selectedTemplateName} = @_getStateFromStores()
-    @state =
-      editAsHTML: false
-      editState: if templates.length==0 then "new" else null
-      templates: templates
-      selectedTemplate: selectedTemplate
-      selectedTemplateName: selectedTemplateName
-      contents: null
-
-  componentDidMount: ->
-    @usub = TemplateStore.listen @_onChange
-
-  componentWillUnmount: ->
-    @usub()
-    if @state.selectedTemplate?
-      @_saveTemplateNow(@state.selectedTemplate.name, @state.contents)
-
-
-
-  #SAVING AND LOADING TEMPLATES
-  _loadTemplateContents: (template) =>
-    if template
-      TemplateStore.getTemplateContents(template.id, (contents) =>
-        @setState({contents: contents})
-      )
-
-  _saveTemplateNow: (name, contents, callback) =>
-    TemplateStore.saveTemplate(name, contents, callback)
-
-  _saveTemplateSoon: (name, contents) =>
-    @_templateSaveQueue[name] = contents
-    @_saveTemplatesFromCache()
-
-  __saveTemplatesFromCache: =>
-    for name, contents of @_templateSaveQueue
-      @_saveTemplateNow(name, contents)
-
-    @_templateSaveQueue = {}
-
-  _saveTemplatesFromCache: _.debounce(PreferencesTemplates::__saveTemplatesFromCache, 500)
-
-
-
-  # OVERALL STATE HANDLING
-  _onChange: =>
-    @setState @_getStateFromStores()
-
-  _getStateFromStores: ->
-    templates = TemplateStore.items()
-    #selectedTemplate = _.findWhere(templates, {id: @state?.selectedTemplate?.id}) || templates[0]
-
-    selectedTemplate = @state?.selectedTemplate
-    # deleted
-    if selectedTemplate? and selectedTemplate.id not in _.pluck(templates, "id")
-      selectedTemplate = null
-    # none selected
-    else if not selectedTemplate
-      selectedTemplate = if templates.length > 0 then templates[0] else null
-    @_loadTemplateContents(selectedTemplate)
-    if selectedTemplate
-      selectedTemplateName = @state?.selectedTemplateName || selectedTemplate.name
-    return {templates, selectedTemplate, selectedTemplateName}
-
-
-
-  # TEMPLATE CONTENT EDITING
-
-  _onEditTemplate: (event) =>
-    html = event.target.value
-    @setState contents: html
-    if @state.selectedTemplate?
-      @_saveTemplateSoon(@state.selectedTemplate.name, html)
-
-
-  _onSelectTemplate: (event) =>
-    if @state.selectedTemplate?
-      @_saveTemplateNow(@state.selectedTemplate.name, @state.contents)
-    selectedTemplate = null
-    for template in @state.templates
-      if template.id == event.target.value
-        selectedTemplate = template
-    @setState
-      selectedTemplate: selectedTemplate
-      selectedTemplateName: selectedTemplate?.name
-      contents: null
-    @_loadTemplateContents(selectedTemplate)
-
-  _renderTemplatePicker: ->
-    options = @state.templates.map (template) ->
-      <option value={template.id} key={template.id}>{template.name}</option>
-
-    <select value={@state.selectedTemplate?.id} onChange={@_onSelectTemplate}>
-      {options}
-    </select>
-
-  _renderEditableTemplate: ->
-    <Contenteditable
-       ref="templateInput"
-       value={@state.contents || ""}
-       onChange={@_onEditTemplate}
-       extensions={[TemplateEditor]}
-       spellcheck={false} />
-
-  _renderHTMLTemplate: ->
-    <textarea ref="templateHTMLInput"
-              value={@state.contents || ""}
-              onChange={@_onEditTemplate}/>
-
-  _renderModeToggle: ->
-    if @state.editAsHTML
-      return <a onClick={=> @setState(editAsHTML: false); return}>Edit live preview</a>
-    else
-      return <a onClick={=> @setState(editAsHTML: true); return}>Edit raw HTML</a>
-
-
-
-  # TEMPLATE NAME EDITING
-  _renderEditName: ->
-    <div className="section-title">
-      Template Name: <input type="text" className="template-name-input" value={@state.selectedTemplateName} onChange={@_onEditName}/>
-      <button className="btn template-name-btn" onClick={@_saveName}>Save Name</button>
-      <button className="btn template-name-btn" onClick={@_cancelEditName}>Cancel</button>
-    </div>
-
-  _renderName: ->
-    rawText = if @state.editAsHTML then "Raw HTML " else ""
-    <div className="section-title">
-      {rawText}Template: {@_renderTemplatePicker()}
-      <button className="btn template-name-btn" title="New template" onClick={@_startNewTemplate}>New</button>
-      <button className="btn template-name-btn" onClick={ => @setState(editState: "name") }>Rename</button>
-    </div>
-
-  _onEditName: =>
-    @setState({selectedTemplateName: event.target.value})
-
-  _cancelEditName: =>
-    @setState
-      selectedTemplateName: @state.selectedTemplate?.name
-      editState: null
-
-  _saveName: =>
-    if @state.selectedTemplate?.name != @state.selectedTemplateName
-      TemplateStore.renameTemplate(@state.selectedTemplate.name, @state.selectedTemplateName, (renamedTemplate) =>
-        @setState
-          selectedTemplate: renamedTemplate
-          editState: null
-      )
-    else
-      @setState
-        editState: null
-
-
-  # DELETE AND NEW
-  _deleteTemplate: =>
-    numTemplates = @state.templates.length
-    if @state.selectedTemplate?
-      TemplateStore.deleteTemplate(@state.selectedTemplate.name)
-    if numTemplates==1
-      @setState
-        editState: "new"
-        selectedTemplate: null
-        selectedTemplateName: ""
-        contents: ""
-
-  _startNewTemplate: =>
-    @setState
-      editState: "new"
-      selectedTemplate: null
-      selectedTemplateName: ""
-      contents: ""
-
-  _saveNewTemplate: =>
-    TemplateStore.saveNewTemplate(@state.selectedTemplateName, @state.contents || "", (template) =>
-      @setState
-        selectedTemplate: template
-        editState: null
-    )
-
-  _cancelNewTemplate: =>
-    template = if @state.templates.length>0 then @state.templates[0] else null
-    @setState
-      selectedTemplate: template
-      selectedTemplateName: template?.name
-      editState: null
-    @_loadTemplateContents(template)
-
-  _renderCreateNew: ->
-    cancel = <button className="btn template-name-btn" onClick={@_cancelNewTemplate}>Cancel</button>
-    <div className="section-title">
-      Template Name: <input type="text" className="template-name-input" value={@state.selectedTemplateName} onChange={@_onEditName}/>
-      <button className="btn btn-emphasis template-name-btn" onClick={@_saveNewTemplate}>Save</button>
-      {if @state.templates.length then cancel}
-    </div>
-
-
-  # MAIN RENDER
-  render: =>
-    deleteBtn =
-      <button className="btn" title="Delete template" onClick={@_deleteTemplate}>
-        <RetinaImg name="icon-composer-trash.png" mode={RetinaImg.Mode.ContentIsMask} />
-      </button>
-
-    editor =
-      <div>
-        <div className="template-wrap">
-          {if @state.editAsHTML then @_renderHTMLTemplate() else @_renderEditableTemplate()}
-        </div>
-        <div style={marginTop: "5px"}>
-          <span className="editor-note">
-            { if _.size(@_templateSaveQueue) > 0 then "Saving changes..." else "Changes saved." }
-          </span>
-          <span style={float:"right"}>{if @state.editState == null then deleteBtn else ""}</span>
-        </div>
-        <div className="toggle-mode" style={marginTop: "1em"}>
-          {@_renderModeToggle()}
-        </div>
-      </div>
-
-    noTemplatesMessage =
-      <div className="template-status-bar no-templates-message">
-        You don't have any templates! Enter a template name and press Save to create one.
-      </div>
-
-    <div className="container-templates">
-      <section style={if @state.editState is "new" then {marginBottom:50}}>
-        {
-          switch @state.editState
-            when "name" then @_renderEditName()
-            when "new" then @_renderCreateNew()
-            else @_renderName()
-        }
-        {if @state.editState isnt "new" then editor}
-        {if @state.templates.length==0 then noTemplatesMessage}
-      </section>
-
-      <section className="templates-instructions">
-        <p>
-          The Quick Replies plugin allows you to create templated email replies, with variables that
-          you can quickly fill in before sending your email message. To create a variable, type a set of double curly
-          brackets wrapping the variable's name, like this: <strong>{"{{"}variable_name{"}}"}</strong>
-        </p>
-        <p>
-          Reply templates are saved in the <strong>~/.nylas/templates</strong> directory on your computer. Each template
-          is an HTML file - the name of the file is the name of the template, and its contents are the default message body.
-        </p>
-        <p>
-          In raw HTML, variables are defined as HTML &lt;code&gt; tags with class "var empty". Typing curly brackets creates a tag
-          automatically. The code tags are colored yellow to show the variable regions, but will be stripped out before the message is sent.
-        </p>
-      </section>
-    </div>
-
-module.exports = PreferencesTemplates
diff --git a/internal_packages/composer-templates/lib/preferences-templates.jsx b/internal_packages/composer-templates/lib/preferences-templates.jsx
new file mode 100644
index 000000000..7bd746a3d
--- /dev/null
+++ b/internal_packages/composer-templates/lib/preferences-templates.jsx
@@ -0,0 +1,325 @@
+import _ from 'underscore';
+import {Contenteditable, RetinaImg} from 'nylas-component-kit';
+import {React} from 'nylas-exports';
+
+import TemplateStore from './template-store';
+import TemplateEditor from './template-editor';
+
+
+class PreferencesTemplates extends React.Component {
+  static displayName = 'PreferencesTemplates';
+
+  constructor() {
+    super();
+    this._templateSaveQueue = {};
+
+    const {templates, selectedTemplate, selectedTemplateName} = this._getStateFromStores();
+    this.state = {
+      editAsHTML: false,
+      editState: templates.length === 0 ? "new" : null,
+      templates: templates,
+      selectedTemplate: selectedTemplate,
+      selectedTemplateName: selectedTemplateName,
+      contents: null,
+    };
+  }
+
+  componentDidMount() {
+    this.unsub = TemplateStore.listen(this._onChange);
+  }
+
+  componentWillUnmount() {
+    this.unsub();
+    if (this.state.selectedTemplate) {
+      this._saveTemplateNow(this.state.selectedTemplate.name, this.state.contents);
+    }
+  }
+
+  // SAVING AND LOADING TEMPLATES
+  _loadTemplateContents = (template) => {
+    if (template) {
+      TemplateStore.getTemplateContents(template.id, (contents) => {
+        this.setState({contents: contents});
+      });
+    }
+  }
+
+  _saveTemplateNow(name, contents, callback) {
+    TemplateStore.saveTemplate(name, contents, callback);
+  }
+
+  _saveTemplateSoon(name, contents) {
+    this._templateSaveQueue[name] = contents;
+    this._saveTemplatesFromCache();
+  }
+
+  __saveTemplatesFromCache() {
+    for (const name in this._templateSaveQueue) {
+      if (this._templateSaveQueue.hasOwnProperty(name)) {
+        this._saveTemplateNow(name, this._templateSaveQueue[name]);
+      }
+    }
+    this._templateSaveQueue = {};
+  }
+
+  _saveTemplatesFromCache = _.debounce(PreferencesTemplates.prototype.__saveTemplatesFromCache, 500);
+
+  // OVERALL STATE HANDLING
+  _onChange = () => {
+    this.setState(this._getStateFromStores());
+  }
+
+  _getStateFromStores() {
+    const templates = TemplateStore.items();
+    let selectedTemplate = this.state ? this.state.selectedTemplate : null;
+    if (selectedTemplate && _.pluck(templates, "id").indexOf(selectedTemplate.id) === -1) {
+      selectedTemplate = null;
+    } else if (!selectedTemplate) {
+      selectedTemplate = templates.length > 0 ? templates[0] : null;
+    }
+    this._loadTemplateContents(selectedTemplate);
+    let selectedTemplateName = null;
+    if (selectedTemplate) {
+      selectedTemplateName = this.state ? this.state.selectedTemplateName : selectedTemplate.name;
+    }
+    return {templates, selectedTemplate, selectedTemplateName};
+  }
+
+  // TEMPLATE CONTENT EDITING
+  _onEditTemplate = (event) => {
+    const html = event.target.value;
+    this.setState({contents: html});
+    if (this.state.selectedTemplate) {
+      this._saveTemplateSoon(this.state.selectedTemplate.name, html);
+    }
+  }
+
+
+  _onSelectTemplate = (event) => {
+    if (this.state.selectedTemplate) {
+      this._saveTemplateNow(this.state.selectedTemplate.name, this.state.contents);
+    }
+    let selectedTemplate = null;
+    for (const template in this.state.templates) {
+      if (template.id === event.target.value) {
+        selectedTemplate = template;
+      }
+    }
+    this.setState({
+      selectedTemplate: selectedTemplate,
+      selectedTemplateName: selectedTemplate ? selectedTemplate.name : null,
+      contents: null,
+    });
+    this._loadTemplateContents(selectedTemplate);
+  }
+
+  _renderTemplatePicker() {
+    const options = this.state.templates.map((template) => {
+      return <option value={template.id} key={template.id}>{template.name}</option>
+    });
+
+    return (
+      <select value={this.state.selectedTemplate ? this.state.selectedTemplate.id : null} onChange={this._onSelectTemplate}>
+        {options}
+      </select>
+    );
+  }
+
+  _renderEditableTemplate() {
+    return (
+      <Contenteditable
+         ref="templateInput"
+         value={this.state.contents || ""}
+         onChange={this._onEditTemplate}
+         extensions={[TemplateEditor]}
+         spellcheck={false} />
+    );
+  }
+
+  _renderHTMLTemplate() {
+    return (
+      <textarea ref="templateHTMLInput"
+                value={this.state.contents || ""}
+                onChange={this._onEditTemplate}/>
+    );
+  }
+
+  _renderModeToggle() {
+    if (this.state.editAsHTML) {
+      return (<a onClick={() => {this.setState({editAsHTML: false});}}>Edit live preview</a>);
+    }
+    return (<a onClick={() => {this.setState({editAsHTML: true});}}>Edit raw HTML</a>);
+  }
+
+  // TEMPLATE NAME EDITING
+  _renderEditName() {
+    return (
+      <div className="section-title">
+        Template Name: <input type="text" className="template-name-input" value={this.state.selectedTemplateName} onChange={this._onEditName}/>
+        <button className="btn template-name-btn" onClick={this._saveName}>Save Name</button>
+        <button className="btn template-name-btn" onClick={this._cancelEditName}>Cancel</button>
+      </div>
+    );
+  }
+
+  _renderName() {
+    const rawText = this.state.editAsHTML ? "Raw HTML " : "";
+    return (
+      <div className="section-title">
+        {rawText}Template: {this._renderTemplatePicker()}
+        <button className="btn template-name-btn" title="New template" onClick={this._startNewTemplate}>New</button>
+        <button className="btn template-name-btn" onClick={() => {this.setState({editState: "name"});}}>Rename</button>
+      </div>
+    );
+  }
+
+  _onEditName = (event) => {
+    this.setState({selectedTemplateName: event.target.value});
+  }
+
+  _cancelEditName = () => {
+    this.setState({
+      selectedTemplateName: this.state.selectedTemplate ? this.state.selectedTemplate.name : null,
+      editState: null,
+    });
+  }
+
+  _saveName = () => {
+    if (this.state.selectedTemplate && this.state.selectedTemplate.name !== this.state.selectedTemplateName) {
+      TemplateStore.renameTemplate(this.state.selectedTemplate.name, this.state.selectedTemplateName, (renamedTemplate) => {
+        this.setState({
+          selectedTemplate: renamedTemplate,
+          editState: null,
+        });
+      });
+    } else {
+      this.setState({
+        editState: null,
+      });
+    }
+  }
+
+  // DELETE AND NEW
+  _deleteTemplate = () => {
+    const numTemplates = this.state.templates.length;
+    if (this.state.selectedTemplate) {
+      TemplateStore.deleteTemplate(this.state.selectedTemplate.name);
+    }
+    if (numTemplates === 1) {
+      this.setState({
+        editState: "new",
+        selectedTemplate: null,
+        selectedTemplateName: "",
+        contents: "",
+      });
+    }
+  }
+
+  _startNewTemplate = () => {
+    this.setState({
+      editState: "new",
+      selectedTemplate: null,
+      selectedTemplateName: "",
+      contents: "",
+    });
+  }
+
+  _saveNewTemplate = () => {
+    TemplateStore.saveNewTemplate(this.state.selectedTemplateName, this.state.contents || "", (template) => {
+      this.setState({
+        selectedTemplate: template,
+        editState: null,
+      });
+    });
+  }
+
+  _cancelNewTemplate = () => {
+    const template = this.state.templates.length > 0 ? this.state.templates[0] : null;
+    this.setState({
+      selectedTemplate: template,
+      selectedTemplateName: template ? template.name : null,
+      editState: null,
+    });
+    this._loadTemplateContents(template);
+  }
+
+  _renderCreateNew() {
+    const cancel = (<button className="btn template-name-btn" onClick={this._cancelNewTemplate}>Cancel</button>);
+    return (
+      <div className="section-title">
+        Template Name: <input type="text" className="template-name-input" value={this.state.selectedTemplateName} onChange={this._onEditName}/>
+        <button className="btn btn-emphasis template-name-btn" onClick={this._saveNewTemplate}>Save</button>
+        {this.state.templates.length ? cancel : null}
+      </div>
+    );
+  }
+
+  // MAIN RENDER
+  render() {
+    const deleteBtn = (
+      <button className="btn" title="Delete template" onClick={this._deleteTemplate}>
+        <RetinaImg name="icon-composer-trash.png" mode={RetinaImg.Mode.ContentIsMask} />
+      </button>
+    );
+
+    const editor = (
+      <div>
+        <div className="template-wrap">
+          {this.state.editAsHTML ? this._renderHTMLTemplate() : this._renderEditableTemplate()}
+        </div>
+        <div style={{marginTop: "5px"}}>
+          <span className="editor-note">
+            {_.size(this._templateSaveQueue) > 0 ? "Saving changes..." : "Changes saved."}
+          </span>
+          <span style={{float: "right"}}>{this.state.editState === null ? deleteBtn : ""}</span>
+        </div>
+        <div className="toggle-mode" style={{marginTop: "1em"}}>
+          {this._renderModeToggle()}
+        </div>
+      </div>
+    );
+
+    let editContainer = this._renderName();
+    if (this.state.editState === "name") {
+      editContainer = this._renderEditName();
+    } else if (this.state.editState === "new") {
+      editContainer = this._renderCreateNew();
+    }
+
+    const noTemplatesMessage = (
+      <div className="template-status-bar no-templates-message">
+        {`You don't have any templates! Enter a template name and press save to create one.`}
+      </div>
+    );
+
+    return (
+      <div className="container-templates">
+        <section style={this.state.editState === "new" ? {marginBottom: 50} : null}>
+          {editContainer}
+          {this.state.editState !== "new" ? editor : null}
+          {this.state.templates.length === 0 ? noTemplatesMessage : null}
+        </section>
+
+        <section className="templates-instructions">
+          <p>
+            The Quick Replies plugin allows you to create templated email replies, with variables that
+            you can quickly replace before sending your email message. {`To create a variable, type a set of double curly
+            brackets wrapping the variable's name, like this`}: <strong>{"{{"}variable_name{"}}"}</strong>
+          </p>
+          <p>
+            Reply templates are saved in the <strong>~/.nylas/templates</strong> directory on your computer. Each template
+            is an HTML file—the name of the file is the name of the template, and its contents are the default message body.
+          </p>
+          <p>
+            In raw HTML, variables are defined as HTML &lt;code&gt; tags with class "var empty". Typing curly brackets creates a tag
+            automatically. The code tags are colored yellow to show the variable regions but will be removed before the message is
+            sent.
+          </p>
+        </section>
+      </div>
+    );
+  }
+
+}
+
+export default PreferencesTemplates;