【React】たにぐちまことさんのReact入門備忘録

Posted at 2024-08-15

はじめに

たにぐちまことさんのReact入門を拝見させていただきましたので、自分なりの備忘録としてまとめました。とてもためになる動画を配信していただき、ありがとうございます。

sampleという名のReactのプロジェクトを作成
$ npx create-react-app sample
サーバを起動
$ npm run start
（$ npm startでも良い。これは上記のエイリアス。）
babelがないとJSXが使えないが、create-react-appすればJSXが使えるようになる
JSXでは、class属性は、className と書かなければならない
JSXの中でJavaScript部分の変数や関数を使う場合は、{}で囲えば良い
JSXで属性値にJavaScript部分の変数や関数を設定する時は、""は不要。{}で囲むだけで良い
Bootstrap などを使いたい時は、プロジェクトディレクトリ -> public -> index.html にCDNをおけば良い。これがテンプレートだから。ゆえに、これの body -> divタグの中にJSXで書いたものが入れ込まれる
src -> Apps.js の内容が実行される
Apps.js に次のインポート文を追加する
import React from 'react’;

Reactがステートを監視してくれて、setState()を呼び出すと、Reactが自動的に画面を書き換えてくれる
ステートは、コンポーネントのコンストラクタ内で次のように定義する
this.state = {fuga : foo};
コンストラクタの引数に、例えばpropsを渡す
コンストラクタでは、最初にsuper(props);を記述する
コンポーネントのメソッドでsetState()を使うなら、コンストラクタの中でメソッドをバインドする。
this.bar = this.bar.bind(this);

URLを変更した時にどういう動きをするかを決める機能をルーターなどと呼ぶ
ルーターの機能をインストール
-% npm i -S react-router-dom
- npm -> Node Package Manager（Node.jsのパッケージ管理）
- i -> install
- -S -> --saveのショートハンド
ルーティングのAppの中、記述方法が変わっている模様
- $ npm list --depth=0でreact-router-domのバージョン確認
- react-router-dom@6.26.0 v6だった
- 記述を変更
  - <Route>を<Routes></Routes>で囲む
  - exact を削除
  - component部分を element={<Home />} に変更

Link
- Reactでは、<a>タグの代わりにLinkの機能を使った方がいい
- <Link to="URL">hoge</Link>
- URLが複雑になったときにスムーズに作れる機能を利用できる
Routeのパラメータ
- Routeのpathにパラメータを埋め込むことができる
- 例えば、blogの各記事のページをid（数字）で管理している時などに利用する。ページの数が増えて複雑になったとき、ひとつひとつ<Route>を記述するのは現実的でないから
- path="/blog/:id" のようにパラメータ名の前に:をつける
- パラメータは文字列として渡される
- コンポーネント内でパラメータを利用する方法

const { id } = useParams(); //URL中にidというパラメータがあれば受け取る
return <p>{id}番目の記事</p>; //{id}の部分がパラメータの値となる

以下は素のReduxでの内容

Reduxで行いたい処理を関数で書く際は、状態を表すパラメータ(名例:state)とactionを引数に渡す。その関数の中でswitch文を使い、action.typeの値によってやりたい処理を分ける
関数をcreateStore()の引数に渡し、返り値を変数(名前はstoreなど)に格納しておく
storeのdispatch() メソッドに、オブジェクトとして{type : type名}を渡して実行すると、上記の行いたい処理を呼び出すことができる
Storeという場所に値が保持されており、その値は、storeのgetState()メソッドで得ることができる

１ずつインクリメントしたい値が２ずつインクリメントされていたため、原因を調査
正しい仕様だった。Reactは、Reducerを意図的に２回実行する模様
バグを減らすためにReducerを純粋関数とすることが推奨されており、純粋関数でなければ、引数が同じ場合でも違う結果が返されるため、バグを早期に発見することができる
本番環境では、実行は１度。２度実行されるのは開発環境のときだけ