Let's React!! "チョットワカル"の第一歩

Slide 1

Slide 1 text

Let's React!! "チョットワカル"の第一歩 yohsi presents K O K O K A R A M E E T U P 2022

Slide 2

Slide 2 text

よし元小学校教諭 2年銭湯,サウナ,漫画 React,Java 運動したい

Slide 3

Slide 3 text

modern JS Framework/library

Slide 4

Slide 4 text

「Google Trends」

Slide 5

Slide 5 text

「The State of JS 2021」

Slide 6

Slide 6 text

よし！Reactやるぞー！！

Slide 7

Slide 7 text

数日後

Slide 8

Slide 8 text

え,ちょ,むずかしない,,,?

Slide 9

Slide 9 text

「Vue は Easy、 React は Simple」

Slide 10

Slide 10 text

Reactの難しさ V O L U N T E E R R E S U M E 2022 11 1 .記法の重なり 2 .Reactの仕組み

Slide 11

Slide 11 text

Reactを構成するためのスキル・変数への型付け・分割代入・スプレッド構文・関数( アロー関数) ・三項演算子・Props ・State( 状態) ・React hooks ・再レンダリング・let,const ・コンポーネント分割・関数への型付け・props への型付け・useState での型付け・非同期処理(async/await) ・JSX

Slide 12

Slide 12 text

JS,React,TS どれの記法に属するか分けていく！分割代入(JS) とprops 関数の省略記法 etc,,,!! 気をつけたい記法

Slide 13

Slide 13 text

↓何してるかわかりますか？二つの記法を知ってたら理解できます！！

Slide 14

Slide 14 text

分割代入　{} [] →オブジェクトや配列の要素を使いやすくする方法オブジェクトの抽出オブジェクトの抽出(分割代入)

Slide 15

Slide 15 text

Props →親から子コンポーネントに送る引数のようなもの(属性値) 　コンポーネントの渡し方 ①タグ内に任意の名称をつけ＝で値を入れて渡す　　　　　　　　　　　　 ②タグで囲みchildrenとして渡す親のファイル props props.children 子のコンポーネント props props.children 実行結果

Slide 16

Slide 16 text

Propsを分割代入してみる！親のファイル props props.children 子コンポ(分割代入なし) props props.children 子コンポ(分割代入あり) props props.children

Slide 17

Slide 17 text

Propsを()の引数内で分割代入してみる！親のファイル props props.children 子コンポ(分割代入) props props.children 子コンポ(引数内で分割代入) 引数内で分割代入! props props.children

Slide 18

Slide 18 text

読める、読めるぞ！ React 順番を押さえていけば徐々に読めてきます！ ※イメージ図

Slide 19

Slide 19 text

関数

Slide 20

Slide 20 text

関数なんかたくさんあったような,,, ややこしいかった記憶

Slide 21

Slide 21 text

関数関数学習中初学者 ※イメージ

Slide 22

Slide 22 text

JSの関数表記従来の関数表記 ①関数宣言 ②関数式 ES06からの関数表記 ③アロー関数主に3種類に分かれる関数表記の流れをおさえれば理解しやすいです！

Slide 23

Slide 23 text

①関数宣言 (function(){}) ・関数宣言・呼び出し・呼び出し,戻り値を変数に代入関数名引数処理内容 ①関数名　　 ②引数 ③処理内容この３つから構成される。

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

②関数式・関数式・関数宣言,呼び出し →変数に代入している

Slide 26

Slide 26 text

式式（Expression）と（Expression）と文文（Statement）（Statement）文（Statement）式（Expression） "値を変数に代入できる" "値を変数に代入できない" ex.リテラル,変数,関数の呼び出し,,, ex. if文,for文,,,　　(ブロック文) 関数式関数宣言 ※ブロック文はセミコロンは不要

Slide 27

Slide 27 text

②関数式(関数名の省略) ・関数式・関数式(関数名の省略) こういった"関数名のない関数"を無名関数(匿名関数)と言います。

Slide 28

Slide 28 text

③アロー関数・関数式(無名関数) function のかわりにアロー記号 => ・アロー関数

Slide 29

Slide 29 text

②引数()なし＋return {}なし　※上の条件＋処理が1行 ③アロー関数(省略形) ①引数()なし　 ※引数が一つの時 ③{}に()を重ねる　 ※戻り値がオブジェクト

Slide 30

Slide 30 text

③アロー関数 ④アロー関数(無名関数) ⑤アロー関数(無名関数＋省略形)

Slide 31

Slide 31 text

①関数宣言 (文) function ②関数式 (式無名関数) function ③アロー関数 (式　省略形が複数ある) => 関数　まとめ next step!! ・コールバック関数・即時関数・スコープとクロージャ・再帰関数・高階関数とカリー化 ...etc!

Slide 32

Slide 32 text

React の仕組みにふれる宣言的と命令的 React のレンダリングについて V O L U N T E E R R E S U M E 2022 13

Slide 33

Slide 33 text

Reactとは？「UI構築のための JavaScript ライブラリ」 →DOM操作ライブラリどんな特徴があるの？？ ①コンポーネントによる宣言的なUI構築 ②UIとデータの同期

Slide 34

Slide 34 text

①コンポーネントによる宣言的なUI構築命令的UI 宣言的UI 従来の方式で、 JSやjQueryなどの直接DOM 指定して描画する方法・動作の手順を指定する・「何をするかを記述」 (How) UIとコードの乖離が大きい従来のDOM操作をライブラリ側が担い、構築したいUIに即して描画できる・状態を定義する・「どういう状態になってるかを記述」(What) UIとコードが近い

Slide 35

Slide 35 text

App.jsx コンポーネントとは？ UIを構築するための部品 Child1.jsx Child2.jsx Child3.jsx Child4.jsx Child5.jsx ・上から下へと木構造になっており親と子の関係がある。・親から子へpropsを渡せる・コンポーネント内にstateをもてる。 ①propsが変更されたら or ②stateが更新されたらそのコンポーネント配下は再レンダリングされる。

Slide 36

Slide 36 text

②UIとデータの同期 Reactが管理するデータが主に2つ属性のprops 状態のstate ・親から子へ渡される属性値。・propsが更新されると、管理するコンポーネントが再描画(再レンダリング)する・子コンポーネントが内部で持つ状態。・状態が更新されると,管理するコンポーネントが再描画 (再レンダリング)する

Slide 37

Slide 37 text

Reactの描画についてコンポーネントというUIの一部分を組み合わせて作っていきます。コンポーネントは引数に相当するpropsも受け取れ、コンポーネント内部に「状態」をもち、状態の更新により出力する描画が変わる。ユーザがアプリを使い、状態が更新される。それをReactが作用し結果としてUIが再レンダリングする

Slide 38

Slide 38 text

状態状態 DOM ・・・ UI=f(state) ユーザ操作による変化 f(レンダリング) f(レンダリング) DOM ・・・ Reactによる再レンダリング

Slide 39

Slide 39 text

State Props コンポーネントここの振る舞いを捉えるのが肝！ Reactにおいて

Slide 40

Slide 40 text

Reactを攻略していくには？意図したUIを実現していくためのコーディングしていく力 Reactの特性とふるまいを理解してコンポーネント間を上手く設計していく力蟻の目鷹の目

Slide 41

Slide 41 text

参考資料(雑誌) React初心者最適本 JS関数全部雑誌 Reactの深い理解雑誌

Slide 42

Slide 42 text

JavaScript Primer　サバイバルTypeScript けーちゃんのプログラム開発ノート宣言的UI 　 →JSの辞書的に　 →現場に即した指南所　 →JSのわかりにくい所の解説がわりに　 →宣言的UIと命令的UIの比較参考資料(サイト)

Slide 43

Slide 43 text

拙い説明でしたがご清聴ありがとうございました！！