Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

More Decks by NearMeの技術発表資料です

Other Decks in Programming

Transcript

  1. 0
    deck.glで学ぶReact入門
    (ハンズオン)
    2022-10-21 第18回NearMe技術勉強会
    Kenji Hosoda

    View full-size slide

  2. 1
    こちらのリポジトリでハンズオンします
    https://github.com/kenji4569/hello-deck-gl

    View full-size slide

  3. 2
    下準備
    ● Node.jsをインストールする
    ● リポジトリをダウンロード
    ● npm install (パッケージをインストール)
    ● npm start (Node.jsを実行)

    View full-size slide

  4. 3
    3
    https://deck.gl/
    ソースの構造を理解しよう
    ● まずはブラウザで表示
    ● package.jsonの役割
    ● webpackについて
    ● index.htmlからどのように
    javascriptが呼び出されているか
    ● deck.glについて

    View full-size slide

  5. 4
    4
    02_plane.jsを理解しよう
    ● importの方法
    ● JSXについて
    ● initialViewStateを変更してみよう
    ● console.logでデバッグしてみよう

    View full-size slide

  6. 5
    5
    03_polygon.jsを理解しよう
    ● useStateを理解しよう
    ● 状態が変わった時、
    再描画されることを
    console.logで確認してみよう
    ● (仮想DOMについて)
    https://codingmedic.wordpress.com/2020/11/10/the-virtual-dom/

    View full-size slide

  7. 6
    6
    04_trips.jsを理解しよう
    ● Mapboxのキーを設定
    ● useEffectを理解しよう
    ● 状態が変わった時、
    再描画されることを
    console.logで確認してみよう

    View full-size slide