From 6a1c90a8f2efbb6b3fe7c486c07cffe8772274c6 Mon Sep 17 00:00:00 2001 From: Calum Flanagan Date: Wed, 22 Feb 2017 16:43:19 +0000 Subject: [PATCH] Completed part-5 --- client/index.html | 1 - components/App.js | 9 +++++++-- components/TextDisplay.js | 10 ++++++++++ components/TextInput.js | 34 ++++++++++++++++++++++++++++++++++ 4 files changed, 51 insertions(+), 3 deletions(-) create mode 100644 components/TextDisplay.js create mode 100644 components/TextInput.js diff --git a/client/index.html b/client/index.html index 7a2106d..4c0c135 100644 --- a/client/index.html +++ b/client/index.html @@ -5,7 +5,6 @@ React Todo List -

This is not a React app yet!

diff --git a/components/App.js b/components/App.js index a41ff05..a2d508f 100644 --- 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
This is definitely a hot (module reloading) React app now!
+ return ( +
+

This is the App Component

+ +
+ ) } - } export default App diff --git a/components/TextDisplay.js b/components/TextDisplay.js new file mode 100644 index 0000000..eeb944e --- /dev/null +++ b/components/TextDisplay.js @@ -0,0 +1,10 @@ +import React, { Component } from 'react' + +class TextDisplay extends Component { + + render() { + return
I am displaying text: {this.props.text}
+ } +} + +export default TextDisplay diff --git a/components/TextInput.js b/components/TextInput.js new file mode 100644 index 0000000..e5dbb67 --- /dev/null +++ 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 ( +
+ + +
+ ) + } +} + +export default TextInput