npm install accelerator
Adding Accelerator to your app
In your main app file, add the following:
// app.jsvar app = ;app;app;app;
Rendering a view
Here is a simple example of a route returning an Accelerator view
When we render a view using Accelerator, the actual properties which will be
passed to our React element are stored in the
props key of our options
homepage.jsx looks like.
// views/homepage.jsxvar React =moduleexports = React;
Here's what the resulting HTML will look like:
What the Code
So what did Accelerator do? When you pass a view to the
Accelerator will require that file and render whatever React class is exported
to non-static markup. This means that the
fields will be preserved (they're necessary for mounting on the client later).
The resulting element will then be mounted on a
<div> with the
"content." You will also notice that your
props are nicely added there at the
bottom so that you can more easily mount cleanly on the client. Here's what
your client mounting will look like:
Note: This assumes that you've used Browserify to package up
your export from
homepage.jsx above. The details of how to do this aren't
covered here. See the Browserify documentation.
Another note: The clever observer may notice that our example page has no
<head> element and also doesn't include
client.js anywhere. I know it is
wrong, but don't worry, we'll get to that in a minute.
Why mount to "content" and not directly to the
<body>? There's a few reasons.
- React doesn't like mounting directly to the body, you'll see it complain if you try.
- Also, notice that nifty little
<script>element with your initial props in it at the bottom there? That can't be there if you mount directly to the
<body>, otherwise the checksum would fail when you try to mount.
- Lastly, this allows us to inject other static markup at the bottom of
<body>without failing the checksum.
You'll notice that our above example is lacking a
<head> element. Don't
worry, Accelerator will handle that. Let's expand a bit on our example.
Well that is certainly different. Let's take a look at these bad boys.
// head.jsxvar React = ;moduleexports = React;
// post.jsxvar React = ;moduleexports = React;
Accelerator renders both the
post parameters to static markup
and inserts them above and below your the
<div id="content"> element,
respectively. As you have likely guessed,
passed as props when the elements are rendered.
So now what does our HTML look like?
My HomepageWhat the Code
And there you have it.
Render a view like this:
And Accelerator will use it to generate a page based on this:
Get it? Got it? Good. Don't get it? Feel free to submit an issue!
The maintainers of the express-react-views project have explicitly stated that they have no intent to supoort client-side mounting and reject any contributions which try to add this functionality.