Having trouble getting the Dictionary component to render its list of words at all, let alone re-render when it's updated.

Added working header and button components, made sass imports work by putting _ before the .scss files to import.

src/components/Button.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+export class Button extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  processClasses() {
+    var classes = 'clickable';
+
+    if (this.props.classes) {
+      classes += ' ' + this.props.classes;
+    }
+
+    return classes;
+  }
+
+  render() {
+    return (
+      <span
+        id={this.props.id}
+        className={this.processClasses()}
+        onClick={this.props.action}>
+        {this.props.label}
+      </span>
+    );
+  }
+}
+
+Button.defaultProps = {
+  action: () => console.log('no action bound to button')
+}

src/components/Dictionary.jsx

@@ -0,0 +1,107 @@
+import React from 'react';
+
+import {Word} from './Word';
+import {Button} from './Button';
+
+export class Dictionary extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      name: "New",
+      description: "A new dictionary.",
+      createdBy: 'Someone',
+      words: [{
+        name: 'word',
+        pronunciation: 'pronunciation',
+        partOfSpeech: 'partOfSpeech',
+        simpleDefinition: 'simpleDefinition',
+        longDefinition: 'longDefinition',
+        wordId: 'wordId'
+      }],
+      nextWordId: 1,
+      externalID: 0,
+      allowDuplicates: false,
+      caseSensitive: false,
+      partsOfSpeech: "Noun,Adjective,Verb,Adverb,Preposition,Pronoun,Conjunction",
+      sortByEquivalent: false,
+      isComplete: false,
+      isPublic: false
+    }
+
+    // this.addTestWord();
+  }
+
+  showWords() {
+    let words = this.state.words.map((word, index) => {
+      <Word key={'dictionaryEntry' + index.toString()}
+        name={word.name}
+        wordId={word.wordId}
+        pronunciation={word.pronunciation}
+        partOfSpeech={word.partOfSpeech}
+        simpleDefinition={word.simpleDefinition}
+        longDefinition={word.longDefinition}
+        initialPosition={index} />
+    });
+
+    return <div>{words}</div>;
+  }
+
+  addTestWord() {
+    this.setState({
+      words: this.state.words.concat([{
+        name: 'word',
+        pronunciation: 'pronunciation',
+        partOfSpeech: 'partOfSpeech',
+        simpleDefinition: 'simpleDefinition',
+        longDefinition: 'longDefinition',
+        wordId: 'wordId'
+      }])
+    }, () => console.log(this.state.words));
+  }
+
+  changeTestWord() {
+    this.setState(
+      words[0].name: 'cool'
+    );
+  }
+
+  render() {
+    return (
+      <div>
+        <h1 id="dictionaryName">
+          {this.state.name}
+        </h1>
+        
+        <h4 id="dictionaryBy">
+          {this.state.createdBy}
+        </h4>
+        <div id="incompleteNotice">
+          Dictionary is complete: {this.state.isComplete.toString()}
+        </div>
+
+        <div id="theDictionary">
+          <Word
+            name='{word.name}'
+            wordId='{word.wordId}'
+            pronunciation='{word.pronunciation}'
+            partOfSpeech='{word.partOfSpeech}'
+            simpleDefinition='{word.simpleDefinition}'
+            longDefinition='{word.longDefinition}'
+            initialPosition='{index}' />
+          {this.showWords()}
+        </div>
+
+        <Button
+          action={() => this.addTestWord()}
+          label='Add a Test Word' />
+
+        <Button
+          action={() => {
+            this.setState({isComplete: !this.state.isComplete})
+          }}
+          label='Toggle State' />
+      </div>
+    );
+  }
+}

src/components/Header.jsx

@@ -0,0 +1,89 @@
+import React from 'react';
+
+import {Button} from './Button';
+
+export class Header extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      loggedIn: false,
+      lockedOut: false
+    }
+  }
+
+  logUserIn() {
+    this.setState({
+      loggedIn: true
+    });
+  }
+
+  logUserOut() {
+    this.setState({
+      loggedIn: false
+    });
+  }
+
+  lockUserOut() {
+    this.setState({
+      loggedIn: false,
+      lockedOut: true
+    });
+  }
+
+  unlockUser() {
+    this.setState({
+      lockedOut: false
+    });
+  }
+
+  showAccountButtons() {
+    var buttons;
+
+    if (this.state.loggedIn) {
+      buttons = [
+        <Button key='accountbutton1'
+          id='accountSettings'
+          action={() => this.lockUserOut()}
+          label='Account Settings' />,
+        <Button key='accountbutton2'
+          id='logoutLink'
+          action={() => this.logUserOut()}
+          label='Log Out' />
+      ];
+    } else if (this.state.lockedOut) {
+      buttons = [
+        <Button key='accountbutton3'
+          id='logoutLink'
+          action={() => this.unlockUser()}
+          label='Can&apos;t Log In' />
+      ];
+    } else {
+      buttons = [
+        <Button key='accountbutton4'
+          id='loginLink'
+          action={() => this.logUserIn()}
+          label='Log In/Create Account' />
+      ];
+    }
+
+    return <div className='button-group'>{buttons}</div>;
+  }
+
+  render() {
+    return (
+      <header>
+        <div id="headerPadder">
+          <a href="/" id="siteLogo">Lexiconga Dictionary Builder</a>
+          <div className='button-group'>
+            <Button
+              id='aboutButton'
+              action={() => alert('fixme')}
+              label='About Lexiconga' />
+          </div>
+          {this.showAccountButtons()}
+        </div>
+      </header>
+    );
+  }
+}

src/components/Input.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import {Button} from './Button';
+
 export class Input extends React.Component {
   constructor(props) {
     super(props);

src/components/TextArea.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import {Input} from './Input';
 
 import {getInputSelection, setSelectionRange} from '../js/helpers';
+import {Button} from './Button';
 
 export class TextArea extends Input {
   constructor(props) {
@@ -34,7 +35,10 @@ export class TextArea extends Input {
       <label>
         <span>
           {this.props.name}
-          <span className="clickable inline-button" onClick={this.handleMaximizeClick}>Maximize</span>
+          <Button
+            classes='inline-button'
+            action={() => this.handleMaximizeClick()}
+            label='Maximize' />
         </span>
         <textarea id={this.props.id} onChange={this.handleOnChange} value={this.state.value} />
       </label>

src/components/Word.jsx

@@ -0,0 +1,71 @@
+import React from 'react';
+
+export class Word extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      name: this.props.name,
+      wordId: this.props.wordId,
+      pronunciation: this.props.pronunciation || '',
+      partOfSpeech: this.props.partOfSpeech || '',
+      simpleDefinition: this.props.simpleDefinition || '',
+      longDefinition: this.props.longDefinition || '',
+      sortPosition: this.props.initialPosition
+    }
+  }
+
+  /*
+  {
+    name: word,
+    pronunciation: pronunciation,
+    partOfSpeech: ((partOfSpeech.length > 0) ? partOfSpeech : " "),
+    simpleDefinition: simpleDefinition,
+    longDefinition: longDefinition,
+    wordId: currentDictionary.nextWordId++
+  }
+  */
+
+  showPronunciation() {
+    if (this.state.pronunciation !== '') {
+      return <div className='pronunciation'>{this.state.pronunciation}</div>;
+    }
+  }
+
+  showPartOfSpeech() {
+    if (this.state.partOfSpeech !== '') {
+      return <div className='part-of-speech'>{this.state.partOfSpeech}</div>;
+    }
+  }
+
+  showSimpleDefinition() {
+    if (this.state.simpleDefinition !== '') {
+      return <div className='simple-definition'>{this.state.simpleDefinition}</div>;
+    }
+  }
+
+  showLongDefinition() {
+    if (this.state.longDefinition !== '') {
+      return <div className='long-definition'>{this.state.longDefinition}</div>;
+    }
+  }
+
+  render() {
+    return (
+      <div id={'entry' + this.state.sortPosition} className='word'>
+        <a name={'entry' + this.state.wordId}></a>
+        <div className='name'>
+          {this.state.name}
+        </div>
+        {this.showPronunciation()}
+
+        {this.showPartOfSpeech()}
+
+        <br />
+
+        {this.showSimpleDefinition()}
+        {this.showLongDefinition()}
+      </div>
+    );
+  }
+}

src/index.jsx

@@ -1,19 +1,37 @@
 import './index.html';
-import './sass/styles.scss';
+import './sass/main.scss';
 
 import React from 'react';
 import ReactDOM from 'react-dom';
 
+import {Header} from './components/Header';
 import {NewWordForm} from './components/NewWordForm';
+import {Dictionary} from './components/Dictionary';
 
 class Lexiconga extends React.Component {
   constructor(props) {
     super(props);
+
+    this.state = {
+      scroll: {
+        x: 0,
+        y: 0
+      }
+    }
+
+    // this.defaultDictionaryJSON = JSON.stringify(this.state.dictionaryDetails);  //Saves a stringifyed default dictionary.
+    this.previousDictionary = {};
+
+    // this.addTestWord();
   }
 
   render() {
     return (
-      <NewWordForm />
+      <div>
+        <Header />
+        <NewWordForm />
+        <Dictionary />
+      </div>
     );
   }
 }

src/sass/_lexiconga.scss

@@ -23,7 +23,7 @@ a {
 	text-indent: -9999px;
 	width: 242px;
 	height: 48px;
-	background: url(../images/logo.svg);
+	// background: url(../../images/logo.svg);
 	background-size: 242px 48px;
 	float: left;
 }
@@ -60,7 +60,7 @@ and (max-device-width : 480px) {
 		text-indent: -9999px;
 		width: 150px;
 		height: 30px;
-		background: url(../images/logo.svg);
+		// background: url(../images/logo.svg);
 		background-size: 150px 30px;
 		float: left;
 	}

src/sass/_styles.scss

@@ -34,6 +34,16 @@ header {
     -webkit-box-shadow: 0px 3px 10px -1px rgba(0,0,0,0.75);
     -moz-box-shadow: 0px 3px 10px -1px rgba(0,0,0,0.75);
     box-shadow: 0px 3px 10px -1px rgba(0,0,0,0.75);
+
+    .button-group {
+        float: right;
+        margin: 16px 8px;
+        font-size:12px;
+
+        span {
+            margin-left: 16px;
+        }
+    }
 }
 
 footer {
@@ -46,10 +56,10 @@ footer {
     background: #aaaaaa;
     padding: 0;
     max-height: 32px;   /* Update Dictionary Container's bottom margin to account for footer */
-}
 
-#footer-content {
-    padding: 8px;
+    #footer-content {
+        padding: 8px;
+    }
 }
 
 table {
@@ -255,12 +265,74 @@ input[type=checkbox] {
     font-style: italic;
 }
 
-entry {
+.word {
     display: block;
     width: 90%;
     min-width: 200px;
     padding: 10px 10px 3px;
     margin-bottom: 5px;
+
+    .name {
+        font-weight: bold;
+        font-size: 20px;
+    }
+
+    .pronunciation {
+        font-size: 12px;
+        margin-left:10px;
+    }
+
+    .part-of-speech {
+        font-style: italic;
+        font-weight: bold;
+        font-size: 10px;
+        margin-left:10px;
+    }
+
+    .simple-definition {
+        display: block;
+        font-style: italic;
+    }
+
+    .long-definition {
+        display: block;
+        margin-left: 20px;
+
+        h1, h2, h3, h4, h5, h6 {
+            margin: 5px 0 8px;
+            font-weight: bold;
+        }
+
+        h1 {
+            font-size: 22px;
+        }
+
+        h2 {
+            font-size: 20px;
+        }
+
+        h3 {
+            font-size: 20px;
+            font-weight: normal;
+        }
+
+        h4 {
+            font-size: 18px;
+        }
+
+        h5 {
+            font-size: 18px;
+            font-weight: normal;
+        }
+
+        h6 {
+            font-size: 17px;
+        }
+
+        p {
+            margin: 3px 0 8px;
+        }
+    }
 }
 
 .wordLink {
@@ -271,68 +343,6 @@ entry {
     line-height: 10px;
 }
 
-word {
-    font-weight: bold;
-    font-size: 20px;
-}
-
-pronunciation {
-    font-size: 12px;
-    margin-left:10px;
-}
-
-partofspeech {
-    font-style: italic;
-    font-weight: bold;
-    font-size: 10px;
-    margin-left:10px;
-}
-
-simpledefinition {
-    display: block;
-    font-style: italic;
-}
-
-longdefinition {
-    display: block;
-    margin-left: 20px;
-}
-
-longDefinition h1, longDefinition h2, longDefinition h3, longDefinition h4, longDefinition h5, longDefinition h6 {
-    margin: 5px 0 8px;
-    font-weight: bold;
-}
-
-longDefinition h1 {
-    font-size: 22px;
-}
-
-longDefinition h2 {
-    font-size: 20px;
-}
-
-longDefinition h3 {
-    font-size: 20px;
-    font-weight: normal;
-}
-
-longDefinition h4 {
-    font-size: 18px;
-}
-
-longDefinition h5 {
-    font-size: 18px;
-    font-weight: normal;
-}
-
-longDefinition h6 {
-    font-size: 17px;
-}
-
-longDefinition p {
-    margin: 3px 0 8px;
-}
-
 searchTerm {
     display: inline;
     color: #ff0000;

src/sass/main.scss

@@ -1,3 +1,3 @@
 @import 'styles';
-// @import 'lexiconga';
-// @import 'mobile';
+@import 'lexiconga';
+@import 'mobile';