Reactの学習、主にReact Router,Reduxのメモ
はじめに
@seltzerさんのReact入門動画で学習した結果をまとめます。 www.youtube.com
学習の目的
主に動画の後半にあるReact RouterとReduxを知るためです。
結果
React Routerによる画面遷移、Reduxによる状態管理が出来ました。
ただここにReact Hooksを使用するとどうなるのか、最新の書き方なのか・・というのは気になりました。
学習メモ
動画1
Reactの最終目的がDOMを書き換えること。それよって画面を書き換えたり、もともとなかった要素を足せる。 renderとは表示、組み立てるという意味。
いつもcreate-react-appでテンプレを使用してしまうので、元々あるhtmlにreactの要素を足すのは新鮮でした。
動画2
VS Codeのショートカット、SHIFT+ALT+Fでインデントが直せる。
動画4
babelを使用しないとjsxは使用できない。(create-react-appなら最初から入っている) JSXでクラスを指定する場合はclassではなくclassName。classだとJavaScriptの命令と被る。 ブラウザでソースを確認するとclassとなる。
動画5
コンポーネント=パーツ。ヘッダ、フッタ、処理を分けるのに使う。 React.Componentを継承していて、render()の中に出力したいJSX(HTML)を書く。
constructorを作成し、引数のpropsを親クラスに渡す必要がある。 stateを関数で使用するときはbindを使用しないといけない。（ただこれは関数フックを使えば大丈夫なはず？）
動画6
画面遷移の機能をルータという。 ReactはReact Routerを使用する。 aタグで遷移することも出来るがReact RouterではLinkを使用する。 React Routerでリンクを自動で作成できる。
動画7
画面遷移時に値を受け渡しできるようにする＝ステート管理が必要。Reactでは Reduxが使われる。 aタグでの遷移だと値がリセットされるが、Linkを使用すると引き継がれる。 ブラウザの戻るボタンでも引き継がれる。
