diff --git a/package.json b/package.json
index 7a84be4c..e885e794 100644
--- a/package.json
+++ b/package.json
@@ -8,8 +8,8 @@
     "build:codecs": "npm run build:mozjpeg_enc",
     "start": "webpack serve --host 0.0.0.0 --hot",
     "build": "webpack -p",
-    "lint": "tslint -c tslint.json -t verbose 'src/**/*.{ts,js}'",
-    "lintfix": "tslint -c tslint.json -t verbose --fix 'src/**/*.{ts,js}'"
+    "lint": "tslint -c tslint.json -t verbose 'src/**/*.{ts,tsx,js,jsx}'",
+    "lintfix": "tslint -c tslint.json -t verbose --fix 'src/**/*.{ts,tsx,js,jsx}'"
   },
   "husky": {
     "hooks": {
diff --git a/src/components/app/custom-els/FileDrop/index.ts b/src/components/App/custom-els/FileDrop/index.ts
similarity index 100%
rename from src/components/app/custom-els/FileDrop/index.ts
rename to src/components/App/custom-els/FileDrop/index.ts
diff --git a/src/components/app/custom-els/FileDrop/missing-types.d.ts b/src/components/App/custom-els/FileDrop/missing-types.d.ts
similarity index 100%
rename from src/components/app/custom-els/FileDrop/missing-types.d.ts
rename to src/components/App/custom-els/FileDrop/missing-types.d.ts
diff --git a/src/components/app/custom-els/FileDrop/styles.css b/src/components/App/custom-els/FileDrop/styles.css
similarity index 100%
rename from src/components/app/custom-els/FileDrop/styles.css
rename to src/components/App/custom-els/FileDrop/styles.css
diff --git a/src/components/app/index.tsx b/src/components/App/index.tsx
similarity index 99%
rename from src/components/app/index.tsx
rename to src/components/App/index.tsx
index 46b5c8f7..4de9c889 100644
--- a/src/components/app/index.tsx
+++ b/src/components/App/index.tsx
@@ -3,8 +3,8 @@ import { partial } from 'filesize';
 
 import { bind, bitmapToImageData } from '../../lib/util';
 import * as style from './style.scss';
-import Output from '../output';
-import Options from '../options';
+import Output from '../Output';
+import Options from '../Options';
 import { FileDropEvent } from './custom-els/FileDrop';
 import './custom-els/FileDrop';
 
diff --git a/src/components/app/style.scss b/src/components/App/style.scss
similarity index 100%
rename from src/components/app/style.scss
rename to src/components/App/style.scss
diff --git a/src/components/options/index.tsx b/src/components/Options/index.tsx
similarity index 98%
rename from src/components/options/index.tsx
rename to src/components/Options/index.tsx
index 0db23970..a2990d11 100644
--- a/src/components/options/index.tsx
+++ b/src/components/Options/index.tsx
@@ -68,6 +68,7 @@ export default class Options extends Component<Props, State> {
   }
 
   render({ class: className, encoderState, onOptionsChange }: Props, { encoderSupportMap }: State) {
+    // tslint:disable variable-name
     const EncoderOptionComponent = encoderOptionsComponentMap[encoderState.type];
 
     return (
diff --git a/src/components/options/style.scss b/src/components/Options/style.scss
similarity index 100%
rename from src/components/options/style.scss
rename to src/components/Options/style.scss
diff --git a/src/components/output/custom-els/PinchZoom/index.ts b/src/components/Output/custom-els/PinchZoom/index.ts
similarity index 100%
rename from src/components/output/custom-els/PinchZoom/index.ts
rename to src/components/Output/custom-els/PinchZoom/index.ts
diff --git a/src/components/output/custom-els/PinchZoom/missing-types.d.ts b/src/components/Output/custom-els/PinchZoom/missing-types.d.ts
similarity index 100%
rename from src/components/output/custom-els/PinchZoom/missing-types.d.ts
rename to src/components/Output/custom-els/PinchZoom/missing-types.d.ts
diff --git a/src/components/output/custom-els/PinchZoom/styles.css b/src/components/Output/custom-els/PinchZoom/styles.css
similarity index 100%
rename from src/components/output/custom-els/PinchZoom/styles.css
rename to src/components/Output/custom-els/PinchZoom/styles.css
diff --git a/src/components/output/custom-els/TwoUp/index.ts b/src/components/Output/custom-els/TwoUp/index.ts
similarity index 100%
rename from src/components/output/custom-els/TwoUp/index.ts
rename to src/components/Output/custom-els/TwoUp/index.ts
diff --git a/src/components/output/custom-els/TwoUp/missing-types.d.ts b/src/components/Output/custom-els/TwoUp/missing-types.d.ts
similarity index 100%
rename from src/components/output/custom-els/TwoUp/missing-types.d.ts
rename to src/components/Output/custom-els/TwoUp/missing-types.d.ts
diff --git a/src/components/output/custom-els/TwoUp/styles.css b/src/components/Output/custom-els/TwoUp/styles.css
similarity index 100%
rename from src/components/output/custom-els/TwoUp/styles.css
rename to src/components/Output/custom-els/TwoUp/styles.css
diff --git a/src/components/output/index.tsx b/src/components/Output/index.tsx
similarity index 86%
rename from src/components/output/index.tsx
rename to src/components/Output/index.tsx
index 7728f319..88884ec3 100644
--- a/src/components/output/index.tsx
+++ b/src/components/Output/index.tsx
@@ -3,7 +3,7 @@ import PinchZoom from './custom-els/PinchZoom';
 import './custom-els/PinchZoom';
 import './custom-els/TwoUp';
 import * as style from './style.scss';
-import { bind, drawBitmapToCanvas } from '../../lib/util';
+import { bind, drawBitmapToCanvas, linkRef } from '../../lib/util';
 import { twoUpHandle } from './custom-els/TwoUp/styles.css';
 
 type Props = {
@@ -92,11 +92,21 @@ export default class Output extends Component<Props, State> {
           onMouseDownCapture={this.onRetargetableEvent}
           onWheelCapture={this.onRetargetableEvent}
         >
-          <pinch-zoom onChange={this.onPinchZoomLeftChange} ref={p => this.pinchZoomLeft = p as PinchZoom}>
-            <canvas class={style.outputCanvas} ref={c => this.canvasLeft = c as HTMLCanvasElement} width={leftImg.width} height={leftImg.height} />
+          <pinch-zoom onChange={this.onPinchZoomLeftChange} ref={linkRef(this, 'pinchZoomLeft')}>
+            <canvas
+              class={style.outputCanvas}
+              ref={linkRef(this, 'canvasLeft')}
+              width={leftImg.width}
+              height={leftImg.height}
+            />
           </pinch-zoom>
-          <pinch-zoom ref={p => this.pinchZoomRight = p as PinchZoom}>
-            <canvas class={style.outputCanvas} ref={c => this.canvasRight = c as HTMLCanvasElement} width={rightImg.width} height={rightImg.height} />
+          <pinch-zoom ref={linkRef(this, 'pinchZoomRight')}>
+            <canvas
+              class={style.outputCanvas}
+              ref={linkRef(this, 'canvasRight')}
+              width={rightImg.width}
+              height={rightImg.height}
+            />
           </pinch-zoom>
         </two-up>
       </div>
diff --git a/src/components/output/style.scss b/src/components/Output/style.scss
similarity index 100%
rename from src/components/output/style.scss
rename to src/components/Output/style.scss
diff --git a/src/index.tsx b/src/index.tsx
index 70aaaa43..2cff1229 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,7 +1,7 @@
 import { h, render } from 'preact';
 import './lib/fix-pmc';
 import './style';
-import App from './components/app';
+import App from './components/App';
 
 // Find the outermost Element in our server-rendered HTML structure.
 let root = document.querySelector('#app') || undefined;
@@ -15,8 +15,9 @@ if (process.env.NODE_ENV === 'development') {
   require('preact/debug');
 
   // When an update to any module is received, re-import the app and trigger a full re-render:
-  module.hot.accept('./components/app', () => {
-    import('./components/app').then(({ default: App }) => {
+  module.hot.accept('./components/App', () => {
+    // tslint:disable-next-line variable-name
+    import('./components/App').then(({ default: App }) => {
       root = render(<App />, document.body, root);
     });
   });
diff --git a/src/lib/util.ts b/src/lib/util.ts
index 0e5dc6eb..4a007b6a 100644
--- a/src/lib/util.ts
+++ b/src/lib/util.ts
@@ -25,6 +25,22 @@ export function bind(target: any, propertyKey: string, descriptor: PropertyDescr
   };
 }
 
+/** Creates a function ref that assigns its value to a given property of an object.
+ *  @example
+ *  // element is stored as `this.foo` when rendered.
+ *  <div ref={linkRef(this, 'foo')} />
+ */
+export function linkRef<T>(obj: any, name: string) {
+  const refName = `$$ref_${name}`;
+  let ref = obj[refName];
+  if (!ref) {
+    ref = obj[refName] = (c: T) => {
+      obj[name] = c;
+    };
+  }
+  return ref;
+}
+
 /**
  * Turns a given `ImageBitmap` into `ImageData`.
  */
diff --git a/tslint.json b/tslint.json
index a1f7e1f1..75c31656 100644
--- a/tslint.json
+++ b/tslint.json
@@ -9,7 +9,9 @@
     "jsx-no-bind": true,
     "jsx-no-lambda": true,
     "function-name": false,
-    "variable-name": [true, "check-format", "allow-leading-underscore"]
+    "variable-name": [true, "check-format", "allow-leading-underscore"],
+    "no-duplicate-imports": false,
+    "import-name": false
   },
   "linterOptions": {
     "exclude": [