A start on a frontend application in React.

frontend/src/components/Gamenights.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+export default class Gamenights extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+    };
+  }
+
+  render() {
+    let gamenights = this.props.gamenights.map(g => 
+      (<li>{g.name}</li>)
+    );
+    return (
+      <ul>
+        {gamenights}
+      </ul>
+    );
+  }
+}

frontend/src/components/Login.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+export default class Login extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      username: "",
+      password: "",
+    };
+
+    this.handleUsernameChange = this.handleUsernameChange.bind(this);
+    this.handlePasswordChange = this.handlePasswordChange.bind(this);
+    this.handleLogin = this.handleLogin.bind(this);
+  }
+
+  render() {
+    return (
+      <div className="Login-Component">
+        <form onSubmit={this.handleLogin}>
+          <fieldset>
+            <legend>Login</legend>
+
+            <label for="username">Username:</label>
+            <input id="username" name="username" type="text"
+              value={this.state.username}
+              onChange={this.handleUsernameChange} />
+            <label for="password">Password:</label>
+            <input id="password" name="password" type="password"
+              value={this.state.password}
+              onChange={this.handlePasswordChange} />
+
+            <input type="submit" value="Submit" />
+          </fieldset>
+        </form>
+      </div>
+    );
+  }
+
+  handleUsernameChange(event) {
+    this.setState((state, props) => ({
+      username: event.target.value
+    }));
+  }
+
+  handlePasswordChange(event) {
+    this.setState((state, props) => ({
+      password: event.target.value
+    }));
+  }
+
+  handleLogin(event) {
+    this.props.onChange({ username: this.state.username, password: this.state.password });
+    event.preventDefault();
+  }
+}

frontend/src/components/MenuBar.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+export default class MenuBar extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    return (
+      <ul>
+        <li>
+          <a>Gamenight</a>
+        </li>
+        <li>
+          <a>User</a>
+        </li>
+        <li>
+          <button onClick={this.props.onLogout}>Logout</button>
+        </li>
+      </ul>
+    );
+  }
+}