ReactJS.NET MVC教程不起作用？

本文介绍了ReactJS.NET MVC教程不起作用？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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.

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

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.

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

In total, my HTML/JSX looks like this:

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，但教程似乎没有提到这一点。

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.

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

推荐答案

我想出来了 - 教程是缺少两件事：

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

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

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

< script type =text / jsxsrc =/ Scripts / Tutorial.jsx>< / script>

需要包含JSX变换器：

The JSX transformer needs to be included:

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

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

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.

更新：

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

Commenter @DanielLoNigro added this helpful tip:

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

这篇关于ReactJS.NET MVC教程不起作用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！