https://fullstackopen.com/en/part1
※“Full Stack Open 2019” by Matti Luukkainen, contributers,Houston inc,Ava Heinonen, Ilkka Kuisma, Harri Mehtälä and Jesper Pettersson is licensed under CC BY-NC-SA 3.0
見出し文（In this part, …）
このパートでは、ブラウザで実行されるコードを記述するために使用するReactライブラリに精通します。また、Reactを理解するために重要なJavascriptの機能についても見ていきます。
Introduction to React （React導入）
create-react-app コマンドを叩いて、Reactのアプリケーションのテンプレを作成して、Reactの基礎の解説とともに、少しづつ実装していく内容。
Reactアプリの基礎的な説明と、コンポーネント、JSXの説明（頭文字は大文字にする、{}でJavaScriptを書ける、propsでデータ渡せる）。
演習として、繰り返しのパターンをコンポーネント化する実装
Javascript
Javascriptの基礎の解説。
変数、配列、オブジェクト、関数の解説と書き方について学習。
クラスについても解説あるが、このチュートリアル全体では、クラスは使わない方針。
代わりにReactの機能のHooksを使っていくとのこと。
演習として、前項目で作成したReactアプリのリファクタ
（変数をオブジェクトに修正 → オブジェクト化した変数を配列に格納 → 配列をループで処理して複数表示する対応）
Component state, event handlers（コンポーネントの状態変数と、イベント処理）
コンポーネントのpropsの省略形の書き方、一行でのシンプルな書き方などの解説。
数字を＋１してカウントアップするカウンターの実装、タイマーを使って自動カウントアップ。
stateHookを使って、画面再描画する方法。
useState()の使い方の丁寧な解説。
イベント処理(onClick属性の設定）
親子間の状態変数を、propsで渡す実装
onClickに、useStateのセッターをそのまま指定して、エラーとなることの確認とその解説が丁寧。
Reactのレンダリング処理とstateHookのセッター呼び出しが、無限ループして Too many rendering… エラーの発生の仕組みを理解できる。
また、onClickに、関数の参照を設定しないとエラーになる（または、“関数を返す関数”を設定）ことの解説などもあり。
このへん結構ややこしいが、まずは仕組みと、駄目なパターンを覚えてればよさそう。
A more complex state, debugging React apps
管理する状態（変数）が複数ある場合の書き方と、ReactのDebug方法の解説。
ReactのHooksを使うのは変わらないが、管理したい状態（変数）が複数ある場合、その数だけuseState()を使うパターンと、useState()を1回だけ定義して、その中で、オブジェクトを使うことで複数の値を管理するような書き方の2つの解説。
基本的には、前者状態（変数）の数だけ、useState()を定義する書き方のほうが、簡単だし適切なことが多いとのこと。
useState()で、オブジェクトを管理すると、setState()で値を更新するときに、管理しているオブジェクト全部を更新するようにしないと駄目なため、一部だけ更新したいときにでも、無駄に更新しない値を設定する必要がある。
// 各状態（変数）ごとに、1つのuseStateを使う場合
const [value1, setValue1] = useState(0)
const [value2, setValue2] = useState(0)
setValue2(10) // value2 に10を設定
// １つのuseStateで、複数の状態を オブジェクト で管理する場合
const [values, setValues] = useState({hoge:0, huga:0})
setValues({ hoge: values.hoge, huga: 10}) // hugaだけ更新したい場合
setValues({ huga: 10}) // hugaだけ指定だと、valuesで管理する値が、hugaだけに上書かれる。hogeが消え去る。React用のChrome拡張機能を入れてDebugしやすくしつつ、Debeg手法の解説。
やってみて
React関係ないところでハマってしまって、このpart1に、8hほど掛かってしまった。 読み進めるだけなら4hかからないぐらいの内容かと思う。
わからないところあっても、気にせずさくさく進めて、あとから見直す、という方針でやれば、人によっては2,3時間の内容かと思う。
part1をまとめると、
- Reactの基礎
- モダンなJavascripの書き方
- Reactでシンプルなカウンターを作成
- 状態管理をするための useState() の丁寧な解説
- React のDebugのやり方
という内容でした。
