Download to read offline
フロントエンド開発入門(React).pdf
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7. Reactとは? (2) State ofJS 2021
- 8. Reactとは? (3) ● フロントエンドロードマップ ●Reactロードマップ
- 9.
- 10. Reactの根本の概念を抑えたい理由 ● フレームワークは便利であるからこそ、実際の挙動がブラックボックスのように感 じるケースがある ● ReactはJavaScriptのライブラリでありそれ以上でもそれ以下でもない ●JavaScriptで動的にUIを変化させるということは、 DOM要素をJavaScriptで操作 するということ
- 11. DOMとは？？？ ● ざっくり：DOMはDocument ObjectModelの頭文字を取った言葉 で、HTML等のリソースをツリー状の構造で表現して JavaScript等で 操作可能にした物 ○ getElementById(‘id’) DOM Visualizer DOMとは(mdn) 何度調べてもわからない DOMに決着をつける
- 12. Reactで重要な概念 ● 宣言的UI (Declarative) ●仮想DOM(Virtual DOM ) ● コンポーネントベース(Component Based) ○ JSX Why did we build React これからReactを勉強する人が最初に見るべきスライド 7選 なぜ仮想DOMという概念が俺達の魂を震えさせるのか React公式
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19. 仮想(Virtual)DOMとは？ ● JavaScriptのオブジェクトでDOMを表現したもの ○ イメージ ●JavaScriptで直接DOMを書き換える場合 ○ リンク ● 仮想DOMを使用する場合 ○ 次のスライドへ
- 20. 仮想(Virtual)DOMを使用した 基本的なUI更新の仕組み Incremental vs VirtualDOM より ● UIを仮想DOMとして保持 ● 変更前後の仮想DOMを比較し違いを探す ● 違い部分の通りリアルな DOMを更新する 【React】仮想DOMって何！？コンポーネントのレンダリングと描画について理解しよう！
- 21.
- 22.
- 23.
- 24.
- 25.
- 26. JSXとは？ Introducing JSX JSXはJavaScript を拡張して、UI要素を記述するのにHTMLのような タグ構文が使えるようにしたもの (React入門「ReactのJSXとは？」より)
- 27.
- 28.
- 29.
- 30. Reactを試してみる ● Hello World! ●Classコンポーネント？関数コンポーネント？ ● State管理・更新・Props(useState) ● データバインディング(Todoリスト) ○ isCompletedを自分でやってみよう ○ 関数の渡し方 ● APIリクエスト(useEffect) ● 取得したリストの表示 ● ルーティング https://github.com/K-Sato1995/react-example https://stackblitz.com/
- 31.
- 32. State・Propsとは？ ● State: 各コンポーネント内部でもつ、コンポーネントの状態を管 理するもの ●Props: 親コンポーネントから子コンポーネントに値を渡すため の仕組み
- 33.
- 34.
- 35.
- 36. 告知 ● 11月にgitについての勉強会があります！！！！！ ● 本日の資料は別途公式の方から共有します ○その場でLine連携お願いします