Clik here to view.
ASP.NET WebAPI2でAjaxでOAuth認証するよ(ついでにTypeScriptとReact)
ReactとかやっててWebAPIを呼び出してやるようにすると、認証ってのがどうしても必要になってきます。ということでASP.NET...
View ArticleReactのrefの個人的に意外な指定方法
ref属性って関数渡せるんですね。こんな風に。exportdefaultclass IndexPage extends React.Component<IndexPageProps, IndexPageState> {// ref保持しとくフィールドprivate x: HTMLInputElement; ... 省略 ... private handleSubmit(e:...
View ArticleTypeScript + React + Reduxでalertダイアログを出す
こういう表示とデータを疎結合にしたときに問題になるのがダイアログ系。頭をひねった感じこんなのでいけるんじゃないかっていう感じのが出来ました。コンポーネントまず、アラートを出すコンポーネントを準備します。UIは持たないrenderメソッドはnullを返すだけのコンポーネントです。特徴は、componentWillReceivePropsでプロパティにメッセージを受け取ったときにalertを出すようにし...
View ArticleClik here to view.
TypeScriptでReactとRedux使って一覧と詳細画面みたいなのを作ってみた
Reduxの勉強がでら、ログインして一覧画面が出てデータの編集ができるみたいなのを作ってみました。サインインの画面が出てきてadmin/p@ssw0rdでサインインするとデータの一覧がでて、一応ページ切り替えが出来て編集リンクをクリックすると編集画面が出て編集して保存ボタンを押すと保存して成功したらアラートが出る感じ。課題WebAPIを呼び出してる間にプログレスとか出ない入力値の検証してない見た目い...
View ArticleReduxで忘れがちなこと
Reduxで小さなプログラムを書く練習を何回かしてて忘れがちなことをメモしておこうと思う。dispatch呼び忘れReduxでは、store.dispatch(アクションクリエイターの関数(引数))という形で処理を書かないといけない。こうすることで、Reducerの関数へ処理が渡っていく。でも、こう書いて満足してしまうことが稀によくある。アクションクリエイターの関数(引数);そう、dispatchし...
View Articlejsurlというライブラリが便利なのでTypeScriptから使おう
URLを文字列で組み立てるのがめんどくさい。そんな悩みを解決してくれるのがjsurlです。github.comTypeScriptの型定義はtsd install jsurl...
View ArticleTypeScriptでredux-formを使ってみる
入力フォームを作るのに便利そうなredux-formというのがあります。erikras.github.ioTypeScriptの型定義もあるので使ってみました。とりあえずシンプルな例から。redux-formを使うには、reducerでReduxFormのreducerをformという名前でcombineReducersしてやる必要があります。const reducer =...
View ArticleClik here to view.
React + TypeScriptのredux-formでバリデーションを行う
redux-form作るときにvalidateパラメータに検証関数を追加すればOKです。import * as React from 'react'; import * as ReactDOM from 'react-dom'; import * as ReduxForm from 'redux-form'; import * as Redux from 'redux';...
View ArticleTypeScript + Reactでredux-formを使って非同期の検証処理を行う
1つ前の記事で同期的な検証をやりました。redux-formは非同期な検証処理もサポートしています。使い方は簡単、Primiseを返す検証ロジックを作って、reduxFormメソッドを呼び出すときasyncValidateに渡すだけ。非同期の検証のロジックのトリガーとなるフィールドの名前を渡すこともできます。こいつらを指定すると、フォーカス外れたタイミングあたりで検証ロジックが呼び出されるようになり...
View ArticleTypeScript + Reactのredux-formでサブミット時に検証を行う
redux-formのhandleSubmitに検証処理を渡すことでサブミット時に検証ロジックを走らせることができます。...
View ArticleReact + TypeScriptでredux-formのformの値を初期化する
redux-formのformになるクラスにinitialValuesというプロパティに値を設定してやると、フォームデータが初期化されるくさい。注意点としては、redux-formの型定義ファイルにinitialValuesが定義されてないので自分でプロパティをはやしてやる必要があるという点です。interface FormData { lhsField: string; rhsField:...
View ArticleUWPでUserControlからメインページの画像を非表示にしたい
という感じのフォーラムの質問があった（解決されてたけど）のでGitHubにサンプルあげてみました。 Prism使ってます。github.comUserControlへのViewModelの伝搬させてる所がポイントっちゃぁポイントかも。 こんな感じでプロパティをUserControlに用意しておいてpublic MainPageViewModel ViewModel { get { return...
View ArticleClik here to view.
TypeScript + Reactでbootstrap
react-bootstrapを使うととても簡単です。以下のコマンドで必要なものがインストールできます。npm install react-bootstrap bootstrap --save tsd install react-boosstrap -saveindex.htmlではbootstrapのcssを読み込んでおきましょう。<!DOCTYPE...
View ArticleClik here to view.
TypeScript + Reactでredux-formを使ったDeep formのサンプル
以下の例にあるようなDeep formを作ってみようと思いました。erikras.github.io結果型定義にはそんなものなかった。解決策any最高！import * as React from 'react'; import * as Redux from 'redux'; import * as ReduxForm from 'redux-form'; import * as reducers...
View ArticleClik here to view.
React + TypeScriptでreact-bootstrapのNavとreact-routerの共存
react-routerで画面遷移のリンクといえばLinkタグかIndexLinkタグを使います。 でも、react-bootstrapのNavを使って画面の上部のタブみたいなのを作ろうとすると、Linkタグは使えません。そんな時は、プログラムからhistoryを制御してやるといいです。こんな感じにRouteを定義してvar router = ( <Router...
View ArticleReact + TypeScriptでスマホカメラの画像を取得するフォームを作る
最近はカメラ画像を取得することもできるらしい。ポイントは、inputのtypeをfileにしてacceptをimage/*:capture=cameraにするところです。撮影した画像のプレビューを表示するにはimgタグを使います。File APIを使って画像を読み込んで使います。ソースで書くとこんな感じ。import * as React from 'react';...
View ArticleClik here to view.
小ネタ。プロジェクトをソース管理（Gitなど）に追加する方法
プロジェクト作成時にソース管理に追加しそこねたら、ソース管理に追加するには自分でgit initとかしないといけないと思い込んでましたがそうではないんですね。ファイルメニューにしっかりソース管理に追加ってありました。
View ArticleReduxって難しい
stateに何を持てばいいのかわからない。入力項目はコンポーネントで保持する？アラートメッセージみたいな項目はstateに保持する？ダイアログとかってどうやって出すのがきれいなの？誰か参考になるサンプルがあれば教えてほしい…。
View Article今までKindleに出してきた本の紹介「WPF、UWP、React」
ということで宣伝です。Universal Windows app開発入門www.amazon.co.jpUniversal Windows appの本です。UWPじゃなくてWindows 8.1世代のソースコードを共有してWPとPCのアプリを開発するやつですね。思ったより売れなかったので続編を書く気力が失われた本になります。Visual...
View Article