title: Calling React View from Express
body: <p>I can't find a good bare minimum example where I can wire up an express.js route to call a react view.</p>
  
  <p>So far this is what I have.</p>
  
  <pre><code>+-- app.js
  +-- config
  |   +-- server.js
  +-- routes
  |   +-- index.js
  +-- views
  |   +-- index.html
  </code></pre>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>require('./config/server.js');
  require('./routes/index.js');
  </code></pre>
  
  <p>config | <strong>server.js</strong></p>
  
  <pre><code>"use strict";
  var express = require('express'),
  app = express(),
  
  routes = require('./routes');
  
  app.set('view engine', 'html');
  app.engine('html', ); // how do I tell express that JSX is my template view engine?
  
  var port = process.env.PORT || 3000;
  
  app.engine('handlebars', exphbs({ defaultLayout: 'main'}));
  app.set('view engine', 'handlebars');
  
  
  var server = app.listen(port, function(){
      console.log('Accepting connections on port ' + port + '...');
  });
  </code></pre>
  
  <p>routes | <strong>index.js</strong></p>
  
  <pre><code>app.get('/', function(request, response){
      // how do we call the route that will run index.html ?
      request.render('index');
  });
  </code></pre>
  
  <p>views | <strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;script src="build/react.js"&gt;&lt;/script&gt;
      &lt;script src="build/JSXTransformer.js"&gt;&lt;/script&gt;
      &lt;script type="text/jsx" src="build/noEpisodes.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="noEpisodesMessage"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and then my index.htm page as well as generated jsx.</p>