7

ReactJS で記述された単一ページ アプリを使用して MVC 5 になる新しいプロジェクトを Visual Studio でセットアップしようとしています。そこで、ReactJS Web サイトのガイドに従いました。

プロジェクトを実行する最初の部分にたどり着きましたが、JSX が原因で構文エラーが発生しました (ブラウザーは完全に理にかなっているバニラ JavaScript として解釈したいようです)。だから私type="text/jsx"はscriptタグに追加しました。

全体として、私の 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>

チュートリアル.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 Developer Tools コンソールでエラーがまったく発生しません。

4

4 に答える 4

10

私はそれを理解しました-チュートリアルには2つのものが欠けています:

  1. スクリプトのインクルードは、型宣言を使用して次のように行う必要があります。

    <script type="text/jsx" src="/Scripts/Tutorial.jsx"></script>

  2. 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 を使用する必要はありません。JSX ハンドラーが Web.config ファイルで構成されていることを確認してください (.jsx のハンドラーが必要です)。

于 2015-01-29T02:03:11.567 に答える
2

最初に確認する必要があるのは、チュートリアルが異なるため、実際に ASP.NET Core ではなく ASP.NET MVC 5 アプリケーションを作成していることです。

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 アプリケーションを作成する場合は、次の手順に従います。

手順:

  1. 新しい MVC 5 プロジェクトを作成します。
  2. パッケージ マネージャー コンソールで、次の NuGet パッケージをインストールします。

インストール パッケージ react.js

インストール パッケージ React.Web.Mvc4

「スクリプト」内に「react」というフォルダが作成されます。

  1. Scripts フォルダーに新しい「.jsx」ファイルを作成し、次の名前を付けます。

チュートリアル.jsx

これは、反応コードがどこに行くかです。

  1. 新しく作成した「.jsx」ファイルに次のコードをコピーします。

var CommentBox = React.createClass({ 
    render: function() { 
        return (
          <div className="commentBox">
            Hello, world! I am a CommentBox.
          </div>
        ); 
     } 
   }); 

ReactDOM.render(
    <CommentBox />, 
     document.getElementById('content') 
);

  1. Indexビューの下のホーム フォルダーにあるビューに、次のコードを配置します。
@{ 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>

アプリケーションを実行すると、ブラウザ ウィンドウに次のように表示されます。私はコメントボックスです。

于 2016-10-19T07:01:20.047 に答える