I have a simple React component that is currently rendering correctly on the client. I am trying to have it render on the server. To test this I am switching off the JavaScript in Chrome and loading the page.
My component looks like this:
window.TestComponent = React.createClass({
render: function() {
return React.DOM.h1({className: 'TestComponent'},
'Test Component')
}
});
The entrypoint looks like this:
<%= react_component 'TestComponent', {prerender: true} %>
At the moment, the page loads without error and contains the following:
<div data-react-class="TestComponent" data-react-props="{'prerender': true}"></div>
It seems that Rails is parsing the erb, but fails to render the component it references.
I have included The Ruby Racer in my Gemfile and have verified it is working by printing out some calculations to the DOM.
According to the React Rails docs on server-side rendering there are three requirements:
Requirement 1
react-rails must load your code. By convention, it uses components.js, which was created by the install task. This file must include your components and their dependencies (eg, Underscore.js).
My component is located in: app/assets/javascripts/components/test_component.js.erb and should be loaded by the JavaScript in components.js:
//= require_tree ./components
Requirement 2
Your components must be accessible in the global scope. If you are using .js.jsx.coffee files then the wrapper function needs to be taken into account:
I am using plain JavaScript
Requirement 3
Your code can't reference document. Prerender processes don't have access to document, so jQuery and some other libs won't work in this environment :(
I don't reference document.
What might I be doing wrong?