Soumettre la recherche
Mettre en ligne
SIROK技術勉強会 #1 「Reactってなんだ?」
•
20 j'aime
•
65,717 vues
Naoyuki Kataoka
Suivre
SIROK技術勉強会 #1 「Reactってなんだ?」
Lire moins
Lire la suite
Technologie
Signaler
Partager
Signaler
Partager
1 sur 86
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
Kohei Asai
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
Yuki Ishikawa
今からでも遅くない! React事始め
今からでも遅くない! React事始め
ynaruta
ドメイン駆動設計に15年取り組んでわかったこと
ドメイン駆動設計に15年取り組んでわかったこと
増田 亨
ドメインモデルの育て方
ドメインモデルの育て方
増田 亨
大規模ソーシャルゲーム開発から学んだPHP&MySQL実践テクニック
大規模ソーシャルゲーム開発から学んだPHP&MySQL実践テクニック
infinite_loop
ドメインオブジェクトの見つけ方・作り方・育て方
ドメインオブジェクトの見つけ方・作り方・育て方
増田 亨
Recommandé
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
Kohei Asai
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
Yuki Ishikawa
今からでも遅くない! React事始め
今からでも遅くない! React事始め
ynaruta
ドメイン駆動設計に15年取り組んでわかったこと
ドメイン駆動設計に15年取り組んでわかったこと
増田 亨
ドメインモデルの育て方
ドメインモデルの育て方
増田 亨
大規模ソーシャルゲーム開発から学んだPHP&MySQL実践テクニック
大規模ソーシャルゲーム開発から学んだPHP&MySQL実践テクニック
infinite_loop
ドメインオブジェクトの見つけ方・作り方・育て方
ドメインオブジェクトの見つけ方・作り方・育て方
増田 亨
DDDはオブジェクト指向を利用してどのようにメンテナブルなコードを書くか
DDDはオブジェクト指向を利用してどのようにメンテナブルなコードを書くか
Koichiro Matsuoka
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
Koichiro Matsuoka
イミュータブルデータモデル(入門編)
イミュータブルデータモデル(入門編)
Yoshitaka Kawashima
App013 ここはあえて紙と
App013 ここはあえて紙と
Tech Summit 2016
ドメイン駆動設計 失敗したことと成功したこと
ドメイン駆動設計 失敗したことと成功したこと
BIGLOBE Inc.
JSON:APIについてざっくり入門
JSON:APIについてざっくり入門
iPride Co., Ltd.
3週連続DDDその1 ドメイン駆動設計の基本を理解する
3週連続DDDその1 ドメイン駆動設計の基本を理解する
増田 亨
凝集度と責務
凝集度と責務
Toshinori Chiba
境界付けられたコンテキスト 概念編 (ドメイン駆動設計用語解説シリーズ)
境界付けられたコンテキスト 概念編 (ドメイン駆動設計用語解説シリーズ)
Koichiro Matsuoka
【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ
【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ
日本マイクロソフト株式会社
「実践ドメイン駆動設計」 から理解するDDD (2018年11月)
「実践ドメイン駆動設計」 から理解するDDD (2018年11月)
A AOKI
FastAPIのテンプレートプロジェクトがいい感じだった話
FastAPIのテンプレートプロジェクトがいい感じだった話
NipponAlgorithm
Rethinking Best Practices
Rethinking Best Practices
floydophone
Python 게임서버 안녕하십니까 : RPC framework 편
Python 게임서버 안녕하십니까 : RPC framework 편
준철 박
いまさら学ぶMVVMパターン
いまさら学ぶMVVMパターン
Yuta Matsumura
やはりお前らのMVCは間違っている
やはりお前らのMVCは間違っている
Koichi Tanaka
ドメイン駆動設計のためのオブジェクト指向入門
ドメイン駆動設計のためのオブジェクト指向入門
増田 亨
Windows Registered I/O (RIO) vs IOCP
Windows Registered I/O (RIO) vs IOCP
Seungmo Koo
脱 Excel設計書
脱 Excel設計書
rai
Rest ful api設計入門
Rest ful api設計入門
Monstar Lab Inc.
Elastic on Azure Integration & Building React UI Based Search App Using Azure...
Elastic on Azure Integration & Building React UI Based Search App Using Azure...
Shotaro Suzuki
第12回rest勉強会 これまでの補足・展望編
第12回rest勉強会 これまでの補足・展望編
ksimoji
Contenu connexe
Tendances
DDDはオブジェクト指向を利用してどのようにメンテナブルなコードを書くか
DDDはオブジェクト指向を利用してどのようにメンテナブルなコードを書くか
Koichiro Matsuoka
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
Koichiro Matsuoka
イミュータブルデータモデル(入門編)
イミュータブルデータモデル(入門編)
Yoshitaka Kawashima
App013 ここはあえて紙と
App013 ここはあえて紙と
Tech Summit 2016
ドメイン駆動設計 失敗したことと成功したこと
ドメイン駆動設計 失敗したことと成功したこと
BIGLOBE Inc.
JSON:APIについてざっくり入門
JSON:APIについてざっくり入門
iPride Co., Ltd.
3週連続DDDその1 ドメイン駆動設計の基本を理解する
3週連続DDDその1 ドメイン駆動設計の基本を理解する
増田 亨
凝集度と責務
凝集度と責務
Toshinori Chiba
境界付けられたコンテキスト 概念編 (ドメイン駆動設計用語解説シリーズ)
境界付けられたコンテキスト 概念編 (ドメイン駆動設計用語解説シリーズ)
Koichiro Matsuoka
【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ
【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ
日本マイクロソフト株式会社
「実践ドメイン駆動設計」 から理解するDDD (2018年11月)
「実践ドメイン駆動設計」 から理解するDDD (2018年11月)
A AOKI
FastAPIのテンプレートプロジェクトがいい感じだった話
FastAPIのテンプレートプロジェクトがいい感じだった話
NipponAlgorithm
Rethinking Best Practices
Rethinking Best Practices
floydophone
Python 게임서버 안녕하십니까 : RPC framework 편
Python 게임서버 안녕하십니까 : RPC framework 편
준철 박
いまさら学ぶMVVMパターン
いまさら学ぶMVVMパターン
Yuta Matsumura
やはりお前らのMVCは間違っている
やはりお前らのMVCは間違っている
Koichi Tanaka
ドメイン駆動設計のためのオブジェクト指向入門
ドメイン駆動設計のためのオブジェクト指向入門
増田 亨
Windows Registered I/O (RIO) vs IOCP
Windows Registered I/O (RIO) vs IOCP
Seungmo Koo
脱 Excel設計書
脱 Excel設計書
rai
Rest ful api設計入門
Rest ful api設計入門
Monstar Lab Inc.
Tendances
(20)
DDDはオブジェクト指向を利用してどのようにメンテナブルなコードを書くか
DDDはオブジェクト指向を利用してどのようにメンテナブルなコードを書くか
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
イミュータブルデータモデル(入門編)
イミュータブルデータモデル(入門編)
App013 ここはあえて紙と
App013 ここはあえて紙と
ドメイン駆動設計 失敗したことと成功したこと
ドメイン駆動設計 失敗したことと成功したこと
JSON:APIについてざっくり入門
JSON:APIについてざっくり入門
3週連続DDDその1 ドメイン駆動設計の基本を理解する
3週連続DDDその1 ドメイン駆動設計の基本を理解する
凝集度と責務
凝集度と責務
境界付けられたコンテキスト 概念編 (ドメイン駆動設計用語解説シリーズ)
境界付けられたコンテキスト 概念編 (ドメイン駆動設計用語解説シリーズ)
【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ
【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ
「実践ドメイン駆動設計」 から理解するDDD (2018年11月)
「実践ドメイン駆動設計」 から理解するDDD (2018年11月)
FastAPIのテンプレートプロジェクトがいい感じだった話
FastAPIのテンプレートプロジェクトがいい感じだった話
Rethinking Best Practices
Rethinking Best Practices
Python 게임서버 안녕하십니까 : RPC framework 편
Python 게임서버 안녕하십니까 : RPC framework 편
いまさら学ぶMVVMパターン
いまさら学ぶMVVMパターン
やはりお前らのMVCは間違っている
やはりお前らのMVCは間違っている
ドメイン駆動設計のためのオブジェクト指向入門
ドメイン駆動設計のためのオブジェクト指向入門
Windows Registered I/O (RIO) vs IOCP
Windows Registered I/O (RIO) vs IOCP
脱 Excel設計書
脱 Excel設計書
Rest ful api設計入門
Rest ful api設計入門
Similaire à SIROK技術勉強会 #1 「Reactってなんだ?」
Elastic on Azure Integration & Building React UI Based Search App Using Azure...
Elastic on Azure Integration & Building React UI Based Search App Using Azure...
Shotaro Suzuki
第12回rest勉強会 これまでの補足・展望編
第12回rest勉強会 これまでの補足・展望編
ksimoji
Angularreflex20141210
Angularreflex20141210
Shinichiro Takezaki
PHPの今とこれから2008
PHPの今とこれから2008
Rui Hirokawa
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
david9142
Web development fundamental
Web development fundamental
Takuya Kumagai
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
Daizen Ikehara
Service workerとwebプッシュ通知
Service workerとwebプッシュ通知
zaru sakuraba
20140127 riaに代わる技術 実用的spa
20140127 riaに代わる技術 実用的spa
Seiji Noro
開発者におくる Power BI を使う時に考えるべきアーキテクチャ ~ データを溜めるのは誰だ? ~
開発者におくる Power BI を使う時に考えるべきアーキテクチャ ~ データを溜めるのは誰だ? ~
Yugo Shimizu
Reco choku tech night #09 -reinvent2018報告会-
Reco choku tech night #09 -reinvent2018報告会-
recotech
今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング
SwapSkills
Create android app can send SMS and Email by React Natice
Create android app can send SMS and Email by React Natice
GMO-Z.com Vietnam Lab Center
ぼく(たち)のかんがえた最新のJS開発環境 #scripty04
ぼく(たち)のかんがえた最新のJS開発環境 #scripty04
Yahoo!デベロッパーネットワーク
Azure Serverless or Power Platform 〜 あなたならどっち?! - Azure Serverless 編
Azure Serverless or Power Platform 〜 あなたならどっち?! - Azure Serverless 編
Kazumi IWANAGA
Spring bootでweb 基本編
Spring bootでweb 基本編
なべ
2020/12/03 SaaS を正しい方向へ加速するフィードバックループ
2020/12/03 SaaS を正しい方向へ加速するフィードバックループ
Issei Hiraoka
Data API + AWS = (CMS どうでしょう 札幌編)
Data API + AWS = (CMS どうでしょう 札幌編)
Yuji Takayama
第4回REST勉強会 RequireJS編
第4回REST勉強会 RequireJS編
ksimoji
Mvc conf session_1_osada
Mvc conf session_1_osada
Hiroshi Okunushi
Similaire à SIROK技術勉強会 #1 「Reactってなんだ?」
(20)
Elastic on Azure Integration & Building React UI Based Search App Using Azure...
Elastic on Azure Integration & Building React UI Based Search App Using Azure...
第12回rest勉強会 これまでの補足・展望編
第12回rest勉強会 これまでの補足・展望編
Angularreflex20141210
Angularreflex20141210
PHPの今とこれから2008
PHPの今とこれから2008
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
Web development fundamental
Web development fundamental
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
Service workerとwebプッシュ通知
Service workerとwebプッシュ通知
20140127 riaに代わる技術 実用的spa
20140127 riaに代わる技術 実用的spa
開発者におくる Power BI を使う時に考えるべきアーキテクチャ ~ データを溜めるのは誰だ? ~
開発者におくる Power BI を使う時に考えるべきアーキテクチャ ~ データを溜めるのは誰だ? ~
Reco choku tech night #09 -reinvent2018報告会-
Reco choku tech night #09 -reinvent2018報告会-
今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング
Create android app can send SMS and Email by React Natice
Create android app can send SMS and Email by React Natice
ぼく(たち)のかんがえた最新のJS開発環境 #scripty04
ぼく(たち)のかんがえた最新のJS開発環境 #scripty04
Azure Serverless or Power Platform 〜 あなたならどっち?! - Azure Serverless 編
Azure Serverless or Power Platform 〜 あなたならどっち?! - Azure Serverless 編
Spring bootでweb 基本編
Spring bootでweb 基本編
2020/12/03 SaaS を正しい方向へ加速するフィードバックループ
2020/12/03 SaaS を正しい方向へ加速するフィードバックループ
Data API + AWS = (CMS どうでしょう 札幌編)
Data API + AWS = (CMS どうでしょう 札幌編)
第4回REST勉強会 RequireJS編
第4回REST勉強会 RequireJS編
Mvc conf session_1_osada
Mvc conf session_1_osada
Plus de Naoyuki Kataoka
シロク流事業の立ち上げ方の成功と失敗
シロク流事業の立ち上げ方の成功と失敗
Naoyuki Kataoka
成長する組織を支えるシロクの自動化
成長する組織を支えるシロクの自動化
Naoyuki Kataoka
Lightning-fastなライトニングトーク
Lightning-fastなライトニングトーク
Naoyuki Kataoka
スマホアプリの収益のモデリング
スマホアプリの収益のモデリング
Naoyuki Kataoka
Objective-CのBlocksの循環参照に関する僕なりのベストプラクティス
Objective-CのBlocksの循環参照に関する僕なりのベストプラクティス
Naoyuki Kataoka
Web若手エンジニアの会(仮)
Web若手エンジニアの会(仮)
Naoyuki Kataoka
Facebook Night vol. 6
Facebook Night vol. 6
Naoyuki Kataoka
レンタルサーバで今すぐ始めるWEB開発
レンタルサーバで今すぐ始めるWEB開発
Naoyuki Kataoka
Plus de Naoyuki Kataoka
(8)
シロク流事業の立ち上げ方の成功と失敗
シロク流事業の立ち上げ方の成功と失敗
成長する組織を支えるシロクの自動化
成長する組織を支えるシロクの自動化
Lightning-fastなライトニングトーク
Lightning-fastなライトニングトーク
スマホアプリの収益のモデリング
スマホアプリの収益のモデリング
Objective-CのBlocksの循環参照に関する僕なりのベストプラクティス
Objective-CのBlocksの循環参照に関する僕なりのベストプラクティス
Web若手エンジニアの会(仮)
Web若手エンジニアの会(仮)
Facebook Night vol. 6
Facebook Night vol. 6
レンタルサーバで今すぐ始めるWEB開発
レンタルサーバで今すぐ始めるWEB開発
Dernier
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
taisei2219
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Toru Tamaki
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
sugiuralab
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
Hiroki Ichikura
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Toru Tamaki
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Toru Tamaki
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Ryo Sasaki
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
Dernier
(9)
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
SIROK技術勉強会 #1 「Reactってなんだ?」
1.
2.
Reactってなんだ?
3.
4.
JavaScriptで UIを作るためのライブラリ
5.
SIROKのUI構築の変遷
6.
My365: PHP テンプレートエンジンとして使う
7.
ピプル Apache Velocity サーバサイド処理
8.
Growth Push Backbone +
Handlebars 本格的にJSでUI実装
9.
Growth Point TypeScript +
Backbone + Handlebars 生のJSつらくなってきた
10.
Growthbeat TypeScript + Backbone
+ Underscore template ロジックレスつらい
11.
新規プロジェクト TypeScript + React?
12.
Reactとは?
13.
JavaScriptで UIを作るためのライブラリ
14.
MVCのViewの部分のみを担当 基本的にそれ以外には関わらない
15.
高速な描画処理 Virtual DOMという概念
16.
ビュー操作の難しさ
17.
DOM操作は遅い。 想像しているよりもずっと。
18.
大抵は、こういうことがしたい。 データ (JS Object) ビュー (HTML)
19.
サーバから取得したり、ユーザー が変更してデータが変化。 データ (JS Object) ビュー (HTML) 更新
20.
データの更新に合わせてビューも 更新する必要がある。 データ (JS Object) ビュー (HTML) 更新
21.
1. まるごと書き換えるパターン 2. 差分更新するパターン
22.
まるごと書き換えるパターン データが少しでも変化したら、 HTMLを全部まるごと書き換える。 データ (JS Object) ビュー (HTML) テンプレートで全更新
23.
DOM操作は遅い。 想像しているよりもずっと。
24.
リストオブジェクトのデータ追加 <table>への大量の行追加
25.
突然の死
26.
エンジニアががんばって DOMを差分更新するパターン データ (JS Object) ビュー (HTML) 変化したところだけ 差分更新
27.
どこかでミスして 変な中間状態におちいる
28.
結局のところ死
29.
1. 簡単だけど遅い 2. 高速だけど複雑
30.
なぜReactか?
31.
結局のところ死
32.
そこでVirtual DOM
33.
データ (JS Object) ビュー (HTML) テンプレートで全更新 (簡単) Virtual DOM システム的に差分更新 (高速)
34.
エンジニア的には、常に全更新で 良いので簡単で間違えない。 システム的には、差分更新なので 高速に実行可能。
35.
つまり、簡単で速い
36.
1. Virtual DOMの全更新 2.
Virtual DOMの差分計算 3. DOMへの差分適用 ・・・は「DOMの全更新」より速い
37.
Hello React
38.
<!DOCTYPE html> <html> <head> <script src="build/react.js"></script> <script
src="build/JSXTransformer.js"></ script> </head> <body> <div id="example"></div> <script type="text/jsx"> React.render( <h1>Hello, world!</h1>, document.getElementById('example') ); </script> </body> </html>
39.
40.
React.render( <h1>Hello, world!</h1>, document.getElementById('example') );
41.
#example要素の中に <h1>Hello, world!</h1> を表示
42.
React.render( <h1>Hello, world!</h1>, document.getElementById('example') );
43.
JSX
44.
これじゃない
45.
これでもない
46.
JSX is a
JavaScript syntax extension that looks similar to XML.
47.
XMLっぽいのが使える JavaScript
48.
<!DOCTYPE html> <html> <head> <script src="build/react.js"></script> <script
src="build/JSXTransformer.js"></ script> </head> <body> <div id="example"></div> <script type="text/jsx"> React.render( <h1>Hello, world!</h1>, document.getElementById('example') ); </script> </body> </html>
49.
JSXTransformerで JavaScriptに変換してから実行 JSX JavaScript react.js JSXTransformer 実行
50.
JSXのプリコンパイル
51.
実行時にコンパイルしたくない。
52.
npm install -g
react-tools JSX JavaScript react.js react-tools 実行
53.
React.render( React.createElement("h1", null, "Hello, world!"), document.getElementById('example') );
54.
<!DOCTYPE html> <html> <head> <script src="build/react.js"></script> <!--<script
src="build/JSXTransformer.js"></ script>--> </head> <body> <div id="example"></div> <script src="build/helloworld.js"></script> </body> </html>
55.
Component
56.
Componentとは?
57.
Viewをオブジェクト化したもの
58.
var Hello =
React.createClass({ render() { return ( <div>Hello {this.props.name}</div> ) } }); React.render( <Hello name="World" />, document.getElementById('example') );
59.
React#createClassで、 Componetを作成
60.
renderメソッドで、 描画するDOM定義を返す。
61.
var Hello =
React.createClass({ render() { return ( <div>Hello {this.props.name}</div> ) } }); React.render( <Hello name="World" />, document.getElementById('example') );
62.
Componentに対して、 propsで値の受け渡しが可能
63.
var Hello =
React.createClass({ render() { return ( <div>Hello {this.props.name}</div> ) } }); React.render( <Hello name="World" />, document.getElementById('example') );
64.
props
65.
props?
66.
Componentに対して 外部から値を渡す受け口
67.
propsが外部との インタフェースになる propsで何でも渡せる(関数も)
68.
propsはImmutableに扱う 外からpropsを渡し直すときは、 setProps、replaceProps
69.
state
70.
state?
71.
Component内部の 状態を保持するための変数
72.
propsが外部とのインタフェース stateは内部の状態変数 State props render Component
73.
var Hello =
React.createClass({ getInitialState() { return { name: 'World' }; }, onClick() { this.setState({ name: this.state.name + '!' }); }, render() { return ( <div> <h1>Hello {this.state.name}</h1> <button onClick={this.onClick}>click</button> </div> ) } });
74.
75.
あるComponentのstateが、 その子のpropsになるかも
76.
Users User ID Name … User ID Name … … [ {ID, Name, …}, {ID,
Name, …}, {ID, Name, …}, … ]
77.
var User =
React.createClass({ render() { return ( <li>Hello {this.props.user.name}</li> ) } });
78.
var Users =
React.createClass({ // …(略)… render() { var users = this.state.users.map((user) => { return <User user={user}/> }); return ( <ul> {users} </ul> ) } });
79.
80.
まとめ
81.
便利そう。
82.
次回予告
83.
・週に1回、誰かが発表しています。 ・発表者はリレー形式でやってい ます。 ・内容は指名された人が主張した いことや興味があることなど ・時間は、10∼30分程度です。 ・形式も色々です。(プレゼン形式、 クイズ形式、など) ・途中参加、途中退出もOKです。 ・飛び込みでの発表もOKです。
84.
@uchidas
85.
3/10(火) 19:00∼
Télécharger maintenant