Let's React!!"チョットワカル"の第一歩yohsi presentsK O K O K A R A M E E T U P2022
View Slide
よし元小学校教諭2年銭湯,サウナ,漫画React,Java運動したい
modernJSFramework/library
「Google Trends」
「The State of JS 2021」
よし！Reactやるぞー！！
数日後
え,ちょ,むずかしない,,,?
「Vue は Easy、React は Simple」
Reactの難しさV O L U N T E E R R E S U M E2022 111 .記法の重なり2 .Reactの仕組み
Reactを構成するためのスキル・変数への型付け・分割代入・スプレッド構文・関数(アロー関数)・三項演算子・Props・State(状態)・React hooks・再レンダリング・let,const ・コンポーネント分割 ・関数への型付け・propsへの型付け・useStateでの型付け・非同期処理(async/await)・JSX
JS,React,TSどれの記法に属するか分けていく！分割代入(JS)とprops関数の省略記法etc,,,!!気をつけたい記法
↓何してるかわかりますか？二つの記法を知ってたら理解できます！！
分割代入 {} []→オブジェクトや配列の要素を使いやすくする方法オブジェクトの抽出 オブジェクトの抽出(分割代入)
Props→親から子コンポーネントに送る引数のようなもの(属性値) コンポーネントの渡し方 ①タグ内に任意の名称をつけ＝で値を入れて渡す ②タグで囲みchildrenとして渡す親のファイルprops props.children子のコンポーネントpropsprops.children実行結果
Propsを分割代入してみる！親のファイルprops props.children子コンポ(分割代入なし)propsprops.children子コンポ(分割代入あり)propsprops.children
Propsを()の引数内で分割代入してみる！親のファイルprops props.children子コンポ(分割代入)propsprops.children子コンポ(引数内で分割代入)引数内で分割代入!propsprops.children
読める、読めるぞ！React順番を押さえていけば徐々に読めてきます！※イメージ図
関数
関数なんかたくさんあったような,,,ややこしいかった記憶
関数関数学習中初学者※イメージ
JSの関数表記従来の関数表記①関数宣言②関数式ES06からの関数表記③アロー関数主に3種類に分かれる関数表記の流れをおさえれば理解しやすいです！
①関数宣言 (function(){})・関数宣言 ・呼び出し・呼び出し,戻り値を変数に代入関数名 引数処理内容①関数名 ②引数③処理内容 この３つから構成される。
②関数式・関数式・関数宣言,呼び出し→変数に代入している
式式（Expression）と（Expression）と文文（Statement）（Statement）文（Statement）式（Expression）"値を変数に代入できる""値を変数に代入できない"ex.リテラル,変数,関数の呼び出し,,,ex. if文,for文,,, (ブロック文)関数式関数宣言※ブロック文はセミコロンは不要
②関数式(関数名の省略)・関数式 ・関数式(関数名の省略)こういった"関数名のない関数"を無名関数(匿名関数)と言います。
③アロー関数・関数式(無名関数)function のかわりにアロー記号 =>・アロー関数
②引数()なし＋return {}なし ※上の条件＋処理が1行③アロー関数(省略形)①引数()なし ※引数が一つの時③{}に()を重ねる ※戻り値がオブジェクト
③アロー関数④アロー関数(無名関数) ⑤アロー関数(無名関数＋省略形)
①関数宣言 (文) function②関数式 (式 無名関数) function③アロー関数 (式 省略形が複数ある) =>関数 まとめnext step!!・コールバック関数 ・即時関数・スコープとクロージャ・再帰関数 ・高階関数とカリー化 ...etc!
Reactの仕組みにふれる宣言的と命令的ReactのレンダリングについてV O L U N T E E R R E S U M E2022 13
Reactとは？「UI構築のための JavaScript ライブラリ」→DOM操作ライブラリどんな特徴があるの？？①コンポーネントによる宣言的なUI構築②UIとデータの同期
①コンポーネントによる宣言的なUI構築命令的UI 宣言的UI従来の方式で、JSやjQueryなどの直接DOM指定して描画する方法・動作の手順を指定する・「何をするかを記述」(How)UIとコードの乖離が大きい従来のDOM操作をライブラリ側が担い、構築したいUIに即して描画できる・状態を定義する・「どういう状態になってるかを記述」(What)UIとコードが近い
App.jsxコンポーネントとは？UIを構築するための部品Child1.jsx Child2.jsxChild3.jsx Child4.jsx Child5.jsx・上から下へと木構造になっており親と子の関係がある。・親から子へpropsを渡せる・コンポーネント内にstateをもてる。①propsが変更されたら or②stateが更新されたらそのコンポーネント配下は再レンダリングされる。
②UIとデータの同期Reactが管理するデータが主に2つ属性のprops 状態のstate・親から子へ渡される属性値。・propsが更新されると、管理するコンポーネントが再描画(再レンダリング)する・子コンポーネントが内部で持つ状態。・状態が更新されると,管理するコンポーネントが再描画(再レンダリング)する
Reactの描画についてコンポーネントというUIの一部分を組み合わせて作っていきます。コンポーネントは引数に相当するpropsも受け取れ、コンポーネント内部に「状態」をもち、状態の更新により出力する描画が変わる。ユーザがアプリを使い、状態が更新される。それをReactが作用し結果としてUIが再レンダリングする
状態 状態DOM・・・UI=f(state)ユーザ操作による変化f(レンダリング) f(レンダリング)DOM・・・Reactによる再レンダリング
StatePropsコンポーネントここの振る舞いを捉えるのが肝！Reactにおいて
Reactを攻略していくには？意図したUIを実現していくためのコーディングしていく力Reactの特性とふるまいを理解してコンポーネント間を上手く設計していく力蟻の目 鷹の目
参考資料(雑誌)React初心者最適本 JS関数全部雑誌 Reactの深い理解雑誌
JavaScript Primer サバイバルTypeScriptけーちゃんのプログラム開発ノート宣言的UI →JSの辞書的に →現場に即した指南所 →JSのわかりにくい所の解説がわりに →宣言的UIと命令的UIの比較参考資料(サイト)
拙い説明でしたがご清聴ありがとうございました！！
yoshisan
kamilahsantos
codehex
ojun9
marcustung
tanakahisateru
tsutsui
ykws
texmeijin
atinfinity
parttimenerd
piyoppi
inoichan
jponch
danielanewman
lara
mojombo
kastner
csswizardry
bkeepers
aarron
erikaheidi
keithpitt
3n
ufuk