ReactJS.NET MVC 教程不起作用?
ReactJS.NET MVC tutorial doesn't work?
我正在尝试在 Visual Studio 中设置一个新项目,该项目将成为 MVC 5,其中包含一个用 ReactJS 编写的单页应用程序。所以我关注了the guide on the ReactJS website.
我到达了你 运行 项目的第一部分,由于 JSX(浏览器似乎想将其解释为 vanilla JavaScript,我得到了一个语法错误,这使得完美的感觉)。所以我在脚本标签中添加了type="text/jsx"
。
总的来说,我的 HTML/JSX 看起来像这样:
HTML 由 Razor 视图输出
<!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 转换为普通 JS,但教程似乎没有提到这一点。
我在 Chrome 开发人员工具控制台中完全没有收到任何错误。
我明白了 - 本教程缺少两件事:
脚本包含应该这样完成,并带有类型声明:
<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 应该有一个处理程序)。
您需要确保的第一件事是您确实在创建 ASP.NET MVC 5 应用程序而不是 ASP.NET 核心,因为教程不同。
对于 ASP.NET MVC 4 和 5:https://reactjs.net/getting-started/tutorial_aspnet4.html
对于 ASP.Net 核心:https://reactjs.net/getting-started/tutorial.html
如果您要创建 ASP.NET MVC 5 应用程序,请按照以下步骤操作:
步骤:
- 创建一个新的 MVC 5 项目。
- 在包管理器控制台中,安装以下 NuGet 包:
Install-Package react.js
Install-Package React.Web.Mvc4
您会注意到将在 'Scripts'
中创建一个名为 'react' 的文件夹
- 在 Scripts 文件夹中创建一个新的“.jsx”文件并将其命名为:
Tutorial.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
视图中,在视图下的 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>
现在,如果您 运行 应用程序,您应该会在浏览器中看到以下内容 window:'Hello, world! I am a CommentBox.'
这是在 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"。
对我来说,即使我的系统是 64 位,我也必须安装 JavaScriptEngineSwitcher.V8.Native.win-x86
而不是 JavaScriptEngineSwitcher.V8.Native.win-x64
,它解决了问题。听听为什么我必须安装 x86 包会很有趣。
PS:请注意,那是针对 ASP.Net MVC 的。
我正在尝试在 Visual Studio 中设置一个新项目,该项目将成为 MVC 5,其中包含一个用 ReactJS 编写的单页应用程序。所以我关注了the guide on the ReactJS website.
我到达了你 运行 项目的第一部分,由于 JSX(浏览器似乎想将其解释为 vanilla JavaScript,我得到了一个语法错误,这使得完美的感觉)。所以我在脚本标签中添加了type="text/jsx"
。
总的来说,我的 HTML/JSX 看起来像这样:
HTML 由 Razor 视图输出
<!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 转换为普通 JS,但教程似乎没有提到这一点。
我在 Chrome 开发人员工具控制台中完全没有收到任何错误。
我明白了 - 本教程缺少两件事:
脚本包含应该这样完成,并带有类型声明:
<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 应该有一个处理程序)。
您需要确保的第一件事是您确实在创建 ASP.NET MVC 5 应用程序而不是 ASP.NET 核心,因为教程不同。
对于 ASP.NET MVC 4 和 5:https://reactjs.net/getting-started/tutorial_aspnet4.html 对于 ASP.Net 核心:https://reactjs.net/getting-started/tutorial.html
如果您要创建 ASP.NET MVC 5 应用程序,请按照以下步骤操作:
步骤:
- 创建一个新的 MVC 5 项目。
- 在包管理器控制台中,安装以下 NuGet 包:
Install-Package react.js
Install-Package React.Web.Mvc4
您会注意到将在 'Scripts'
中创建一个名为 'react' 的文件夹- 在 Scripts 文件夹中创建一个新的“.jsx”文件并将其命名为:
Tutorial.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
视图中,在视图下的 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>
现在,如果您 运行 应用程序,您应该会在浏览器中看到以下内容 window:'Hello, world! I am a CommentBox.'
这是在 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"。
对我来说,即使我的系统是 64 位,我也必须安装 JavaScriptEngineSwitcher.V8.Native.win-x86
而不是 JavaScriptEngineSwitcher.V8.Native.win-x64
,它解决了问题。听听为什么我必须安装 x86 包会很有趣。
PS:请注意,那是针对 ASP.Net MVC 的。