added backup source for future ref

app/srcbak/App.css

@@ -0,0 +1,8 @@
+body {
+    font-family: Arial;
+	margin: 0;
+}
+
+h1 {
+	margin: 10px;
+}

app/srcbak/App.hx

@@ -0,0 +1,33 @@
+import react.ReactMacro.jsx;
+import Webpack.*;
+import Root;
+
+
+class App {
+    static var STYLES = require('./App.css');
+
+    static public function main() {
+        new App();
+    }
+
+    public function new() {
+        var root = createRoot();
+
+        var rootComponent = react.ReactDOM.render(jsx('
+            <Root/>
+        '), root);
+
+        #if debug
+        ReactHMR.autoRefresh(rootComponent);
+        #end
+    }
+
+    function createRoot() {
+        var current = js.Browser.document.getElementById('root');
+        if (current != null) return current;
+        current = Dom.div();
+        current.id = 'root';
+        Dom.body().appendChild(current);
+        return current;
+    }
+}

app/srcbak/Dom.hx

@@ -0,0 +1,16 @@
+class Dom {
+    static var TEMP = js.Browser.document.createDivElement();
+
+    inline static public function div() {
+        return js.Browser.document.createDivElement();
+    }
+
+    inline static public function html(html: String) {
+        TEMP.innerHTML = html;
+        return TEMP.firstElementChild;
+    }
+
+    inline static public function body() {
+        return js.Browser.document.body;
+    }
+}

app/srcbak/Root.hx

@@ -0,0 +1,53 @@
+import com.Foo;
+import components.Header;
+import react.ReactMacro.jsx;
+import react.ReactComponent;
+import react.router.Route;
+
+typedef RootState = {
+    route: String,
+    ?component: react.React.CreateElementType
+}
+
+class Root extends react.ReactComponentOfState<RootState> {
+
+    public function new() {
+        super();
+        state = { route:'' };
+    }
+
+    override function componentDidMount() {
+		switch (state.route) {
+			default:
+				Webpack.load(Foo).then(function(_) {
+					setState(cast { component:Foo });
+				});
+		}
+    }
+    function yeet(){
+        //state.route="yeet";
+        //trace(this.props.location.pathname);
+        trace(state);
+    }
+
+    override function render() {
+        return jsx('
+            <div>
+                <Header foo=${yeet}/>
+                <h1>Hello Haxe + Webpack + React</h1>
+                ${renderContent()}
+            </div>
+        ');
+    }
+
+    function renderContent() {
+        if (state.component == null)
+            return jsx('
+                <span>Loading...</span>
+            ');
+        else
+            return jsx('
+                <state.component />
+        ');
+    }
+}

app/srcbak/bundles/MyBundle.hx

@@ -0,0 +1,12 @@
+import react.ReactComponent;
+import react.router.Route.RouteRenderProps;
+
+@:expose('default')
+class MyBundle extends ReactComponentOfProps<RouteRenderProps> {
+    // If you want to execute code when this bundle is _first_ loaded:
+    public static function onLoad() {
+        // ...
+    }
+
+    // ...
+}

app/srcbak/com/Foo.css

@@ -0,0 +1,14 @@
+.foo {
+    margin: 10px;
+    padding: 10px;
+    background: #eee;
+}
+
+.foo .yeah {
+    margin-top: 20px;
+}
+
+.foo .yeah p {
+    margin: 0;
+    border-bottom: solid 1px red;
+}

app/srcbak/com/Foo.hx

@@ -0,0 +1,27 @@
+package com;
+
+import react.ReactComponent;
+import react.ReactMacro.jsx;
+import Webpack.*;
+
+class Foo extends ReactComponent {
+
+    static var STYLES = require('./Foo.css');
+    static var IMG = require('./bug.png');
+    static var CONFIG = require('../config.json');
+
+    public function yeet(){
+        trace(state);
+    }
+
+    override function render() {
+        return jsx('
+            <div className="foo">
+                <img src=$IMG/> ${CONFIG.hello}!
+                <p onClick=${yeet}> ${CONFIG.yeet}!</p>
+                <hr/>
+                Let\'s do some HRM guys<br/>
+            </div>
+        ');
+    }
+}

app/srcbak/com/Foo2.hx

@@ -0,0 +1,23 @@
+package com;
+
+import react.ReactComponent;
+import react.ReactMacro.jsx;
+import Webpack.*;
+
+class Foo2 extends ReactComponent {
+
+    static var STYLES = require('./Foo.css');
+    static var IMG = require('./bug.png');
+    static var CONFIG = require('../config.json');
+
+
+    override function render() {
+        return jsx('
+            <div className="foo2">
+                <img src=$IMG/> ${CONFIG.hello}!
+                <hr/>
+                Let\'s do some HRM guys<br/>
+            </div>
+        ');
+    }
+}

app/srcbak/components/Header.hx

@@ -0,0 +1,20 @@
+package components;
+
+import react.ReactMacro.jsx;
+import react.ReactComponent;
+import Webpack.*;
+
+class Header extends ReactComponent{
+    static var STYLES = require('./Header.css');
+    public function yeet(){
+        trace(props);
+        props.foo();
+    }
+    override function render() {
+        return jsx('
+            <header>
+                <nav><a onClick=${yeet}>yeet</a></nav>
+            </header>
+        ');
+    }
+}

app/srcbak/config.json

@@ -0,0 +1,4 @@
+{
+    "hello": "This is an asynchronous module" ,
+    "yeet": "yote"
+}