日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。いうのがあるんですね。コンポーネントも実装されてていい感じかも。ReactJavaScript界隈のフレームワークの組み合わせがファッキンホットですよね。個人的にはreactに頑張ってほしいと思いつつAngularJSも2が正式リリースされたら追いかけてみようかなというスタンスです。TypeScriptreact-routerをreduxで使うためのreact-router-reduxというものがあります。先日、これの型定義ファイルが公開されてたので使ってみました。react-router-reduxの公式サイトはこちらになります。React前の記事で、カメラからとった画像を取得することが出来るようになりました。今度はこれをアップロードしてみたいと思います。React最近はカメラ画像を取得することもできるらしい。ポイントは、inputのtypeをfileにしてacceptをimage/*:capture=cameraにするところです。撮影した画像のプレビューを表示するにはimgタグを使います。APIを使って画像を読み込んで使います。TypeScriptreact-routerで画面遷移のリンクといえばLinkタグかIndexLinkタグを使います。react-bootstrapのNavを使って画面の上部のタブみたいなのを作ろうとすると、Linkタグは使えません。そんな時は、プログラムからhistoryを制御してやるといいです。formを作ってみようと思いました。型定義にはそんなものなかった。TypeScriptreact-bootstrapを使うととても簡単です。以下のコマンドで必要なものがインストールできます。index.htmlではbootstrapのcssを読み込んでおきましょう。TypeScriptredux-formのformになるクラスにinitialValuesというプロパティに値を設定してやると、フォームデータが初期化されるくさい。TypeScriptredux-formのhandleSubmitに検証処理を渡すことでサブミット時に検証ロジックを走らせることができます。こいつは、非同期前提なのでPromiseを返す感じのシグネチャになってます。フォーム部分のコードの抜粋はこんな感じになります。React1つ前の記事で同期的な検証をやりました。redux-formは非同期な検証処理もサポートしています。使い方は簡単、Primiseを返す検証ロジックを作って、reduxFormメソッドを呼び出すときasyncValidateに渡すだけ。TypeScriptredux-form作るときにvalidateパラメータに検証関数を追加すればOKです。TypeScript入力フォームを作るのに便利そうなredux-formというのがあります。TypeScriptの型定義もあるので使ってみました。redux-formを使うには、reducerでReduxFormのreducerをformという名前でcombineReducersし...TypeScriptでredux-formを使ってみる2016-01-18Reduxで忘れがちなことReactReduxで小さなプログラムを書く練習を何回かしてて忘れがちなことをメモしておこうと思う。Reduxでは、store.dispatch(アクションクリエイターの関数(引数))という形で処理を書かないといけない。ReactReduxの勉強がでら、ログインして一覧画面が出てデータの編集ができるみたいなのを作ってみました。TypeScriptこういう表示とデータを疎結合にしたときに問題になるのがダイアログ系。頭をひねった感じこんなのでいけるんじゃないかっていう感じのが出来ました。アラートを出すコンポーネントを準備します。TypeScriptref属性って関数渡せるんですね。ReactReactとかやっててWebAPIを呼び出してやるようにすると、認証ってのがどうしても必要になってきます。WebAPI2でOAuth認証を行ってAPIをたたくところまでやってみようと思います。スタート地点は先日作ったReactApplicationの雛形です。WebAPI2でAjaxでOAuth認証するよ(ついでにTypeScriptとReact)2016-01-14ReduxってどうなってるんだってばよReactReduxが難しい。理解できたらいいんだろうけど。TypeScriptで開発するとき、何をどの順番で作っていけばすっきりするのかわからない。いうことで整理もかねて徒然なるままにBlogに向かいて書いてみたいと思います。WebAPI2でサーバーサイドを開発してクライアントサイドをReact使ってTypeScriptで開発することを想定したプロジェクトテンプレートを作りました。React過去にこんな記事を書いてて、react-nativeの型定義を手動で書き直してコンパイルするという変なことをやってたのですが、この方法をやらなくて済む構成を見つけました。React自分用メモ。tsconfig.jsonから。worldしてみました。ReactExpressを使ってサーバーサイドをTypeScriptで開発。Reactを使ってクライアントサイドをTypeScriptで開発。1言語で開発できるって素晴らしいことですよね。Codeをちょろっと試してみました。reactのコードがコンパイルできるようになるところまでを目指してやってみます。react-nativeがWindowsでも動いた(Androidだけ)ので、試しにTypeScriptで書いてみたいとおもいます。react-nativeっていうのを使うと、iOSとAndroidアプリまで作れるっていうじゃないですか。worldくらいを試してみたいと思います。Reduxをちょっとやり始めたので、無理やりですが画面遷移(react-router)を含めたTODOアプリサンプルを作ってみたいと思います。やりながら書くので、最終結果がダメでしたというオチになってるかもしれない点ご了承ください。React公式ドキュメントのここらへん。普通のSPAだと、AJAX呼び出しとかで非同期な処理が盛りだくさん。TypeScript先日見つけたInteractというライブラリを使って簡単なサンプルを作ってみました。灰色の場所をクリックすると矩形が追加されます。矩形はドラッグで移動させることと、端っこをつまむことでリサイズが可能です。C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。Blogの内容は個人の見解であり、所属する企業を代表するものではありません。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。