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

Question

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

我安装了node版本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> ，错误消失，但屏幕上没有显示任何输出。

Answer 1

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

点击链接here

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

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

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