卒業研究とか部活に追われてあまりReactとか触れていなかったのでリハビリのつもりでやった。1日でガーッと書いたときの記録。コケたところとかも(どうせ後でまた同じところでコケるので)記録しておく。
どういうアプリ？
graphemesplitという、Unicodeで1文字をカウントするライブラリがある。それを使って文字数をカウントするだけのアプリ。ロジック部分はほぼないに等しいので、主にビューを作り込んでいた。
文字数カウント
作ってるとき思ったこと
今回はファイル分割すらせず1ファイルに全て書いた。70行以下に収まっているし、これくらいなら分割するほうが面倒。このファイル、かなりまとまっているし、結構あとあとまでテンプレートとして使いまわせそう。
流れとか
- 前につくったプロジェクトからwebpack.config.jsだとか色々引っ張ってくる
- それを眺めながら適当に叩いて直していく
- 形ができてきたらTypeScriptを導入(本当にビューしか書いていないので、React.FCくらいしか型が出てこないけど)
- バンドルサイズが大きすぎるからPreactを導入してみようと試みる
Preact導入
流れ見てもらえばわかるけど、Reactで書いた後にPreactを導入することにしたので、Reactから移行する方法について調べた。
Getting Started – Preact
どうやらpreactをインストールして、webpack.config.jsのresolve.aliasに設定するだけでいいみたい。TypeScriptの型もそれで通った。不要になったのでreactとreact-domをアンインストール。
コケた部分
TypeScript導入したらビルドできなくなった
これはめっちゃカンタンに解決できた。
import React from 'react' -> import * as React from 'react'
これだけ。
styled-componentsが効かない
styled-componentsはclassを振るので、それを受け取っていないと効かない
// NG
// const Component = (props) => <h1>{props.value}</h1>;
// OK
const Component = (props) => <h1 className={props.className}>{props.value}</h1>;
const StyledComponent = styled(Component)``;
設定ファイルどれを書けばいいんだ…
awesome-typescript-loaderを導入している場合、babelrcとかは要らなくて、webpack.config.jsとtsconfig.jsonだけあれば良い。babel関連はtsconfig.jsonに書いて、webpack.config.jsはその辺を気にしなくてよい。
input[type=checkbox]ってどうReactで扱えばいいんだ？
まあ何にも考えずに書くならこんな感じでOK
const CheckboxComponent : React.FC<{}> = () => {
const [flag, setFlag] = useState<boolean>(true);
return (
<label>
<input type="checkbox" checked={flag}
onChange={() => setFlag(v => !v)}/>
フラグ{flag ? 'onだよ!' : 'offだよ!'}
</label>
);
};
もうちょい捻るとこんな感じ
type Props = {
value: boolean,
onChange: (events: React.ChangeEvent<HTMLInputElement>) => void,
};
const CheckboxComponent : React.FC<Props> = ({value, onChange}) => {
const [flag, setFlag] = useState<boolean>(true);
return (
<label>
<input type="checkbox" checked={value}
onChange={onChange}/>
フラグ{flag ? 'onだよ!' : 'offだよ!'}
</label>
);
};
イベントハンドラの型わかんねえ…
まず、関数の型はこんな風に書ける。
type Props = {
value: string,
onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void,
};
型についてはVSCodeとかだとマウスオーバーすると出てくる。ありがたい時代になったものだな…Vimにもこの機能欲しいしちょっと調べるか
依存関係
- @babel/core
- awesome-typescript-loader
- webpack
- webpack-cli
- typescript
- @types/react
@types/react-dom
preact
- styled-components
これだけで出来るんだな…すごい
一発ネタだし、今回は特にテストとか書くつもりはない。
リハビリがてらやったけど、結構サクサクと書けて楽しかった。
