2017.10.02
Flux React
Reactとともに語られることの多い、Fluxというデザインパターンの理解についてまとめます。 なお本稿はFluxの概念が中心で実装コードは扱わないこと、あらかじめご了承ください。 Flux ReactはあくまでViewライブラリなので、データの流れ・状態遷移の管理は別途考える必要があります。 そこ …More Read
2017.10.02
create-react-app React TypeScript
Reactでデータ集合に対してリスト表示する方法をまとめます。 List データとしてarrayを考え、それをリスト表示します。 map()を用いてarrayの要素を<li>に射影する、が基本方針です。 表示だけならばこれで動くには動くのですが、コンパイル時に警告が出るはずです。 実はこ …More Read
2017.10.02
create-react-app React TypeScript
Reactにおいて、条件に応じた表示の切り替え方法についてまとめます。 要素を変数に入れる 条件による表示の分岐をさせたいとき、変数にJSX要素を入れておき、後からそれを入れ込むという方法がとれます。 今回の例ではstateのshowの値に応じて表示するか決定しています。また、ボタンのクリックにより …More Read
2017.10.02
create-react-app React TypeScript Webpack
create-react-appを用いて生成したReactプロジェクトにおいて、コンポーネントにCSSを適用する方法を紹介します。 インライン 通常のHTML要素がインラインでスタイルを適用できるとの同じ要領で、ReactコンポーネントもJSXの中にインラインでスタイルを記述することができます。 J …More Read
2017.09.22
React TypeScript
Reactでイベントの扱い方の基本を紹介します。 イベントハンドラ 今回はテキストの入力（inputタグの変更イベント）に応じて別要素の表示が変わるコンポーネントを作成してみます。 次のような動きです。 早速ですが上記のように動くコンポーネントを下に載せます。 JSX内のinput要素のonChag …More Read
2017.09.20
Material-UI React TypeScript
React+TypeScript環境にMaterial-UIを導入する手順と簡単な使い方を紹介します。 Material-UI Material-UIは、Google Material DesignをReactのコンポーネントとして実装したコンポーネント群です。 Material Designの基準 …More Read
2017.09.20
create-react-app React TypeScript
Reactの肝であるコンポーネントの基本についてまとめたいと思います。 React+TypeScriptの環境構築については前回の記事を参照。 React: v15.6.1 コンポーネント Reactはコンポーネント指向に基づいたライブラリです。 コンポーネントと呼ばれるUI部品を定義し、それらを組 …More Read
2017.09.13
create-react-app React TypeScript
SPAのライブラリ/フレームワークとしてはデファクトスタンダードとなった感があるReact。 （最近だとVue.jsの話題もよく見ますね） まあ今更感はありますが、Reactの素振りをまとめていきます。 Angularを使っているときにTypeScriptいいなと感じたので、今回React+Type …More Read
