Microsoft.UI.Reactorを触ってみる

ReactあるいはReact Nativeを少しでも触ったことのある人向けに書いています。

Microsoftから新しいフレームワークが発表されました。

Reactor is not a new UI platform.

Windows FormsやWPF、UWPなどに続くものではないようです。

とりあえず動かしたい人は.NET SDK 10.0.100以降があれば簡単にサンプルアプリを動かすことができます。以下のファイルを作成して

HelloReactor.cs

#:package Microsoft.UI.Reactor@0.1.0-preview.16
#:property OutputType=WinExe
#:property TargetFramework=net10.0-windows10.0.22621.0
#:property UseWinUI=true

using Microsoft.UI.Reactor;
using Microsoft.UI.Reactor.Core;
using static Microsoft.UI.Reactor.Factories;

ReactorApp.Run<MyApp>("Hello Reactor", width: 340, height: 200);

class MyApp : Component
{
    public override Element Render()
    {
        var (count, setCount) = UseState(0);

        return VStack(
            TitleBar("Hello Reactor"),
            VStack(12,
                Heading($"Count: {count}"),
                HStack(8,
                    Button("-", () => setCount(count - 1)),
                    Button("+", () => setCount(count + 1))
                        .AccentButton()
                )
            ).Padding(24)
        ).Backdrop(BackdropKind.Mica);
    }
}

dotnet runコマンドを実行するだけでサンプルアプリケーションが起動しました。

dotnet run HelloReactor.cs --arch x64

C#やWinUIが分からないモバイルアプリエンジニアでもソースコードを見れば「React Nativeとほぼ同じだ」と気づくのではないでしょうか。Reactorが描画するのはWinUI3のコンポーネントのようですね。

「使えるUIコンポーネントは何か？」「useEffectやuseMemoもあるのか？」という疑問に答えてくれるサンプルアプリケーションもありました。ReactorGalleryというアプリケーションです。

このリポジトリにはReactorGallery以外にも様々なサンプルアプリケーション(プロジェクト)があって、

• WinFormsInterop(Windows Formsの中にReactorを組み込む)
• ReactorCharting.Gallery(D3.jsを使ったグラフ描画)
• NavigationDemo

あたりが実務で参考になると思います。Reactor.AnalyzersやReactor.Devtoolsなどのプロジェクトも含まれており、ESLintやReact Developer Toolsに近いエコシステムも整備されつつあるようです。

ReactorGalleryは以下の手順でビルドできました。

git clone https://github.com/microsoft/microsoft-ui-reactor.git
cd microsoft-ui-reactor
dotnet build samples/ReactorGallery/ReactorGallery.csproj -p:Platform=x64

実際のコンポーネントとサンプルコードがセットになっています。

チュートリアルやAPIリファレンスなどの詳しい情報は公式ドキュメントを参照してください。