ReactLeanCheck.md

React の理解度を図る質問集

この内容を知っていれば React が書けるという話ではないですが、React Lean に記載されているレベルの事を知らないというのは避けられます。

それぞれの解像度を上げる事でフロントエンドにおける議論が出来る土台になります。

React の流儀

1. 単一責任の原則とは何ですか？
   1. https://en.wikipedia.org/wiki/Single-responsibility_principle
2. 単一責任の原則を React でどのように適用しますか？
3. React コンポーネントと JSON の関係性は何ですか？
   1. https://ja.react.dev/learn/thinking-in-react#step-1-break-the-ui-into-a-component-hierarchy
4. アプリを開発する際のアプローチは？
   1. https://ja.react.dev/learn/thinking-in-react#step-2-build-a-static-version-in-react
   2. なるべくシンプルに実装する事が重要です
5. state とは何ですか？
   1. https://ja.react.dev/learn/thinking-in-react#step-4-identify-where-your-state-should-live
   2. useState の振舞いや挙動を理解しているか？
      1. Array や Object の更新なども理解しているか？
6. props とは何ですか？
   1. props とコンポーネントレンダリングの関係性を理解しているか？
   2. props と sate がコンポーネントに与える影響は何か？
7. 単一方向のデータフローとは何ですか？
   1. props が分かっているなら答えられるはず
8. 逆方向のデータフローとは何ですか？
   1. 親へのイベントの伝達を理解しているか？

React コンパイラについて

1. JSX とは何ですか？
   1. https://ja.react.dev/learn/describing-the-ui#writing-markup-with-jsx
   2. https://www.typescriptlang.org/docs/handbook/jsx.html
2. コンパイルされたコードはどのようになりますか？
   1. その注意点は？
   2. 典型的な問題点は何が考えられますか？
3. JS のビルドプロセスについて理解していますか？
   1. Babel とは何ですか？
   2. Webpack とは何ですか？
   3. webpack と vite の違いは何ですか？

コンポーネントの理解

1. コンポーネントのエクスポート方法は？
   1. https://ja.react.dev/learn/importing-and-exporting-components
   2. そもそもエクスポートとは？
   3. default とは何ですか？
   4. コンポーネントのインポート方法は？
   5. コンポーネントのインポート PATH のカスタマイズ方法は？
      1. よくある @hoge/huga みたいな指定をする方法は？
2. JSX でのコンポーネントの使い方は？
   1. https://ja.react.dev/learn/writing-markup-with-jsx#the-rules-of-jsx
   2. コンポーネントの命名規則は？
   3. JSX への JS コードの組み込み方法は？
   4. {{ }} と { } の違いは？
3. コンポーネントを条件に応じてレンダリングする方法とその名称は？
   1. https://ja.react.dev/learn/conditional-rendering
4. コンポーネントをリストとしてレンダリングする方法とその名称は？
   1. https://ja.react.dev/learn/rendering-lists
5. コンポーネントの純粋さとは？
   1. 関数型プログラミングとは？
   2. 副作用とは何ですか？
6. DOM とは何ですか？
   1. https://ja.react.dev/learn/understanding-your-ui-as-a-tree
   2. 仮想 DOM とは何ですか？
      1. https://auth0.com/blog/face-off-virtual-dom-vs-incremental-dom-vs-glimmer/#React-js--Virtual-DOM
   3. 仮想 DOM と DOM の違いは何ですか？
   4. https://blog.logrocket.com/virtual-dom-react/
7. React のインタラクティビティを理解しているか？
   1. https://ja.react.dev/learn/adding-interactivity
   2. 値の更新イベントには癖があり、直感と反する事があるので注意が必要
8. React のイベントハンドリングについて理解しているか？
   1. https://ja.react.dev/learn/responding-to-events
9. prop drilling とは何ですか？
   1. https://ja.react.dev/learn/passing-data-deeply-with-context
   2. 問題の本質とその解決策は？
10. useContext の利用方法は？

エスケープハッチについて

1. エスケープハッチとは何ですか？
   1. https://ja.react.dev/learn/escape-hatches
2. React で基本的に推奨されない操作は？
   1. DOM API を直接触る事について
   2. ref を使う事について
   3. useEffect について
   4. なぜ推奨されないのか？