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

Question

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

why would you want to use a client-side dom library like jQuery on the server? am i missing something? — dandavis
– dandavis, Commented Feb 12, 2015 at 20:54
I don't... but I'm not sure how to decouple it. I think I figured it out... testing my theory. — SavoryBytes
– SavoryBytes, Commented Feb 12, 2015 at 21:07
A future release of SignalR will remove the jQuery dependency which should make it much easier to reuse. github.com/SignalR/SignalR/issues/372 — Daniel Lo Nigro
– Daniel Lo Nigro, Commented Feb 22, 2015 at 10:04
I wouldn't hold your breath @DanielLoNigro unless you're submitting a pull request for it. That issue is from 2012 — SavoryBytes
– SavoryBytes, Commented Feb 23, 2015 at 15:27
@daniellmb Last I heard they're working on it for the version of SignalR that will be part of ASP.NET 5. That issue was closed because they're moving it to a repo under the aspnet Github organisation. — Daniel Lo Nigro
– Daniel Lo Nigro, Commented Feb 23, 2015 at 23:00

SavoryBytes · Accepted Answer · 2015-03-27 14:46:26Z

1

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>
  @Scripts.Render("~/bundles/comments")
  <script>
    React.render(React.createElement(CommentBox, {
      data: @Html.Raw(Json.Encode(Model)),
      conn: $.hubConnection()
    }), document.getElementById("react1"));
  </script>
}

edited Mar 27, 2015 at 14:46

answered Feb 12, 2015 at 21:20

SavoryBytes

36.4k4 gold badges55 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nanonerd · Accepted Answer · 2016-08-14 04:56:51Z

Using jQuery while rendering server side using reactjs.net:

The answer is a partial Yes if you put the jQuery in the ComponentDidMount function of React with your setup above.

Like this:

componentDidMount: function(){
    if (this.props.userID == 0){
        $("#postButton").hide();
    }
}

It also worked in some other places but not everywhere. Other places in the React script, I got "ReferenceError: $ is not defined".

Here's some additional comments by the reactjs.net author himself. Basically, jQuery is not designed to work server side so prob best not to rely on it.

https://groups.google.com/forum/#!topic/reactjs/3y8gfgqJNq4

As an alternative, for instance, if you want to control the visibility of an element without using jQuery, you can create a style and then assign the style based on If logic. Then add the style as an inline attribute to the element as shown below. This should work fine in React.

var styleComment = {display: 'block'};

if (this.props.commentCount == 0){
    styleComment = {display: 'none'}
}

<div style={styleComment}>Count is greater than 0</div>

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related