ASP.NET MVCプロジェクトでReactを使用

27077 ワード

(この文章は同時に本人の微信の公衆番号「dotNET毎日精華文章」に発表され、右のQRコードに注目してください.)
最近では,スパイクのマイクロアプリケーションを開発し,性能やUIライブラリのサポートを考慮してReactを用いてフロントエンドを開発している.
現在私のプロジェクトはABPフレームワークに基づくASP.NET MVC/WEB APIはバックエンドとし,AngularJSはフロントエンドとする.しかし,スパイク公式のUI(SaltUI)はReactパッケージに基づいていることが判明し,またAmazeUIのTouchバージョンもReactパッケージであり,React性能がより優れていることを考慮し,モバイル側のウェブページのフロントエンドのビジネスロジックがあまり複雑ではないことを考慮し,Reactを用いてスパイクマイクロアプリケーションページ面を開発しようとした.

ReactJS.NET紹介

ASP.NET MVCにReactを統合する最も簡単な方法はReactJSを使用することである.NET(http://reactjs.net/).次のような機能があります.
1,インスタントコンパイルJSXファイルはJS:HTMLで直接JSXファイルを引用し、ReactJS.NETは自動的にJSにコンパイルされ、サービス側にキャッシュされます.この方式は特に開発過程に適している.次のようになります.

bundles.Add(new JsxBundle("~/bundles/main").Include(
    // Add your JSX files here
    "~/Scripts/HelloWorld.jsx",
    "~/Scripts/AnythingElse.jsx",
    // You can include regular JavaScript files in the bundle too
    "~/Scripts/ajax.js",
));


<script src="@Url.Content("~/Scripts/HelloWorld.jsx")"></script>

2,流行の圧縮とマージツールでJSXをJSにコンパイル:Cassette(http://getcassette.net/)またはASP.NETに内蔵された圧縮マージ機能は、WebpackまたはBrowserifyを統合することもできます.次のようになります.

// In BundleConfig.cs
bundles.Add(new BabelBundle("~/bundles/main").Include(
    // Add your JSX files here
    "~/Scripts/HelloWorld.jsx",
    "~/Scripts/AnythingElse.jsx",
    // You can include regular JavaScript files in the bundle too
    "~/Scripts/ajax.js",
));


@Scripts.Render("~/bundles/main")

3.サービス・エンド・コンポーネント・レンダリングを実現します.アクセスポイント・コンポーネント・レンダリングを使用して、初期ページのロードを高速化できます.次のようになります.


@Html.React("CommentsBox", new {
    initialComments = Model.Comments
})   
<script src="https://fb.me/react-15.0.1.js"></script>
<script src="https://fb.me/react-dom-15.0.1.js"></script>
@Scripts.Render("~/bundles/main")
@Html.ReactInitJavaScript()

ReactJS.NETのインストールと使用

インストールも簡単です.あなたのプロジェクトASPによって.NETバージョンによって異なります.
1,ASP.NET MVC 4 and 5, Install-Package React.Web.Mvc4
2,ASP.NET Core, Install-Package React.AspNet
3,ASP.NET MVC 3, Install-Package React.Web.Mvc3
4,Cassetteを使用する場合はInstall-Package Cassette.React5,ASPを使用する場合.NET Bundling and Minification、さらにInstall-Package System.Web.Optimization.React詳細な使い方はReactJSを参照できます.NETのチュートリアル:http://reactjs.net/getting-started/tutorial.html

テクノロジーの選択と統合

私のプロジェクトはReactを使用しています.Web.Mvc 4は、インスタントコンパイルを用いることなくそのままSystemを利用する.Web.Optimization.Reactと内蔵ASP.NET圧縮マージ機能は統合されており(プロジェクトの他の部分で使用されているため)、サービス側レンダリングは使用されていません(サービス側レンダリングはReactConfig.csファイルにjsxファイルを1つずつ追加する必要があるため、jsxフォルダを追加するcommitをprする暇があります.そうすれば便利です).私の大まかな手順は以下の通りです.
1.Reactのjs、UIのjs、および自分のアプリケーションのjsxを含むいくつかのBundleを登録します.以下のようにします.

//common js libs
bundles.Add(new ScriptBundle("~/Bundles/MobileApp/libs/js")
    .Include(
        ScriptPaths.JQuery,
        ScriptPaths.Showdown,
        ScriptPaths.React_Addons,
        ScriptPaths.React_Dom,
        ScriptPaths.Abp,
        ScriptPaths.Abp_JQuery
    )
    .ForceOrdered()
    );
  //ui js libs
bundles.Add(new ScriptBundle("~/Bundles/MobileApp/libs/SaltUI", ScriptPaths.Cdn.SaltUI)
    .Include(ScriptPaths.SaltUI)
    .ForceOrdered());
  bundles.Add(new ScriptBundle("~/Bundles/MobileApp/libs/Dingtalk", ScriptPaths.Cdn.Dingtalk)
   .Include(ScriptPaths.Dingtalk)
   .ForceOrdered());
  //ui css
bundles.Add(new StyleBundle("~/Bundles/MobileApp/css/SaltUI", StylePaths.Cdn.SaltUI)
    .Include(StylePaths.SaltUI)
    .ForceOrdered());
  //app js
bundles.Add(new BabelBundle("~/Bundles/MobileApp/app/DingtalkBI")
    .IncludeDirectory("~/MobileApp/DingtalkBI", "*.jsx", true)
    //.Include("~/MobileApp/App.jsx")
    .ForceOrdered()
    );

ここで、私はapp jsの部分で、BabelBundleを通じて合併過程を実現してjsxのコンパイルを行い、私はjsxのディレクトリを含んでいるだけで、このディレクトリには入口コンポーネントと依存コンポーネントだけが必要で、appは必要ありません.jsxのようなファイル.
2、専用のControllerを追加し、Actionで対応するViewを返し、すべてのpropsコンテンツをカプセル化したView Modelを次のように渡します.

var vm = new ReactPropsViewModel
{
    Props1 = false,
    Props2 = "hello"
};
  return View(vm)

3.ビューファイルで関連するBundleを参照し、次のようにReactエントリコンポーネントを初期化します.

@model ReactPropsViewModel
@{
    var camelCaseFormatter = new JsonSerializerSettings();
    camelCaseFormatter.ContractResolver = new CamelCasePropertyNamesContractResolver();
}   
  <html>
<head>
    <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <meta content="" name="description" />
    <meta content="" name="author" />
  <link rel="shortcut icon" href="~/favicon.ico" />
  <title>ASP.NET MVC and React</title>
  @Styles.Render("~/Bundles/MobileApp/css/SaltUI")
</head>
<body>
    <div id="app"></div>
    @Scripts.Render("~/Bundles/MobileApp/libs/js")
    @Scripts.Render("~/Bundles/MobileApp/libs/SaltUI")
    @Scripts.Render("~/Bundles/MobileApp/libs/Dingtalk")
    @Scripts.Render("~/Bundles/MobileApp/app/DingtalkBI")   <script type="text/javascript">
        ReactDOM.render(
            React.createElement(Home, @Html.Raw(JsonConvert.SerializeObject(Model, camelCaseFormatter))),
            document.getElementById('app')
        );
    </script>
</body>
</html>

これでReactはASPと完璧にNET MVCが融合した.フロントエンドでバックエンドのapiをどのように呼び出すか、今Reactでどのように呼び出すか.

css優先度調整-全体設定a:hoverを解決する方法

(23)ASP.NET Core EF関係データベースモデリング