daniellmb daniellmb - 1 year ago 235
Javascript Question

Is it possible to server-side render jQuery with ReactJS.Net?

I've been going through this tutorial on ReactJS.NET, and hit a snag. It mentions that:

We will use simple polling here but you could easily use SignalR or other technologies.

While this works when I do client-side rendering, it throws the following error when rendering server-side. Currently, I don't actually need jQuery or SignalR to render the initial state as I'm only using them to subscribe to updates once the app is running. I guess my question is, what is the correct way to structure my React application so that I can render it server-side or client-side at will.

An exception of type 'React.Exceptions.ReactScriptLoadException' occurred in React.dll but was not handled in user code

Error while loading "~/Scripts/jquery-1.10.2.js": ReferenceError: window is not defined

Answer Source

Got it working (live demo), I just needed to move the call to React.render outside of the jsx file and pass in what I needed (see snippet below). Another option would be to try and mock the expected objects with jsdom.

<!-- Render the React Component Server-Side -->
@Html.React("CommentBox", new
  data = Model,
  conn = false

<!-- Optionally Render the React Component Client-Side -->
@section scripts {
  <script src="~/Scripts/react/react-0.12.2.js"></script>
    React.render(React.createElement(CommentBox, {
      data: @Html.Raw(Json.Encode(Model)),
      conn: $.hubConnection()
    }), document.getElementById("react1"));
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download