Restructure folders in components/ and try to resist rewriting the whole app from scratch.

package.json

@@ -23,7 +23,8 @@
   "dependencies": {
     "babel-polyfill": "^6.13.0",
     "bulma": "^0.2.3",
-    "inferno": "^1.0.3",
+    "dexie": "^1.5.1",
+    "inferno": "^1.5.6",
     "inferno-component": "^1.0.3",
     "json-query": "^2.2.0",
     "marked": "^0.3.6",

src/components/display/FixedPage.jsx

@@ -2,7 +2,7 @@
 import Inferno from 'inferno';
 import Component from 'inferno-component';
 
-import {Button} from './Button';
+import {Button} from '../input/Button';
 
 // Creates a page that floats above other elements when a connected button is clicked.
 // export class FixedPage extends React.Component {

src/components/display/InfoDisplay.jsx

@@ -3,8 +3,8 @@ import Inferno from 'inferno';
 import Component from 'inferno-component';
 import marked from 'marked';
 
-import {WordForm} from './WordForm';
-import {Button} from './Button';
+import {WordForm} from '../forms/WordForm';
+import {Button} from '../input/Button';
 
 const saveIcon = <i>&#128190;</i>;
 const editIcon = <i>&#128393;</i>;

src/components/display/Word.jsx

@@ -3,8 +3,8 @@ import Inferno from 'inferno';
 import Component from 'inferno-component';
 import marked from 'marked';
 
-import {WordForm} from './WordForm';
-import {Button} from './Button';
+import {WordForm} from '../forms/WordForm';
+import {Button} from '../input/Button';
 
 const saveIcon = <i>&#128190;</i>;
 const editIcon = <i>&#128393;</i>;

src/components/forms/EditDictionaryForm.jsx

@@ -2,11 +2,11 @@
 import Inferno from 'inferno';
 import Component from 'inferno-component';
 
-import {Input} from './Input';
-import {TextArea} from './TextArea';
-import {Checkbox} from './Checkbox';
-import {Button} from './Button';
-import {FixedPage} from './FixedPage';
+import {Input} from '../input/Input';
+import {TextArea} from '../input/TextArea';
+import {Checkbox} from '../input/Checkbox';
+import {Button} from '../input/Button';
+import {FixedPage} from '../display/FixedPage';
 
 // A component that allows you to edit the dictionary's details and settings.
 // export class EditDictionaryForm extends React.Component {

src/components/forms/EditWordForm.jsx

@@ -2,8 +2,8 @@
 import Inferno from 'inferno';
 import Component from 'inferno-component';
 
-import {Input} from './Input';
-import {TextArea} from './TextArea';
+import {Input} from '../input/Input';
+import {TextArea} from '../input/TextArea';
 
 import {WordForm} from './WordForm';
 

src/components/forms/WordForm.jsx

@@ -2,12 +2,12 @@
 import Inferno from 'inferno';
 import Component from 'inferno-component';
 
-import {keyCodeFor} from '../js/helpers'
+import {keyCodeFor} from '../../js/helpers'
 
-import {Input} from './Input';
-import {Dropdown} from './Dropdown';
-import {TextArea} from './TextArea';
-import {Button} from './Button';
+import {Input} from '../input/Input';
+import {Dropdown} from '../input/Dropdown';
+import {TextArea} from '../input/TextArea';
+import {Button} from '../input/Button';
 
 // export class WordForm extends React.Component {
 export class WordForm extends Component {

src/components/input/Dropdown.jsx

@@ -2,7 +2,7 @@
 import Inferno from 'inferno';
 import {Input} from './Input';
 
-import {htmlEntities} from '../js/helpers';
+import {htmlEntities} from '../../js/helpers';
 
 export class Dropdown extends Input {
   constructor(props) {

src/components/input/TextArea.jsx

@@ -2,9 +2,9 @@
 import Inferno, {linkEvent} from 'inferno';
 import {Input} from './Input';
 
-import {getInputSelection, setSelectionRange} from '../js/helpers';
+import {getInputSelection, setSelectionRange} from '../../js/helpers';
 import {Button} from './Button';
-import {FixedPage} from './FixedPage';
+import {FixedPage} from '../display/FixedPage';
 
 export class TextArea extends Input {
   constructor(props) {

src/components/structure/Dictionary.jsx

@@ -2,7 +2,7 @@
 import Inferno from 'inferno';
 import Component from 'inferno-component';
 
-import {Word} from './Word';
+import {Word} from '../display/Word';
 
 // A component for showing just the list of words provided to it as a prop.
 // export class Dictionary extends React.Component {

src/components/structure/Footer.jsx

@@ -3,7 +3,7 @@ import Inferno from 'inferno';
 import Component from 'inferno-component';
 import marked from 'marked';
 
-import {FixedPage} from './FixedPage';
+import {FixedPage} from '../display/FixedPage';
 
 // A component for the site footer
 // export class Footer extends React.Component {

src/components/structure/Header.jsx

@@ -3,8 +3,8 @@ import Inferno from 'inferno';
 import Component from 'inferno-component';
 import marked from 'marked';
 
-import {Button} from './Button';
-import {FixedPage} from './FixedPage';
+import {Button} from '../input/Button';
+import {FixedPage} from '../display/FixedPage';
 
 // A component for the site header
 // export class Header extends React.Component {

src/index.jsx

@@ -9,13 +9,13 @@ import Inferno from 'inferno';
 import Component from 'inferno-component';
 
 // Import the necessary components.
-import {Header} from './components/Header';
-import {Footer} from './components/Footer';
-import {WordForm} from './components/WordForm';
-import {Button} from './components/Button';
-import {InfoDisplay} from './components/InfoDisplay';
-import {EditDictionaryForm} from './components/EditDictionaryForm';
-import {Dictionary} from './components/Dictionary';
+import {Header} from './components/structure/Header';
+import {Footer} from './components/structure/Footer';
+import {WordForm} from './components/forms/WordForm';
+import {Button} from './components/input/Button';
+import {InfoDisplay} from './components/display/InfoDisplay';
+import {EditDictionaryForm} from './components/forms/EditDictionaryForm';
+import {Dictionary} from './components/structure/Dictionary';
 
 // Import the helper functions needed for this file.
 import {dynamicSort} from './js/helpers';