React hooksが書きやすそうだったので試す.
導入
$ npx create-react-app myapp --template typescript
$ cd myapp
$ yarn add reactn react-router-dom @types/react-router-dom
React Router
src/App.tsx
ここがindex.tsx(エントリーポイント)から呼ばれる大本のコンポーネント.
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const App: React.FC = () => {
return (
<div className="container">
<Router>
<Switch>
<Route path="/" exact>
</Route>
<Route path="/user/:id" exact>
</Route>
</Switch>
</Router>
</div>
);
}
export default App;
Routeタグの中に, 各ページに該当するコンポーネントを挟んでいく形になる
各ページの遷移は,
import { useHistory } from 'react-router-dom';
const history = useHistory();
<button onClick={() => history.push('/')}>Click Me</button>
って感じで, historyに履歴新規リンク突っ込めば勝手に遷移してくれる.
頻繁に使いそうなのでコンポーネント化して,
import { useHistory } from 'react-router-dom';
export const LinkButton: React.FC<{ path: string, buttonText: string }> = (props: { path: string, buttonText: string }) => {
const history = useHistory();
return (
<button onClick={() => history.push(props.path)}>{props.buttonText}</button>
)
}
としておいておけば,
<LinkButton path="/" buttonText="Click Me" />
みたいな感じで使える.
リンクは, パラメータの取得も行えて /user/:id みたいにしておけば,
import { useParams } from 'react-router-dom';
const { id } = useParams();
みたいに渡せる.
React Hooks
関数ベースのコンポーネントでは状態管理ができなかったけど, React Hooksによって可能になった.
state 管理
useState(デフォルト値)を呼ぶと, stateとその更新用関数が帰ってくる.
import React, { useState } from 'reactn';
const [count, setCount] = useState(0);
あとは, buttonのonClickとかでsetCount(更新後の値)を読んであげたり, 普通に変数としてcountを使えばいい.
レンダリング後の処理
import React, { useEffect } from 'reactn';
useEffect(() => console.log('This function is called after rendering'));
useEffectに渡した関数はレンダリング後に呼ばれる.
Context (親 => 子コンポーネントへの値の受け渡し)
親側(値を渡す側)は,
import React, { crerateContext } from 'reactn';
const CountContext = createContext({
count: 0
})
<CountContext.Provider value={{ count: 10 }}>
<渡したいコンポーネント />
</CountContext.Provider>
子側(受け取る側)は,
import React, { useContext } from 'reactn';
const { count } = useContext(CountContext);
// 使う
孫とかにも渡せる
ReactN
一般的には, 全体で共有する状態を管理する目的でReduxを使うが, 重いのでReactNを使う.
参考: Redux不要論と、グローバル状態管理ライブラリReactNの紹介
設定は, 通常のReactとかとかを ‘react'からじゃなくて ‘reactn’ から呼ぶようにするだけ.
値のセットと呼び出しには, setGlobal, getGlobalを使う.
import React, { setGlobal, getGlobal } from 'reactn';
setGlobal({
message: "Hello World"
});
const global: { message: string } = getGlobal();
console.log(global.message); // Hello World
どこから呼んでも値を取れるから, 全体で共通の状態を持ちたいだけならこれで十分な気がする(正直初心者の僕には, Reduxおもすぎてきつい).
使ったリポジトリ: kaito1002/reactn-ts-router
Vue派だったけど, 関数ベースのコンポーネントが想像以上に書きやすかったから手のひらクルーしそう.