React勉強会

サポーターズ技育CAMPアカデミアで用いたReact勉強会のスライドです！

Transcript

1. ツクってウゴかす！Reactハンズオン！ 〜ストップウォッチ編⏱〜 技育CAMPメンター󰞹 宮野　奎太朗
2. はじめに 2 学生の皆さま、 今回ご参加いただきありがとうございます！
3. はじめに 3 【名前】宮野　奎太朗(ミヤケイ) 【出身】青森県青森市🍎 【会社】株式会社サイバー・バズ 【作っているもの】データ可視化ツール、アプリ 【趣味】ランニング、ポーカー、個人開発 【X】@38ke1 本日はよろしくお願いします！
4. はじめに 4 ・フロントエンドを入門してみたい ・Reactを学んでみたい ・チュートリアルをやってみたけど 挫折した or 次に何を作ればいいか分からない
5. はじめに 5 実際Reactは特有の概念&機能が絡んで 初学者にはムズかしい
6. はじめに 6 前半のインプットタイムで 噛み砕いた説明
7. はじめに 7 後半はアウトプットタイムとして 実際にコードを各々書いていただきます！
8. はじめに 8 一緒に完成目指して頑張っていきましょう💪
9. 今回のゴール 9 ・自分なりにコードを書いてみる ・エラーで詰まる経験を得る
10. 今回のゴール 10 ・自分なりにコードを書いてみる ・エラーで詰まる経験を得る →あくまで完成がゴールではなく、 　自走力を付けることが目的です👍
11. 今回のアジェンダ 11 1. ReactとTypeScriptの概要について 2. JSXについて 3. useStateについて 【インプットタイム🌞】
12. 今回のアジェンダ 12 1. 自分の手でコードを書いて動かしてみよう！ 2. 応用編(UIライブラリを用いた例) 3. まとめ 【アウトプットタイム🌝】
13. 1.Reactの概要 13 Reactとは？
14. 1.Reactの概要 14 Reactとは？ →Meta社(旧Facebook) が作成！
15. 1.Reactの概要 15 Reactとは？ →見た目(UI)を作るのが得意な JavaScriptのライブラリ
16. 1.Reactの概要 16 Reactとは？ →見た目(UI)を作るのが得意な JavaScriptのライブラリ コンポーネント(部品)単位 でページを構成⚙
17. 1.Reactの概要 17 コンポーネント(部品)単位 でページを構成⚙
18. 1.Reactの概要 18 Reactとは？ →Webアプリを構築する上で 様々な企業で選定される技術
19. 1.Reactの概要 19 Reactとは？ →実際に僕が在籍している 企業でも6〜7割の プロジェクトがReactで構成
20. 1.Reactの概要 20 React Native →Reactとほぼ同じ文法で スマホアプリが作れる📱
21. 1.Reactの概要 21 表示したい見た目をタグで記述
22. 1.Reactの概要 22 表示したい見た目をタグで記述
23. 1.Reactの概要 23 仮想DOMで計算→レンダリング
24. 1.Reactの概要 24 ここで一回Reactのプロジェクト 構成を見てみましょう！
25. 1.TypeScriptの概要 25 Reactと相性が良い🙆
26. 1.TypeScriptの概要 26 大きな違いは「型付け」
27. 1.TypeScriptの概要 27 JavaScriptの完全上位互換
28. 1.TypeScriptの概要 28 つまり開発体験が高い
29. 1.TypeScriptの概要 29 変数を定義する際に補完が効く
30. 1.TypeScriptの概要 30 型の定義ファイルを見ることで プロジェクトの仕様が分かる
31. 2.JSXについて 31 仮想DOMを駆使して結果を最終的に表示
32. 2.JSXについて 32 仮想DOMを駆使して結果を最終的に表示 →その過程をHTMLっぽく書けるのがJSX
33. 2.JSXについて 33 • HTML5のタグは「全て」使える！ • カスタムコンポーネントをタグとして使える(後述) • JavaScriptに比べて構造が分かりやすい🙆
34. 2.JSXについて 34 ここで一回例を見てみましょう🙆
35. 3.useStateについて 35 その前に。。。構築が完了している方は git pull origin mainとnpm installの 実行をお願いします！
36. 2.JSXについて 36 CSS in JS(現在主流!)
37. 2.JSXについて 37 UIライブラリ
38. 2.JSXについて 38 UIライブラリを用いた 実装例を見てみましょう🙆
39. 3.useStateについて 39 useState とは？ →関数コンポーネントの状態を 保持したり更新等出来る仕組み！
40. 3.useStateについて 40 基本的な文法 const [変数名, 変数を更新する関数名] = useState(初期値)
41. 3.useStateについて 41
42. 3.useStateについて 42 実装例を見てみましょう🙆
43. 4.コードを書いてみよう！ 43 【今回作るもの】 あなただけのストップウォッチ⏱ (オリジナリティを出してみよう！)
44. 4.コードを書いてみよう！ 44 【今回作るもの】 あなただけのストップウォッチ⏱ (動かなくたっていいじゃない！)
45. 4.コードを書いてみよう！ 45 使ってみよう！ 1. Styled Component 2. useState
46. 構築がまだ出来ていない方向け 46 一緒に5分程度で構築しましょう！ (Node.jsがインストールされている前提)
47. 5.応用編 47 あらかじめ作った画面をお見せします！
48. まとめ 48 今回はReactの概要に触れ実際に 自分の手でコードを書いていただきました󰳕
49. まとめ 49 粘った経験が必ずエンジニアとしての 糧になります！
50. まとめ 50 最後に僕の好きなキャッチコピーを紹介します👀
51. まとめ 51 皆さま本日はお疲れ様でした！👋