【React】React ことはじめ (ただの学習ログ) Part2

きっかけ

• 前回の以下記事の続き

学習の進め方

• 前回の本で触れられていなかったAPI呼び出しやルーティングの内容が触れられているReactハンズオンラーニング第2版で学習したいところだけメモしています。
• 前回と同じく、記事の記載に間違いがある場合、マサカリをお願いします…

学習内容

ステート管理

• アプリケーション全体のステート管理

  • 複数コンポーネントがステートを持つと複雑になるため、1箇所でステートを管理したい→最上位のルートコンポーネントで管理、参照は親から子コンポーネントへプロパティとして渡す、変更は子から親コンポーネントへ伝えステートを更新する

• コンテキスト

  • 巨大アプリケーションでのステート伝達の際に、中間コンポーネントが伝達のためだけにプロパティ設定が必要となり、複雑なアプリケーションとなってしまう。→コンテキストを使用することで解決。コンテキストプロバイダへデータを渡し、コンテキストコンシューマから読み出す

データ

• API呼び出し

  • fetch APIでHTTPリクエストを送信可能。GET, POST, PUTの場合はfetch APIのオプションとしてmethod内で指定。(axiosで実現する方法は別途確認)

• WebStorageへの保存

  • saveJSONでlocalStorageへの保存、loadJSONでlocalStorageからの読み出す。

ルーティング

• React Routerでルーティングを設定

遭遇したエラーとその対処

• Module not found: You attempted to import XXX which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

  • srcより上階層の資源を読み込もうとしたら発生。src配下に資源を移動、importのパスを修正

• Syntax error: Unterminated JSX contents

  • returnで書いていたJSXのタグの閉じ忘れが原因。

• Manifest: Line: 1, column: 1, Syntax error Manifest.json

  • create-react-app後にpublicの内容をindex.jsを除き、削除していたことが原因。manifest.jsonを復活。

• ESLintで’jsx-a11y/href-no-hash’ was not found

  • .eslintrc.json内でhref-no-hashをoffにする設定を追加。