Complete client UI

src/app.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import io from 'socket.io-client';
+
+export default class App extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            socket: io.connect()
+        }
+    }
+
+    componentDidMount() {
+        this.connect();
+
+    }
+
+    componentWillUnmount() {
+        this.setState({socket: this.state.socket.removeAllListeners()});
+    }
+
+    connect() {
+        let socket = this.state.socket;
+
+        socket.on('connect', () => {
+            console.log('Connected!');
+        });
+    }
+
+	sendOn() {
+        this.state.socket.emit('update', '1');
+		console.log('On sent.');
+	}
+
+	sendOff() {
+        this.state.socket.emit('update', '0');
+		console.log('Off sent.');
+	}
+
+    render() {
+        return (
+            <div className="ui text container">
+				<div className="ui basic center aligned segment">
+					<img className="ui centered image" src="logo.png" />
+					<h3 className="ui header">Remote Control Lightswitch</h3>
+					<p>Press the buttons to control the light.</p>
+				
+					<div className="ui compact raised segments">
+						<div className="ui segment">
+							<i onClick={() => this.sendOn()} className="bordered inverted yellow idea huge icon"></i>
+						</div>
+						<div className="ui segment">
+							<i onClick={() => this.sendOff()} className="bordered inverted disabled idea huge icon"></i>
+						</div>
+					</div>
+				</div>
+				<div className="ui basic center aligned segment">
+					<p>Created by Tanner Collin <br />
+					tannercollin.com</p>
+				</div>
+            </div>
+       );
+    }
+}

src/index.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import 'react-hot-loader/patch';
+import { AppContainer } from 'react-hot-loader';
+
+import App from './app';
+
+import initReactFastclick from 'react-fastclick';
+initReactFastclick();
+
+const render = Component => {
+    ReactDOM.render(
+        <AppContainer>
+            <Component />
+        </AppContainer>,
+        document.getElementById('root')
+    )
+}
+
+render(App)
+
+if (module.hot) {
+    module.hot.accept('./app', () => { render(App) })
+}