javascriptreactjsasp.net-mvc-5.2reactjs.net

ReactJS.NET MVC tutorial doesn't work?

I'm trying to setup a new project in Visual Studio that is going to be MVC 5 with a single page app written in ReactJS. So I followed the guide on the ReactJS website.

I got to the very first part where you run the project, and I got a syntax error because of the JSX (the browser seemed to want to interpret it as vanilla JavaScript which makes perfect sense). So I added type="text/jsx" to the script tag.

In total, my HTML/JSX looks like this:

HTML output by Razor view

<!doctype html>
<html>
  <head>
    <title>Hello React</title>
  </head>
  <body>
    <div id="content"></div>
    <script src="http://fb.me/react-0.12.2.js"></script>
    <script type="text/jsx" src="/Scripts/Tutorial.jsx"></script>
  </body>
</html>

Tutorial.jsx

var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="comment-box">
        Hello, world! I am a CommentBox.
      </div>
    );
  }
});

React.render(
  <CommentBox />,
  document.getElementById('content')
);

I don't understand - what have I done wrong? I've followed the tutorial to the letter aside from adding type="text/jsx" to the script tag. I'm assuming something needs to be included to handle transforming the JSX into vanilla JS, but the tutorial doesn't seem to mention this.

I'm not getting any errors at all in the Chrome Developer Tools console.

Solution

  • I figured it out - the tutorial is missing two things:

    1. The script inclusion should be done thus, with a type declaration:

      <script type="text/jsx" src="/Scripts/Tutorial.jsx"></script>

    2. The JSX transformer needs to be included:

      <script src="http://fb.me/JSXTransformer-0.12.2.js"></script>

    So the full HTML output by the Razor view should look like this:

    <!DOCTYPE html>
<html>
  <head>
    <title>Hello React</title>
  </head>
  <body>
    <div id="content"></div>
    <script src="http://fb.me/react-0.12.2.js"></script>
    <script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
    <script type="text/jsx" src="/Scripts/Tutorial.jsx"></script>
  </body>
</html>

    Looks like they need to update their tutorial.

    Update:

    Commenter @DanielLoNigro added this helpful tip:

    Actually if you're using ReactJS.NET, you don't need to use the client-side JSXTransformer. Just ensure that the JSX handler is configured in your Web.config file (there should be a handler for .jsx).