はじめに
React+TypeScript の勉強を始めてからまだすごく初期段階なのですが、前回の記事でCodePenを利用出来ることがわかったので、いつでもデモとソースを見る事ができるサンプル集を作っておくと便利かも、と思いました。
作って書き足していきます。
サンプル集
CodePen でのテンプレート react-typescript-template。Reactのロゴが使えなかったので、CSSで作ったアイコンを回しています。css animation のデモにもなっている。デモとソースコード
カウンター react-countapp。シンプルな例ですが、useEffect, useState を使っています。TypeScript の型定義 union type 、Msg と switch, prevCount 使ったりと盛り沢山です。デモとソースコード
react による form タグの処理 react-form。簡単に言うと、html の管理に任せず、useState を使う。onChange => handleChange => setInputValue => handleSubmit と一見面倒だが全て React で管理出来るのですっきりします。デモとソースコード
React本家チュートリアルのスターター react-tutorial-starter。React本家チュートリアルはとても良く出来ているので、これ以外の方法でReactを勉強している人はぜひ読んで欲しいのですが、TypeScript でやりたい、と言う人はスターターコードでつまずくかもしれない。私の場合そうでした。とりあえず書き直したものをあげておきます。チュートリアルとは違っているけど参考になると思う。デモとソースコード
ハローワールド react-hello-world。普通のハローワールドですが、hello と言う変数に
<h1>Hello, World!</h1>を代入して、JSX 表記で{hello}で呼び出した物を App の中で return する事によって render させている。デモとソースコードレスポンシブ・デザイン react-responsive-dot。幅をいじると中身の表示が縦並びになったり、横並びになったりします。ccs で
@mediaを使って、その中でdisplayをいじくっている。codepen では codepen 全体の幅を変えてみてください。三段階に変化します。 デモとソースコードCSS だけで描いた国旗 react-css-flags。これは CodePen にあったものを TypeScript と普通の CSS に書き直したものです。元は Sass(SCSS)と Html で書かれていました。CSS だけでこんなにも複雑な絵が描けるという勉強になりました。 デモとソースコード
正三角形を描く react-css-equilateral-triangle。正三角形や四面体が好きです。CSS もバージョンアップしてこういうのもいずれは簡単に描けるようになると思うので今の機能で工夫してなんになる、と思わないでもない。border を使って描くので辺の長さが一定とかが使えず、高さを手で計算して入れる。css の calc で平方根が使えない。デモとソースコード
transtionサンプルコード react-css-transtion-base。transition と transform と translate に混乱してしまったのでベースとなる transition のサンプルを作っておく。デモとソースコード
transtion durationサンプルコード react-css-transtion-duration。デモとソースコード
transition-timing-function デモとソースコード
transition-delay サンプル。デモとソースコード
transition-shorthand サンプル。デモとソースコード
transform-scale サンプル。デモとソースコード
transform-rotate サンプル。デモとソースコード
transform-translate サンプル。デモとソースコード
transform-skew サンプル。デモとソースコード
transform-origin サンプル。デモとソースコード
multiple-transform サンプル。デモとソースコード
transform-matrix サンプル。 デモとソースコード
offload-hover サンプル。デモとソースコード
textarea タグの処理 react-textarea。デモとソースコード
select タグの処理。 react-selected。デモとソースコード
select multiple の処理 react-select-multiple。デモとソースコード
multiple input の処理 react-form-multiple-input。デモとソースコード
multiple input の処理 react-form-multiple-input-checkbox。 デモとソースコード
react-functional-component-props。デモとソースコード
css で描いた正三角形を回転する。react-css-equilateral-triangle-rotate。 デモとソースコード
