ReactJS Template component

Question

I am working on a basic document editing application.

Each document has a data model, which is a plain javascript object. I want to have numerous possible templates for each document, where a template is an HTML form on the server. When the user switches the template for a document, the template HTML is retrieved from the server, and current model values are populated into the inputs.

How would one do something like this in react? I was thinking of creating a component for each template, which looks something like this:

var TemplateOne = React.createComponent({
  getDefaultProps: function(){
    return {
        margin: "0.5in",
        layout: "portrait"
    };
  },

  render: function(){
    return (
      <Page margin={this.props.margin} layout={this.props.layout}> 
        <input name="foo" value={this.props.data.foo} onChange={this.prop.updateModel} />
        <input name="bar" value={this.props.data.bar} onChange={this.prop.updateModel} />
        <input name="car" value={this.props.data.car} onChange={this.prop.updateModel} />
      </Page>
    );
  }
});


var TemplateTwo = React.createComponent({
  getDefaultProps: function(){
    return {
      margin: "1in",
      layout: "landscape"
    };
  },

  render: function(){
    return (
      <Page margin={this.props.margin} layout={this.props.layout}> 
        <input name="foo" value={this.props.data.foo} onChange={this.prop.updateModel} />
        <input name="zap" value={this.props.data.zap} onChange={this.prop.updateModel} />
      </Page>
    );
  }
});

I would also have a Document component, which passes down its model state in the form of the data prop, as well as potentially margin or layout props to the Template components. The updateModel prop is also passed down from the Document component to the templates, and it updates the state of the Document model.

Ideally, each of the Template components is in a separate file, because the markup for each of the templates is potentially hundreds of lines long, due to very specific form requirements, and I have 20+ templates( with a lot more on the way ).

How could I "fetch" these components from the server? Most resource I have found mention calling React.renderComponent twice, once on the server, and in the browser. Does that mean that I have to include each template in my client javascript? Can I send the component itself over AJAX?

I am still very new to this, and would appreciate any resources that could help me think through this.

Answer 1

Any solution for getting JavaScript asynchronously will work for this. This includes require.js, webpack, and other loaders.

When you're getting a template from the server, you can set the Document to show a "loading" template, and when the new template is downloaded, you can switch it to that template.

As long as the combined, minified, gzipped size is under ~200kb, you probably don't need to worry and can just include all of this in your initial payload.

Consider that when you do the templates asynchronusly, there's a delay between the intent to change templates and the time the user sees the template. If it's all upfront, template switching becomes instant.