时间戳

首页 > 解决方案 > 使用 ASP.NET MVC 5 应用程序设置 ReactJS

javascript - 使用 ASP.NET MVC 5 应用程序设置 ReactJS

问题描述

我刚开始学习 ReactJS，我正在尝试使用 ASP.NET MVC 应用程序来设置它，我只想创建一个示例应用程序。

我安装了节点版本 v8.12.0 和 npm 版本 6.10.3

创建了一个空的 MVC 5 应用程序，其中一个名为 Scripts 的文件夹中有一个新文件夹 Jsx。

在 Jsx 文件夹中，我创建了 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.Html 我已经引用了这些文件。

<div id="content"></div>
<script src="@Url.Content("~/Scripts/react/react.js")"></script>
<script src="@Url.Content("~/Scripts/react/react-0.12.2.min.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/Jsx/Tutorial.jsx")"></script>

当我尝试加载 Index.html 时，我在页面上看不到任何内容，在 chrome 开发人员工具中，我看到以下错误

Tutorial.jsx:1 Failed to load resource: the server responded with a status 
of 500 (Internal Server Error)

不确定为什么它无法加载 tutorial.jsx。

尝试用 替换<script src="@Url.Content("~/Scripts/Jsx/Tutorial.jsx")"></script>，<a href="~/Scripts/react/Jsx/Tutorial.jsx"></a>错误消失了，但屏幕上没有显示输出。

标签： javascriptasp.net-mvcreactjswebpack

解决方案

您不能在您的网站中包含这样的 jsx。尝试使用 webpack 之类的工具将 jsx 转换为 js 即可使用。你可以看看我如何设置 webpack 将 jsx 转换为 js

请点击此处的链接

下面的小代码片段。我正在使用 babel-loader 将 jsx 和 js es6 语法转换为浏览器可读的 js 代码

{
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    loader: ["babel-loader", "eslint-loader"]
}

转换为 js 文件后，您可以将 js 文件包含到您的视图中

推荐阅读