我正在尝试在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开发者工具控制台中没有收到任何错误。
我想通了 - 教程缺少两件事:
<script type="text/jsx" src="/Scripts/Tutorial.jsx"></script>
<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的处理程序)。
这是.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”。
您需要确保的第一件事是您确实创建了一个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应用程序,请按照以下步骤操作:
脚步:
Install-Package react.js
安装包React.Web.Mvc4
您会注意到'Scripts'中将创建一个名为'react'的文件夹
Tutorial.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
视图中,该视图位于视图下的Home文件夹中,请放置以下代码:@{ 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!我是一个评论框。
对我来说,即使我的系统是64位,我必须安装JavaScriptEngineSwitcher.V8.Native.win-x86
instead JavaScriptEngineSwitcher.V8.Native.win-x64
,它解决了这个问题。听到我为什么要安装x86软件包会很有趣。
PS:请注意,这是为了ASP.Net MVC。