【リリース間近】Node.js不要でASP.NET CoreのReactフロント開発が可能に？JsxCoreとは一体なんなのか

フロントに React や TypeScript を使いたいが、そのために Node.js や npm、バンドラーの一式を .NET プロジェクトへ持ち込むのは重い——多くの ASP.NET Core 開発者が感じてきた悩みです。英国の開発者 David Whitney 氏が公開間近の JsxCore は、この構図を根本から変えます。ASP.NET Core のビューを JSX/TSX で書き、React または Preact でレンダリングするビューエンジンで、Node.js を前提とせず .NET SDK だけで動くのが最大の特徴です。

この記事では JsxCore の要点を、図解とコードで整理します。

🆕 続報（後編）あり — JsxCore はその後 1.0.0 として正式リリースされ、作者は次に Astro へ C# を持ち込む「AstroSharp」 を発表しました。
👉 【Ver1.0到達🎉】ReactネイティブなJsxCoreが正式リリース！次はAstroにC#を持ち込むAstroSharpへ

この記事（本家）で分かること

• JsxCore とは何か — .tsx を ASP.NET Core のビューとして返す JSX/TSX ビューエンジンの全体像
• 使い始める最小構成 — dotnet add package JsxCore ＋ Minimal API ＋ Index.tsx
• 仕組み — サーバー描画が .NET プロセス内で動き、レンダリング中に C# サービスを同期で直接呼べる
• 型の自動生成 — C# のモデルから TypeScript 型を生成し、dotnet: インポートでドリフトを防ぐ
• 開発体験（DX） — Node.js なしで npm を使える・ゼロ設定・ホットリロードで TS エラーをオーバーレイ表示
• Blazor との違い — 「C# 完結」ではなく「React/TSX の書き味を .NET に持ち込む」立ち位置

さわり：Minimal API から .tsx を返す

Node.js のインストールは不要。dotnet add package JsxCore して、ビューを返すだけです。

using JsxCore.Hosting;
using JsxCore.Mvc;

var builder = WebApplication.CreateBuilder(args);
builder.AddJsxCore();
var app = builder.Build();

app.UseJsxCore();
app.MapGet("/", () => Results.Extensions.Jsx("Home/Index", new { name = "World" }));
app.Run();

// Views/Home/Index.tsx
export default function Index({ model }: { model: { name: string } }) {
    return <h1>Hello {model.name}</h1>;
}

.tsx 側では import type { IndexModel } from "dotnet:SampleApp.React" のように、C# のモデル型を dotnet: スキームでそのまま取り込めます。

もっと詳しく

続き（dotnet: 型インポートの実例、C# サービスを直接呼ぶ .NET globals デモ、ホットリロードのエラーオーバーレイ、従来スタックとの比較、開発者の声、FAQ）は本家の記事で図解つきで解説しています。
👉 【リリース間近】Node.js不要でASP.NET CoreのReactフロント開発が可能に？JsxCoreとは一体なんなのか | WithNext.NET

そして本記事の**続き（後編）**では、JsxCore 1.0.0 の正式リリースと、Astro に C# を持ち込む AstroSharp を取り上げています。

👉 後編：【Ver1.0到達🎉】ReactネイティブなJsxCoreが正式リリース！次はAstroにC#を持ち込むAstroSharpへ

参照元: JsxCore (GitHub)

---

.NET / C# のモダナイゼーション、パフォーマンス最適化、AI 活用などの実践記事を WithNext.NET で発信しています。