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.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
