Sunday, May 19, 2024
 Popular · Latest · Hot · Upcoming
174
rated 0 times [  178] [ 4]  / answers: 1 / hits: 20534  / 9 Years ago, tue, april 14, 2015, 12:00:00

I can't find a good bare minimum example where I can wire up an express.js route to call a react view.



So far this is what I have.



+-- app.js
+-- config
| +-- server.js
+-- routes
| +-- index.js
+-- views
| +-- index.html


app.js



require('./config/server.js');
require('./routes/index.js');


config | server.js



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 + '...');
});


routes | index.js



app.get('/', function(request, response){
// how do we call the route that will run index.html ?
request.render('index');
});


views | index.html



<!DOCTYPE html>
<html>
<head>
<script src=build/react.js></script>
<script src=build/JSXTransformer.js></script>
<script type=text/jsx src=build/noEpisodes.js></script>
</head>
<body>
<div id=noEpisodesMessage></div>
</body>
</html>


and then my index.htm page as well as generated jsx.


More From » node.js

 Answers
5

2021 edit:


the modern solution is to use the create-react-app tool, followed by dropping in your code where needed. It's been set up to do the rest for you. The React landscape has changed a fair bit over the last six years.


original 2015 answer:


The usual thing is to use react-router to take care of the routes; write your React app as a single React app (i.e. all your JSX source ends up bundled into a single app.js file, which knows how to load all your "pages" or "views") and then use express (or Hapi, or any other server process) mostly as your API and asset server, not your page/view generator.


You can then tap into the routes you set up in the react-router Router object so that on the express side you can forward your users to the URL that react-router can deal with for content loading, so you get



  1. user request site.com/lol/monkeys

  2. express redirects to /#/lol/monkeys

  3. your react app loads the correct view because of the routes in Router

  4. optionally, your app does a history.replaceState so that the user sees site.com/lol/monkeys (there are some react-router tricks to do this for you)


You can also automate most of this through server-side-rendering but the name can be confusing: you still write your React app as if there is no server involved at all, and then rely on React's render mechanism to fully render individual "pages" for a requested URL which will show all the right initial content while also then loading your app and silently hooking it back into the content the user is looking at, so that any interactions past the initial page load are handled by React again, and subsequent navigation is "fake" navigation (your url bar will show a new URL but no actual network navigation will happen, React simply swaps content in/out).


A good example for this is https://github.com/mhart/react-server-example


[#67078] Saturday, April 11, 2015, 9 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
deanna

Total Points: 84
Total Questions: 86
Total Answers: 107

Location: Cyprus
Member since Wed, Dec 8, 2021
3 Years ago
;