ReactJS.NET MVC tutorial doesn't work?

2019-02-17 20:14发布

站内问答 / JavaScript
422 3 6

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.

3条回答
Animai°情兽
2楼-- · 2019-02-17 20:59

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

查看更多
0人赞 添加讨论(0) 举报
放我归山
3楼-- · 2019-02-17 21:03

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.

查看更多
0人赞 添加讨论(0) 举报
Summer. ? 凉城
4楼-- · 2019-02-17 21:07

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:

  1. Create a new MVC 5 project.
  2. 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'

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

Tutorial.jsx

This is your where your react code will go.

  1. 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') 
);

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)