React勉強会

ツクってウゴかす！Reactハンズオン！〜ストップウォッチ編⏱〜技育CAMPメンター󰞹 宮野　奎太朗

はじめに 2 学生の皆さま、今回ご参加いただきありがとうございます！

はじめに 3 【名前】宮野　奎太朗(ミヤケイ) 【出身】青森県青森市🍎 【会社】株式会社サイバー・バズ【作っているもの】データ可視化ツール、アプリ【趣味】ランニング、ポーカー、個人開発【X】@38ke1 本日はよろしくお願いします！

はじめに 4 ・フロントエンドを入門してみたい・Reactを学んでみたい・チュートリアルをやってみたけど挫折した or 次に何を作ればいいか分からない

はじめに 5 実際Reactは特有の概念&機能が絡んで初学者にはムズかしい

はじめに 6 前半のインプットタイムで噛み砕いた説明

はじめに 7 後半はアウトプットタイムとして実際にコードを各々書いていただきます！

はじめに 8 一緒に完成目指して頑張っていきましょう💪

今回のゴール 9 ・自分なりにコードを書いてみる・エラーで詰まる経験を得る

今回のゴール 10 ・自分なりにコードを書いてみる・エラーで詰まる経験を得る →あくまで完成がゴールではなく、　自走力を付けることが目的です👍

今回のアジェンダ 11 1. ReactとTypeScriptの概要について 2. JSXについて 3. useStateについて【インプットタイム🌞】

今回のアジェンダ 12 1. 自分の手でコードを書いて動かしてみよう！ 2. 応用編(UIライブラリを用いた例) 3. まとめ【アウトプットタイム🌝】

1.Reactの概要 13 Reactとは？

1.Reactの概要 14 Reactとは？ →Meta社(旧Facebook) が作成！

1.Reactの概要 15 Reactとは？ →見た目(UI)を作るのが得意な JavaScriptのライブラリ

1.Reactの概要 16 Reactとは？ →見た目(UI)を作るのが得意な JavaScriptのライブラリコンポーネント(部品)単位でページを構成⚙

1.Reactの概要 17 コンポーネント(部品)単位でページを構成⚙

1.Reactの概要 18 Reactとは？ →Webアプリを構築する上で様々な企業で選定される技術

1.Reactの概要 19 Reactとは？ →実際に僕が在籍している企業でも6〜7割のプロジェクトがReactで構成

1.Reactの概要 20 React Native →Reactとほぼ同じ文法でスマホアプリが作れる📱

1.Reactの概要 21 表示したい見た目をタグで記述

1.Reactの概要 22 表示したい見た目をタグで記述

1.Reactの概要 23 仮想DOMで計算→レンダリング

1.Reactの概要 24 ここで一回Reactのプロジェクト構成を見てみましょう！

1.TypeScriptの概要 25 Reactと相性が良い🙆

1.TypeScriptの概要 26 大きな違いは「型付け」

1.TypeScriptの概要 27 JavaScriptの完全上位互換

1.TypeScriptの概要 28 つまり開発体験が高い

1.TypeScriptの概要 29 変数を定義する際に補完が効く

1.TypeScriptの概要 30 型の定義ファイルを見ることでプロジェクトの仕様が分かる

2.JSXについて 31 仮想DOMを駆使して結果を最終的に表示

2.JSXについて 32 仮想DOMを駆使して結果を最終的に表示 →その過程をHTMLっぽく書けるのがJSX

2.JSXについて 33 • HTML5のタグは「全て」使える！ • カスタムコンポーネントをタグとして使える(後述) • JavaScriptに比べて構造が分かりやすい🙆

2.JSXについて 34 ここで一回例を見てみましょう🙆

3.useStateについて 35 その前に。。。構築が完了している方は git pull origin mainとnpm installの実行をお願いします！

2.JSXについて 36 CSS in JS(現在主流!)

2.JSXについて 37 UIライブラリ

2.JSXについて 38 UIライブラリを用いた実装例を見てみましょう🙆

3.useStateについて 39 useState とは？ →関数コンポーネントの状態を保持したり更新等出来る仕組み！

3.useStateについて 40 基本的な文法 const [変数名, 変数を更新する関数名] = useState(初期値)

3.useStateについて 41

3.useStateについて 42 実装例を見てみましょう🙆

4.コードを書いてみよう！ 43 【今回作るもの】あなただけのストップウォッチ⏱ (オリジナリティを出してみよう！)

4.コードを書いてみよう！ 44 【今回作るもの】あなただけのストップウォッチ⏱ (動かなくたっていいじゃない！)

4.コードを書いてみよう！ 45 使ってみよう！ 1. Styled Component 2. useState

構築がまだ出来ていない方向け 46 一緒に5分程度で構築しましょう！ (Node.jsがインストールされている前提)

5.応用編 47 あらかじめ作った画面をお見せします！

まとめ 48 今回はReactの概要に触れ実際に自分の手でコードを書いていただきました󰳕

まとめ 49 粘った経験が必ずエンジニアとしての糧になります！

まとめ 50 最後に僕の好きなキャッチコピーを紹介します👀

まとめ 51 皆さま本日はお疲れ様でした！👋

React勉強会

React勉強会

More Decks by Keitaro Miyano

Featured

Transcript