deck.glで学ぶReact入門 (ハンズオン)

Transcript

1. 0 deck.glで学ぶReact入門 (ハンズオン) 2022-10-21 第18回NearMe技術勉強会 Kenji Hosoda
2. 1 こちらのリポジトリでハンズオンします https://github.com/kenji4569/hello-deck-gl
3. 2 下準備 • Node.jsをインストールする • リポジトリをダウンロード • npm install (パッケージをインストール) • npm start (Node.jsを実行)
4. 3 3 https://deck.gl/ ソースの構造を理解しよう • まずはブラウザで表示 • package.jsonの役割 • webpackについて • index.htmlからどのように javascriptが呼び出されているか • deck.glについて
5. 4 4 02_plane.jsを理解しよう • importの方法 • JSXについて • initialViewStateを変更してみよう • console.logでデバッグしてみよう
6. 5 5 03_polygon.jsを理解しよう • useStateを理解しよう • 状態が変わった時、 再描画されることを console.logで確認してみよう • (仮想DOMについて) https://codingmedic.wordpress.com/2020/11/10/the-virtual-dom/
7. 6 6 04_trips.jsを理解しよう • Mapboxのキーを設定 • useEffectを理解しよう • 状態が変わった時、 再描画されることを console.logで確認してみよう
8. 7 Thank you