React入門 練習問題・過去問対策（全57問・解説付き）
Reactの基本概念や用語を理解するための問題。すべての問題に正解と解説が付いています。アプリで解くと正解するたびにレーティングが上がり、実力の伸びが目に見えます。
- 問1. Reactコンポーネント内で次のコードがある場合、constの後に続く「handleClick」は何を表していますか？ …
- 問2. Reactの関数コンポーネントでのアロー関数の利用について、最も現代的で推奨される書き方はどれですか？
- 問3. あるReactアプリケーションで、Button.jsというファイルから以下のようにエクスポートされています。 ```ja…
- 問4. Reactのレンダリングで次のJSXコードがある場合、「?」と「:」の記号は何を表していますか？ ```{isLogge…
- 問5. Reactの条件付きレンダリングで次のコードがある場合、画面表示はどうなりますか？ ```jsx const [isLo…
- 問6. Reactにおいて、次のうち関数コンポーネントの利点として最も適切な説明はどれですか？
- 問7. 次のuseStateを使ったコンポーネントで、ボタンを3回クリックした後の表示はどうなりますか？ ```jsx func…
- 問8. Reactで親コンポーネントから子コンポーネントにデータを渡す方法は？
- 問9. 次のReactコンポーネントのコードを見てください。 ```javascript function Notificati…
- 問10. Reactでリストを表示する次のコードについて、最も適切な説明はどれですか？ ```javascript functio…
- 問11. Reactにおいて、JSXの中に通常のJavaScript式を埋め込む際に使う正しい記法はどれか。
- 問12. Reactの単方向データフロー（one-way data flow）に関する説明として正しいものはどれか。
- 問13. Reactにおける「Virtual DOM」の説明として正しいものはどれか。
- 問14. Reactで関数コンポーネントを定義する際の命名規則として正しいものはどれか。
- 問15. 次のコードを実行してボタンを1回クリックしたとき、コンソールに出力される値として正しいものはどれか。 ```jsx fu…
- 問16. Reactの<React.Fragment>（または短縮記法<>...</>）の役割として正しいものはどれか。
- 問17. ReactのJSXで、HTML要素にCSSクラスを指定する際に使用する正しい属性名はどれか。
- 問18. Reactでフォームの入力欄（input要素）を「制御されたコンポーネント（controlled component、＝…
- 問19. Reactにおいてカスタムフック（＝コンポーネント間でロジックを再利用するための独自関数）を作成する際の命名規則として正…
- 問20. Reactでボタンクリック時にhandleDelete関数へ引数idを渡したい場合、正しい記述方法はどれか。
- 問21. Reactにおいて、Hooks（useStateやuseEffectなど）を使用する際の正しいルールはどれか。
- 問22. Reactにおけるstateとpropsの違いに関する説明として正しいものはどれか。
- 問23. ReactのJSXでインラインスタイルを指定する際の正しい記法はどれか。
- 問24. Reactにおけるchildren propの説明として正しいものはどれか。
- 問25. 次のReactコンポーネントで、フォーム送信時にページの再読み込みを防ぐために???に入れるべき正しいコードはどれか。 …
- 問26. Reactの関数コンポーネントでpropsにデフォルト値を設定する方法として正しいものはどれか。
- 問27. Reactにおいて、配列データをStateとして管理する際の正しい更新方法はどれか。
- 問28. ブラウザの拡張機能である「React Developer Tools」の主な用途として正しいものはどれか。
- 問29. ReactのJSX構文における「タグの閉じ方」のルールとして正しいものはどれか。
- 問30. Reactにおける「StrictMode（<React.StrictMode>）」の主な役割として正しいものはどれか。
- 問31. ReactのuseEffectフックでコールバック関数から別の関数（クリーンアップ関数）を返した場合、その返された関数が…
- 問32. Reactのイベントハンドラに渡される「SyntheticEvent（合成イベント）」の説明として正しいものはどれか。
- 問33. ReactにおけるStateの「自動バッチング（Automatic Batching）」機能に関する説明として正しいもの…
- 問34. Reactの「Portals（ポータル）」機能の目的と役割に関する説明として正しいものはどれか。
- 問35. Reactにおいて、値を保持するが更新してもコンポーネントの再レンダリング（再描画）をトリガーしないフックとして正しいも…
- 問36. Reactにおいて、深くネストされたコンポーネントへ直接データを渡し、中間のコンポーネントを経由する「Props Dri…
- 問37. Reactの「useMemo」フックの主な役割に関する説明として正しいものはどれか。
- 問38. Reactの「Error Boundary（エラーバウンダリ）」の目的として正しいものはどれか。
- 問39. Reactで`useState`を使用して、現在の状態に基づいて新しい状態に更新する際、最も安全で推奨される方法として正…
- 問40. Reactの`useEffect`フックで、第2引数（依存配列）を完全に省略した場合の挙動として正しいものはどれか。
- 問41. Reactの`useCallback`フックの主な役割として正しいものはどれか。
- 問42. Reactにおける`React.memo`の主な役割として正しいものはどれか。
- 問43. Reactにおいて、`useState`ではなく`useReducer`フックを使用する方が適しているとされる一般的なケ…
- 問44. Reactにおいて、`React.lazy`と`<Suspense>`を組み合わせて使用する主な目的として正しいものはど…
- 問45. Reactで意図的に生のHTML文字列を直接DOMに挿入するための属性として正しいものはどれか。
- 問46. 親コンポーネントから子コンポーネント内の特定のDOM要素に対して参照（Ref）を渡したい場合に使用する関数として正しいも…
- 問47. React 18以降で、Reactツリーを管理するためのルートを作成し、アプリケーションを初期化するメソッドとして正しい…
- 問48. DOMの変更がブラウザの画面に描画される直前に、同期的に副作用（＝外部システムとのやり取りやDOMの測定など）を実行する…
- 問49. Reactのカスタムフック（＝独自に定義したフック）が返すことのできる値の形式に関するルールとして正しいものはどれか。
- 問50. 次のコードを実行した場合、画面に表示される内容として正しいものはどれですか？ ```jsx import React, …
- 問51. 次のコードを実行した場合、ボタンをクリックしたときの動作として正しいものはどれですか？ ```jsx import Re…
- 問52. 次のコードを実行した場合、画面に表示される内容として正しいものはどれですか？ ```jsx import React, …
- 問53. 次のコードを実行した場合、コンソールに表示される内容として正しいものはどれですか？ ```jsx import Reac…
- 問54. 次のコードを実行した場合の動作として正しいものはどれですか？ ```jsx import React, { useSta…
- 問55. 次のReactアプリケーションでエラーが表示されました。コードを見て、最も考えられる原因は何ですか？ **エラーメッセー…
- 問56. 次のReactアプリケーションでエラーが表示されました。コードを見て、最も考えられる原因は何ですか？ **エラーメッセー…
- 問57. 次のReactアプリケーションでエラーが表示されました。コードを見て、最も考えられる原因は何ですか？ **エラーメッセー…