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.

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).

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.

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.'

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.

来源：https://stackoverflow.com/questions/28205649/reactjs-net-mvc-tutorial-doesnt-work

标签

javascript

reactjs

asp.net-mvc-5.2

reactjs.net