React 入門

仕組みから理解する React + TypeScript

この教材は、React を「なんとなく動くもの」ではなく「なぜそう動くのか」まで理解することを目的にしています。JavaScript がまだあやしくても大丈夫なように、Part 0 は JavaScript のおさらいから始まります。

解説のとなりには、そのとき説明しているコードが並びます。読み進めるとコードが自動で切り替わり、話題になっている行が光ります。自分でコードを書く必要はありません。読んで、動かして、理解してください。

Part 0

React の前に

React のコードは JavaScript でできている。ここが曖昧なままだと、この先ずっと「なんとなく」で読むことになる。

Part 1

React は「DOM を操作するライブラリ」ではない。ここの発想の切り替えが最初の山になる。

Part 2

React で作るものは、突き詰めると「関数」と「その引数」でしかない。

Part 3

クリックに反応する、条件で出し分ける、配列を並べる。この 3 つで大半の画面は作れる。

Part 4

React でいちばん重要な概念。ここを丁寧にやると、この先が全部つながる。

Part 5

入力を受け取るという、アプリで最も頻繁に書く処理。

Part 6

いちばん誤用されるフック。まず「使わなくて済む方法」から学ぶ。

Part 7

「再レンダリング」が実際に何をしているのかを見る。ここから先は目に見えない話が増える。

Part 8

遅くなってから使う道具たち。先回りして使うと、かえって読みにくくなる。

Part 9

アプリが大きくなったときに、どこに状態を置くか。

Part 10

自分で書けるけれど、書かないほうがいいもの。よく使われるライブラリを、困りごとから逆算して見る。

Part 11

ここまでに出てきたものだけで、動く画面をいくつか作る。新しい道具は使わない。