Web 開発

VisualStudioを使用してASP.NET Core+React(TypeScript)+MobXで動作するものをつくる(2/2)

投稿日:

前置き

みなさまお久しぶりです!グッチです!

お盆が明けて、そろそろ盆バテが解消されてきたころではないでしょうか?

最近、TVで盆バテという言葉を知ったので、ミーハーな自分はさっそく使ってみたのですが、盆バテという言葉自体は昔からあったんですかね?気になる・・・

それはおいといて、前回に引き続き、VisualStudioを使用してASP.NET Core+React(TypeScript)+MobXで動作するものをつくる(2/2)をやっていきたいと思います!

 

やってみよう~コンポーネント追加~

前回、ストアを作成したので、今回はストアを使用するコンポーネントを作成していきましょう。

・まず、ClientApp/src/ComponentsにMobx.tsxを作成してください。

・Mobxという名前のクラスコンポーネントを作成して、@inject(‘SampleStore’)と@observerを付与してあげます。

@inject(‘SampleStore’)を使うことにより、SampleStoreという名前のストアをMobxコンポーネントにinjectできます。

そうすることによって、Mobxコンポーネント内でthis.props.SampleStoreみたいな形で使用することができます。

@observerを使うことにより、ストアの監視対象の値に変更があった場合に、コンポーネントが再レンダリングされるようになります。

・あとは簡単にボタン配置とカウントの値表示を追加しときましょう。

 

やってみよう~ルート追加~

Mobxコンポーネントを作成したので、次はMobxコンポーネントを呼び出すためのルートを追加してあげましょう。

・App.jsを以下のように修正します。

 

やってみよう~Mobxへの画面遷移追加~

URLを直接変更してMobxページを表示するのはめんどくさいので、NavbarのアイテムにクリックしたらMobxページに遷移するリンクを用意しましょう。

・NavMenu.jsを開いて以下のように修正します。

 

やってみよう~Storeとコンポーネントをつなげる~

Storeを作成して、Mobxコンポーネントでinjectとかしてきましたが、実をいうとStoreを使用する準備はまだ完了していません。

これが最後の作業です。

・index.jsを開いて以下のように修正します。

 

やってみよう~動作確認~

これでやっと準備が整ったので、動作確認していきましょう!

・プロジェクトを起動して最初にでてくるホーム画面。

・右上の方にMobxへのリンクが表示されているのでクリック!

 

そうすると作成したMobxコンポーネントが表示されているかと思います!

アゲ↑クリックしたら1アップして、サゲ↓クリックしたら1ダウンするのが確認できたんじゃないでしょうか?

(出来ていない人は今一度コードの見直しお願いしますm(__)m)

 

最後

簡単にMobXの導入方法をお伝えしましたが、いかがでしょうか?

今回お伝えしたこと以外の使い方もあるので、ぜひMobXの公式をチェックしてみてください!

次回は、サーバーサイドのASP.NET Coreについて何か書こうかな~って考えてます!

余談ですが、.NET Core3.0がもう間もなくリリースされるので、楽しみですねo(^O^)o

ではでは(@^^)/~~~


-Web, 開発