5
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

React学習過程整理tips(備考)

5
Last updated at Posted at 2026-11-07

今Reactを学習していて大事だと気付いたこと

・ハンズオンをやっていてどのソースファイルに何が書いてあるか?を明確に把握するところから理解が始まる
・Reactの部品はimportするもの
・JSX記法に慣れるのが大事
(自分は棚上げにしてから1年位経ったが、途中実務で実際のプロダクトを扱ったので、だいぶ違和感が無くなったが、経験的なものなので個人的にはこれが1番ハードルが高いと感じた)
・Reactと言えば、一番大きな部品構成として関数のコンポーネントで管理される
・コンポーネントは、親コンポーネントと子コンポーネントと多重の箱構造にすることが出来る
・親コンポーネントから子コンポーネントに値を渡すことが出来、子コンポーネントで引数で受け取れ、propsと言う
・コンポーネントは上部の「レンダーロジック」とreturnする「JSX」によって構成される
・JavaScriptの主要な配列メソッド(特にmap, filter...etc)は押さえておけば淀みなく捗る
・短絡評価(&&, ||)を理解しておくとソースが理解しやすく読みやすくなり、コーディングする際にも捗りが違う
・最初の描画は「マウント」と呼ばれる
・「マウント」後の再描画は「再レンダリング」と呼ばれる
・「レンダリング」には、ざっくばらんに「レンダー」「コミット」「エフェクト」のフェーズがある
・Reactはstateが変わることによってコンポーネントが「再レンダリング」されるという基本
・「再レンダリング」が起こるのは、①stateが変わった時、②親コンポーネントが再レンダリングされた時、③参照しているContextの値が変わった時
(useContextは未履修)
・ReactのHooksは「レンダリング」に関する仕掛け
・useState、useCallback、useEffectが先ずはある
・useEffectは「レンダリング」の最後に来る「エフェクト」フェーズで発火する
・useEffectは「再レンダリング」を催すわけではない
・React Routerは結構ボリューム大きい(学習コストが第2のハードル並みに高いと感じる)

思うところ

フレームワークは業務ロジックありきで、本来はそもそも業務ロジックに集中できるようにする為の仕組みであることは忘れずに、Reactでのアプリケーション構築に励みたい

5
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?