ReactJS.NET MVC 教程不起作用？答案

【问题标题】：ReactJS.NET MVC tutorial doesn't work?ReactJS.NET MVC 教程不起作用？
【发布时间】：2015-01-29 01:40:47
【问题描述】：

我正在尝试在 Visual Studio 中设置一个新项目，该项目将是 MVC 5，其中包含一个用 ReactJS 编写的单页应用程序。所以我关注了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>

教程.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 开发者工具控制台中没有收到任何错误。

【问题讨论】：

标签： javascript reactjs asp.net-mvc-5.2 reactjs.net

【解决方案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 的处理程序）。

【讨论】：

其实如果你使用ReactJS.NET，你不需要使用客户端JSXTransformer。只需确保在您的 Web.config 文件中配置了 JSX 处理程序（应该有一个用于 *.jsx 的处理程序）。
@DanielLoNigro 这是一个非常宝贵的提示，非常感谢！对此一无所知。

【解决方案2】：

这是在 web.config 中注册 .jsx 处理程序的方式：

<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"。

【讨论】：

【解决方案3】：

对我来说，即使我的系统是 64 位，我也必须安装 JavaScriptEngineSwitcher.V8.Native.win-x86 而不是 JavaScriptEngineSwitcher.V8.Native.win-x64，它解决了问题。听到我为什么必须安装 x86 包会很有趣。

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

【讨论】：

这里也一样。我很感兴趣为什么。我讨厌 32 位应用程序。
相同 - 使用 x64 时，我在控制台中收到 500 错误。
你救了我的命。但是很好奇为什么这么多人遇到这个问题，而官方网站却没有提及

【解决方案4】：

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

对于 ASP.NET MVC 4 和 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 包：

安装包 react.js

安装包React.Web.Mvc4

你会注意到在'Scripts'中会创建一个名为'react'的文件夹

在 Scripts 文件夹中创建一个新的“.jsx”文件并命名：

教程.jsx

这是你的反应代码的去向。

将以下代码复制到新创建的“.jsx”文件中：

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

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

在您的 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>

现在，如果您运行该应用程序，您应该会在浏览器窗口中看到以下内容：'Hello, world!我是评论框。'

【讨论】：