initial setup

Author: smax22

src/app/components/Main.js

@@ -0,0 +1,22 @@
+import React from "react";
+
+export class Main extends React.Component {
+    render() {
+        return (
+            <div>
+                <div className="row">
+                    <div className="col-xs-12">
+                        <h1>The Main Page</h1>
+                    </div>
+                </div>
+                <div className="row">
+                    <div className="col-xs-12">
+                        <button
+                            className="btn btn-primary"
+                            onClick={() => this.props.changeUsername('Anna')}>Change the Username</button>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}

src/app/components/User.js

@@ -0,0 +1,20 @@
+import React from "react";
+
+export class User extends React.Component {
+    render() {
+        return (
+            <div>
+                <div className="row">
+                    <div className="col-xs-12">
+                        <h1>The User Page</h1>
+                    </div>
+                </div>
+                <div className="row">
+                    <div className="col-xs-12">
+                        <p>User Name: {this.props.username}</p>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}

src/app/index.js

@@ -1,9 +1,29 @@
 import React from "react";
 import {render} from "react-dom";
+
+import { User } from './components/User';
+import { Main } from './components/Main';
+
 class App extends React.Component {
+    constructor() {
+        super();
+        this.state = {
+            username: "Max"
+        };
+    }
+
+    changeUsername(newName) {
+        this.setState({
+            username: newName
+        });
+    }
+
     render() {
         return (
-            <h1>Hello Redux World!</h1>
+            <div className="container">
+                <Main changeUsername={this.changeUsername.bind(this)}/>
+                <User username={this.state.username}/>
+            </div>
         );
     }
 }