Basic MainComponent dynamically loading children from remote

James Martin · James Martin · commit 4928a01805e6 · 2015-08-23T13:16:15.000+10:00
diff --git a/src/app.js b/src/app.js
@@ -0,0 +1,72 @@
+var MainComponent = React.createClass({
+  children: function() {
+    return(
+      _.map(this.props.children, function(child, index) {
+        return React.createElement(child.name, _.merge(child.props, {key: index}));
+      })
+    );
+  },
+
+  render: function() {
+    return(
+      <div>
+        <h1>Main</h1>
+        {this.children()}
+      </div>
+    );
+  }
+});
+
+var remoteComponents = [
+  {
+    name: 'SimpleComponent',
+    src: '/build/simpleComponent.js'
+  },
+  {
+    name: 'GreeterComponent',
+    src: '/build/greeterComponent.js',
+    props: {name: 'Bob'}
+  }
+];
+
+var loadRemoteComponent = function(component) {
+  return new Promise(function(resolve, reject) {
+    var request = new XMLHttpRequest();
+
+    request.onload = function() {
+      if(request.status >= 200 && request.status < 400) {
+        var remoteComponentSrc = request.responseText;
+        window.eval(remoteComponentSrc);
+        return resolve({name: eval(component.name), props: component.props || {}});
+      } else {
+        return reject();
+      }
+    };
+
+    request.open('GET', component.src);
+    request.send();
+  });
+};
+
+var loadRemoteComponents = function(components) {
+  return Promise.all(
+    _.map(components, function(component) {
+      console.log(component.name, component.src);
+      return loadRemoteComponent(component);
+    })
+  );
+};
+
+var loadApp = function(children) {
+  React.render(
+    React.createElement(MainComponent, {children: children}),
+    document.getElementById('main')
+  );
+};
+
+loadRemoteComponents(remoteComponents)
+.then(loadApp)
+.catch(function(err) {
+  console.log("Something went wrong: " + err);
+});
+
diff --git a/src/greeterComponent.js b/src/greeterComponent.js
@@ -0,0 +1,17 @@
+var GreeterComponent = React.createClass({
+
+  getInitialState: function() {
+    return(
+      {name: this.props.name || 'World'}
+    );
+  },
+
+  render: function() {
+    return(
+      <div>
+        <p>I am the greeter component.</p>
+        <p>Hello, {this.state.name}!</p>
+      </div>
+    );
+  }
+});
diff --git a/src/simpleComponent.js b/src/simpleComponent.js
@@ -0,0 +1,22 @@
+var SimpleComponent = React.createClass({
+
+  getInitialState: function() {
+    return(
+      {value: ''}
+    );
+  },
+
+  handleChange: function(event) {
+    this.setState({value: event.target.value});
+  },
+
+  render: function() {
+    return(
+      <div>
+        <p>I am a simple component.</p>
+        <p>My input value is: <strong>{this.state.value}</strong></p>
+        <input type='text' value={this.state.value} onChange={this.handleChange} />
+      </div>
+    );
+  }
+});
diff --git a/test.html b/test.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Remote React Components</title>
+    <script src="vendor/lodash.min.js"></script>
+    <script src="vendor/lie.min.js"></script>
+    <script src="build/react.js"></script>
+  </head>
+  <body>
+    <div id="main"></div>
+    <script src="build/app.js"></script>
+  </body>
+</html>
