Question

我启动了ASP.NET MVC项目并添加了以下资源：

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")

<script src="~/Scripts/require.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

@RenderSection("scripts", required: false)

Index.cshtml中的部分脚本：

<div id="root"></div>

@section scripts
{
    <script src="~/Scripts/ReactJS/Index.js" type="text/babel"></script>
}

文件本身：

import React from 'react';
import ReactDOM from 'react-dom';


ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('root')
);

结果是空白页面没有错误。我不想使用Node.js，我甚至不想使用require.js和babel.js，但似乎我必须这样做。 reactjs正常工作的最小依赖性是什么？

Answer 1

首先，确保ReactJS核心文件＆amp; Remarkable.js正确引用为：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/[version]/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/[version]/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/[version]/remarkable.min.js"></script>

（更多信息：ReactJS MVC / ReactJS Core MVC）

然后，在<head>标记或Scripts部分中添加JSX文件：

@section Scripts {
    <script src="~/Scripts/ReactJS/Index.jsx"></script>
}

假设你的<body>标签中有这个div容器要绑定...

<div id="root"></div>

然后，在JSX文件中，React脚本应如下所示：

// Index.jsx
var Root = React.createClass({
               render: function () {
                       return (
                          <h1>Hello, world!</h1>
                       );
               }
           });

ReactDOM.render(<Root />, document.getElementById('root'));

正如教程页面所说，BabelJS需要使用ES6功能，例如箭头功能和放大器功能。简洁的方法，或使用捆绑机制（BabelBundle而不是普通ScriptBundle）来加载JSX文件。

React无法在MVC项目中呈现简单的Hello World

2 个答案: