ReactJS.NET MVC tutorial doesn't work?

Asked 29/1, 2015 at 1:40 Answered 15/3, 2019 at 2:41

Solved javascript reactjs asp.net-mvc-5.2 reactjs.net

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.

Contagion answered 29/1, 2015 at 1:40 Comment(0)

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

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

<script type="text/jsx" src="/Scripts/Tutorial.jsx"></script>
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).

Contagion answered 29/1, 2015 at 2:3 Comment(2)

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). – Hidden 22/2, 2015 at 10:2

@DanielLoNigro that's an invaluable tip, thank you so much! Had no idea about that. – Contagion 23/2, 2015 at 21:57

This is how the .jsx handler can be registered in web.config:

<handlers>
  <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModule" resourceType="Unspecified"/>
  <remove name="Babel" />
  <add name="Babel" verb="GET" path="*.jsx" type="React.Web.BabelHandlerFactory, React.Web" preCondition="integratedMode" />
</handlers>

and in this case there is no need to have type="text/jsx" in script tag.

Tremendous answered 5/4, 2017 at 21:14 Comment(0)

For me, even though my system was 64bit, I had to install JavaScriptEngineSwitcher.V8.Native.win-x86instead of JavaScriptEngineSwitcher.V8.Native.win-x64 and it solved the problem. It will interesting to hear why should I have to install x86 package.

PS: Mind you, that was for ASP.Net MVC though.

Grilled answered 15/3, 2019 at 2:41 Comment(3)

Same here. I am interested why. I hate 32bits apps. – Renitarenitent 17/1, 2020 at 7:35

Same - When using x64 I am getting a 500 error in the console. – Spake 30/4, 2020 at 18:10

you saved my life. But just very curious why so many people got this issue and the official website doesn't mention anything about that – Dede 11/8, 2020 at 11:14

The first thing you need to ensure is that you are indeed creating an ASP.NET MVC 5 application and not an ASP.NET Core, as the tutorials are different.

For ASP.NET MVC 4 & 5: https://reactjs.net/getting-started/tutorial_aspnet4.html For ASP.Net Core: https://reactjs.net/getting-started/tutorial.html

If you are creating an ASP.NET MVC 5 application then follow the steps below:

Steps:

Create a new MVC 5 project.
In the package manager console, install the following NuGet packages:

Install-Package react.js

Install-Package React.Web.Mvc4

You will notice that a folder called 'react' will be created in 'Scripts'

In the Scripts folder create a new '.jsx' file and name it:

Tutorial.jsx

This is your where your react code will go.

Copy the following code into your newly created '.jsx' file:

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

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

In your Index view, which is in the Home folder under views, place the following code:

@{ Layout = null; }
<html>

<head>
  <title>Hello React</title>
</head>

<body>
  <div id="content"></div>
  <script src="@Url.Content(" ~/Scripts/react/react.js ")"></script>
  <script src="@Url.Content(" ~/Scripts/react/react-dom.js ")"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js"></script>
  <script src="@Url.Content(" ~/Scripts/Tutorial.jsx ")"></script>
</body>

</html>

Now if you run the application you should get the following in your browser window: 'Hello, world! I am a CommentBox.'

Delicacy answered 19/10, 2016 at 7:1 Comment(0)

Recommended topics

Hot tags