Question

我正在尝试在Visual Studio中设置一个新项目，该项目将使用ReactJS编写的单页应用程序成为MVC 5。所以我跟着the guide on the ReactJS website。

我到了运行项目的第一部分，由于JSX，我得到了一个语法错误（浏览器似乎想把它解释为vanilla JavaScript，这非常有意义）。所以我在脚本标记中添加了type="text/jsx"。

总的来说，我的HTML / JSX看起来像这样：

Razor视图的HTML输出

<!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')
);

我不明白 - 我做错了什么？除了将type="text/jsx"添加到脚本标记之外，我已经按照教程中的说法进行了操作。我假设需要包含一些东西来处理将JSX转换为vanilla JS，但是教程似乎没有提到这一点。

我在Chrome开发者工具控制台中完全没有收到任何错误。

Answer 1

我明白了 - 教程缺少两件事：

因此应该使用类型声明来完成脚本包含：

<script type="text/jsx" src="/Scripts/Tutorial.jsx"></script>
需要包含JSX变换器：

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

因此Razor视图的完整HTML输出应如下所示：

<!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>

看起来他们需要更新他们的教程。

<强>更新

评论员@DanielLoNigro添加了这个有用的提示：

实际上如果你正在使用ReactJS.NET，你就不需要使用客户端JSXTransformer。只需确保在Web.config文件中配置了JSX处理程序（应该有.jsx的处理程序）。

Answer 2

这就是.jsx处理程序在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>

在这种情况下，脚本标记中不需要type =“text / jsx”。

Answer 3

您需要确保的第一件事是您确实在创建ASP.NET MVC 5应用程序而不是ASP.NET Core，因为教程不同。

对于ASP.NET MVC 4＆amp; 5：https://reactjs.net/getting-started/tutorial_aspnet4.html 对于ASP.Net Core：https://reactjs.net/getting-started/tutorial.html

如果要创建ASP.NET MVC 5应用程序，请按照以下步骤操作：

<强>步骤：

创建一个新的MVC 5项目。
在软件包管理器控制台中，安装以下NuGet软件包：

Install-Package react.js

Install-Package React.Web.Mvc4

您会注意到一个名为＆＃39;的反应文件夹。将在＆＃39; Scripts＆＃39;

在Scripts文件夹中创建一个新的＆＃39; .jsx＆＃39;文件并命名：

Tutorial.jsx

这是您的反应代码所在的位置。

将以下代码复制到新创建的＆＃39; .jsx＆＃39;文件：

＆＃13;

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

＆＃13;

在Index视图中，该视图位于视图下的主文件夹中，请输入以下代码：

@{ 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>

现在，如果你运行应用程序，你应该在浏览器窗口中看到以下内容：＆＃39;你好，世界！我是一个评论框。＆＃39;

Answer 4

对我来说，即使我的系统是64位系统，我也必须安装import而不是await Test.createTestingModule({ imports: [ GlobalModule1, GlobalModule2，它解决了问题。听到为什么我必须安装x86软件包会很有趣。

PS：请注意，尽管那是针对ASP.Net MVC的。

ReactJS.NET MVC教程不起作用？

4 个答案: