kweiberth · calflan · Feb 22, 2017
diff --git a/client/index.html b/client/index.html
@@ -5,7 +5,6 @@
   <title>React Todo List</title>
 </head>
 <body>
-  <h1>This is not a React app yet!</h1>
   <div id="app"></div>
   <script src="bundle.js"></script>
 </body>

diff --git a/components/App.js b/components/App.js
@@ -1,11 +1,16 @@
 import React, { Component } from 'react'
+import TextInput from './TextInput'
 
 class App extends Component {
 
   render() {
-    return <div>This is definitely a hot (module reloading) React app now!</div>
+    return (
+      <div>
+        <h1>This is the App Component</h1>
+        <TextInput/>
+      </div>
+    )
   }
-
 }
 
 export default App
diff --git a/components/TextDisplay.js b/components/TextDisplay.js
@@ -0,0 +1,10 @@
+import React, { Component } from 'react'
+
+class TextDisplay extends Component {
+
+  render() {
+    return <div>I am displaying text: {this.props.text}</div>
+  }
+}
+
+export default TextDisplay
diff --git a/components/TextInput.js b/components/TextInput.js
@@ -0,0 +1,34 @@
+import React, { Component } from 'react'
+import TextDisplay from './TextDisplay'
+
+class TextInput extends Component {
+
+  constructor(props, context) {
+    super(props, context)
+    this.state = {
+      inputText: 'initial text'
+    }
+  }
+
+  handleChange(event) {
+    this.setState({
+      inputText: event.target.value
+    })
+  }
+
+  render() {
+    return (
+      <div>
+        <input
+          type="text"
+          placeholder="This is going to be text"
+          value={this.state.inputText}
+          onChange={this.handleChange.bind(this)}
+        />
+        <TextDisplay text={this.state.inputText}/>
+      </div>
+    )
+  }
+}
+
+export default TextInput