[SOLVED] How do I add an HTML page for template tags when I am using Routes to display web app pages

How do I add an HTML page for template tags when I am using Routes to display web app pages

I was following a Udemy tutorial that used Routes to connect all pages. However, I need to add a form to my web app (that has validation etc). I found aldeed:autoform but it uses HTML template tags. From my understanding, my React components cannot render out template tags in JSX correct? Basically the text i need to add looks like this (took from autoform docs):

<template name="insertBookForm">
  {{> quickForm collection="Books" id="insertBookForm" type="insert"}}
</template>

Is it possible to link to an html page from routes? Here's what I have right now in my routes.js, I need the /submit to be able to render that templates form:

<Router history={browserHistory}>
    <Route onEnter={globalOnEnter} onChange={globalOnChange}>
      <Route path="/" component={HomePage} privacy="unauth"/>
      <Route path="/login" component={Login} privacy="unauth"/>
      <Route path="/signup" component={Signup} privacy="unauth"/>
      <Route path="/submit" component={Submit} privacy="unauth"/>
      <Route path="*" component={NotFound}/>
    </Route>
  </Router>

Does my question make sense? My default main.html looks like such:

<head>
  <title>Notes App</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
  <link rel="icon" type="image/png" href="/images/favicon.png"/>
</head>

<body>
  <div id="app"></div>
</body>

Where the full body of my web app is linked to the routes (this is in my main.js client):

Meteor.startup(() => {
  ReactDOM.render(routes, document.getElementById('app'));
});

Solution

You are mixing up Blaze and React. aldeed:autoform uses Blaze as UI layer. If you want to stick to pure React, for now the only option is to use another library. Uniforms might be a good option for that: https://github.com/vazco/uniforms

If you are willing to use Blaze alongside React, you can use aldeed:autoform. I've not yet tried this myself, but it would look similar to this:

'Stolen' from Meteor's official React tutorial where they use a similar technique to use the Meteor AccountsUI package (which is also built in Blaze) to load the loginButtons using a React component:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Template } from 'meteor/templating';
import { Blaze } from 'meteor/blaze';

export default class QuickForm extends Component {
  componentDidMount() {
    // Use Meteor Blaze to render quickForm
    this.view = Blaze.render(Template.quickForm,
      ReactDOM.findDOMNode(this.refs.container));
  }
  componentWillUnmount() {
    // Clean up Blaze view
    Blaze.remove(this.view);
  }
  render() {
    // Just render a placeholder container that will be filled in
    return <span ref="container" />;
  }
}