読んだ本リスト
### 開発準備
vscodeのおすすめ拡張プラグイン
```
・Prettier ※ ...... コード自動整形ツール Prettier を VSCode に統合する。
・ ESLint ※ ...... JavaScript の静的コード解析ツール ESLint を VSCode に統合する。
・ stylelint ※ ...... CSS 用のリンター stylelint を VSCode に統合する。
・ Bracket Pair Colorizer ...... マッチする括弧を色分けして教えてくれる。
・ indent-rainbow ...... インデントの階層を色分けして見やすくしてくれる。
・ vscode-icons ...... 左ペインの Explorer のファイルアイコンをバリエーション豊かにしてくれる。
```
`npx create-react-app hello-world --typescript`
→ npx と いうのは npm のパッケージをいちいちインストールしなくてもそのバイナリが実行できるコマンド
※ --template=typescriptになっている
### 覚えておきたい構文
分割代入
```javascript
const obj = { name: 'Kanae', age: 24 };
const { name, age } = obj;
console.log(name, age); // Kanae 24
```
promise構文
```javascript
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
const greet = () => { console.log('お や す み ');
sleep(2000)
.then(() => {
console.log('起 き た ');
console.log('お は よ う ! ');
})
.catch(err => {
console.error('睡眠例外です:',err);
})
}
greet();
```
読みにくいから、async/awaitで書くことが多い。
promiseと同じ結果になるが、こんな感じでもかける。
```javascript
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
const greet = async () => { console.log('お や す み '); // awaitが実行されたのちに呼ばれる
try {
await sleep(2000);
console.log('起 き た ');
console.log('お は よ う ! ');
} catch (err) {
console.error('睡 眠 例 外 で す : ', err);
}
}
greet();
```
### 関数型
クロージャー
```javascript
const counterMaker = (initialCount) => {
let c = initialCount;
const increment = () => c++;
return increment;
};
const count = counterMaker(1); console.log(count(),count(),count()); //123
```
関数でコンポーネントを実装するときに、その中で外のスコープの変数を参照する関数を定義する ことはよくあるから、それは結果としてクロージャになるかな
### eslint
` yarn add -D eslint-plugin-react @typescript-eslint/eslint-plugin @typescript-eslint/parser`
### アプリの状態管理
#### Fluxパターン
Store とはとりあえずアプリケーション全体で保持するべき情報を蓄えたものと考えて。View から はそれを適宜参照することができる。そして何らかのイベントが起こったときに Action という『何を どうしたいか』という意図を表現したものが View から発行される。投げられた Action は Dispatcher によって処理され、Store の中身が書き換えられる
#### Redux
Reduxの三原則
- Single source of truth(信頼できる唯一の情報源)
アプリケーションの状態がただひとつの Store オブジェ クトによるツリー構造で表現されるということ
- State is read-only(状態は読み取り専用)
View やイベントのコールバックが Store の状態を直 接書き換えることが許されないということ。Store の変更のためには必ず Action を発行する必要がある。
- Changes are made with pure functions(変更は純粋関数にて行われる)
reducer ・・・ 『還元する』『減数分裂させる』
```
(prevState, action) => newState
```
#### 実際の使われ方
- 設定
reducerとactionを定義。
ルートdomでreduxのcreateStoreにreducerと初期値をセット。
react-reduxをインポートして、Providerとして呼べるようにして、<App />を入れ子にしてあげる。
- componentとreduxの繋ぎこみ
ContaierでcomponentとReduxをつなぐ