Soumettre la recherche
Mettre en ligne
SIROK技術勉強会 #1 「Reactってなんだ?」
•
20 j'aime
•
65,721 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
今からでも遅くない! React事始め
今からでも遅くない! React事始め
ynaruta
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
Yuki Ishikawa
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
"Simple Made Easy" Made Easy
"Simple Made Easy" Made Easy
Kent Ohashi
Docker Compose 徹底解説
Docker Compose 徹底解説
Masahito Zembutsu
Cognitive Complexity でコードの複雑さを定量的に計測しよう
Cognitive Complexity でコードの複雑さを定量的に計測しよう
Shuto Suzuki
ドメイン駆動設計 ( DDD ) をやってみよう
ドメイン駆動設計 ( DDD ) をやってみよう
増田 亨
Recommandé
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
Kohei Asai
今からでも遅くない! React事始め
今からでも遅くない! React事始め
ynaruta
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
Yuki Ishikawa
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
"Simple Made Easy" Made Easy
"Simple Made Easy" Made Easy
Kent Ohashi
Docker Compose 徹底解説
Docker Compose 徹底解説
Masahito Zembutsu
Cognitive Complexity でコードの複雑さを定量的に計測しよう
Cognitive Complexity でコードの複雑さを定量的に計測しよう
Shuto Suzuki
ドメイン駆動設計 ( DDD ) をやってみよう
ドメイン駆動設計 ( DDD ) をやってみよう
増田 亨
「自分のとこでは動くけど…」を無くす devcontainer
「自分のとこでは動くけど…」を無くす devcontainer
Yuta Matsumura
世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture
Atsushi Nakamura
PHP の GC の話
PHP の GC の話
y-uti
ツール比較しながら語る O/RマッパーとDBマイグレーションの実際のところ
ツール比較しながら語る O/RマッパーとDBマイグレーションの実際のところ
Y Watanabe
関数型・オブジェクト指向宗教戦争に疲れたなたに送るGo言語入門
関数型・オブジェクト指向宗教戦争に疲れたなたに送るGo言語入門
Tadahiro Ishisaka
GNU AGPLv3について(On GNU AGPLv3)
GNU AGPLv3について(On GNU AGPLv3)
真行 八田
Goのサーバサイド実装におけるレイヤ設計とレイヤ内実装について考える
Goのサーバサイド実装におけるレイヤ設計とレイヤ内実装について考える
pospome
gRPC入門
gRPC入門
Kenjiro Kubota
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
Jun-ichi Sakamoto
マイクロサービスバックエンドAPIのためのRESTとgRPC
マイクロサービスバックエンドAPIのためのRESTとgRPC
disc99_
講演資料: コスト最適なプライベートCDNを「NGINX」で実現するWeb最適化セミナー
講演資料: コスト最適なプライベートCDNを「NGINX」で実現するWeb最適化セミナー
NGINX, Inc.
イミュータブルデータモデル(入門編)
イミュータブルデータモデル(入門編)
Yoshitaka Kawashima
PlaySQLAlchemy: SQLAlchemy入門
PlaySQLAlchemy: SQLAlchemy入門
泰 増田
プログラミング言語Clojureのニャンパスでの活用事例
プログラミング言語Clojureのニャンパスでの活用事例
sohta
例外設計における大罪
例外設計における大罪
Takuto Wada
Angularを利用したシステム開発事例
Angularを利用したシステム開発事例
Developer Solutions事業部 メシウス株式会社 (旧グレープシティ株式会社)
SQLアンチパターン - ジェイウォーク
SQLアンチパターン - ジェイウォーク
ke-m kamekoopa
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
Takuto Wada
Mavenの真実とウソ
Mavenの真実とウソ
Yoshitaka Kawashima
Ruby で高速なプログラムを書く
Ruby で高速なプログラムを書く
mametter
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
「自分のとこでは動くけど…」を無くす devcontainer
「自分のとこでは動くけど…」を無くす devcontainer
Yuta Matsumura
世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture
Atsushi Nakamura
PHP の GC の話
PHP の GC の話
y-uti
ツール比較しながら語る O/RマッパーとDBマイグレーションの実際のところ
ツール比較しながら語る O/RマッパーとDBマイグレーションの実際のところ
Y Watanabe
関数型・オブジェクト指向宗教戦争に疲れたなたに送るGo言語入門
関数型・オブジェクト指向宗教戦争に疲れたなたに送るGo言語入門
Tadahiro Ishisaka
GNU AGPLv3について(On GNU AGPLv3)
GNU AGPLv3について(On GNU AGPLv3)
真行 八田
Goのサーバサイド実装におけるレイヤ設計とレイヤ内実装について考える
Goのサーバサイド実装におけるレイヤ設計とレイヤ内実装について考える
pospome
gRPC入門
gRPC入門
Kenjiro Kubota
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
Jun-ichi Sakamoto
マイクロサービスバックエンドAPIのためのRESTとgRPC
マイクロサービスバックエンドAPIのためのRESTとgRPC
disc99_
講演資料: コスト最適なプライベートCDNを「NGINX」で実現するWeb最適化セミナー
講演資料: コスト最適なプライベートCDNを「NGINX」で実現するWeb最適化セミナー
NGINX, Inc.
イミュータブルデータモデル(入門編)
イミュータブルデータモデル(入門編)
Yoshitaka Kawashima
PlaySQLAlchemy: SQLAlchemy入門
PlaySQLAlchemy: SQLAlchemy入門
泰 増田
プログラミング言語Clojureのニャンパスでの活用事例
プログラミング言語Clojureのニャンパスでの活用事例
sohta
例外設計における大罪
例外設計における大罪
Takuto Wada
Angularを利用したシステム開発事例
Angularを利用したシステム開発事例
Developer Solutions事業部 メシウス株式会社 (旧グレープシティ株式会社)
SQLアンチパターン - ジェイウォーク
SQLアンチパターン - ジェイウォーク
ke-m kamekoopa
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
Takuto Wada
Mavenの真実とウソ
Mavenの真実とウソ
Yoshitaka Kawashima
Ruby で高速なプログラムを書く
Ruby で高速なプログラムを書く
mametter
Tendances
(20)
「自分のとこでは動くけど…」を無くす devcontainer
「自分のとこでは動くけど…」を無くす devcontainer
世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture
PHP の GC の話
PHP の GC の話
ツール比較しながら語る O/RマッパーとDBマイグレーションの実際のところ
ツール比較しながら語る O/RマッパーとDBマイグレーションの実際のところ
関数型・オブジェクト指向宗教戦争に疲れたなたに送るGo言語入門
関数型・オブジェクト指向宗教戦争に疲れたなたに送るGo言語入門
GNU AGPLv3について(On GNU AGPLv3)
GNU AGPLv3について(On GNU AGPLv3)
Goのサーバサイド実装におけるレイヤ設計とレイヤ内実装について考える
Goのサーバサイド実装におけるレイヤ設計とレイヤ内実装について考える
gRPC入門
gRPC入門
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
マイクロサービスバックエンドAPIのためのRESTとgRPC
マイクロサービスバックエンドAPIのためのRESTとgRPC
講演資料: コスト最適なプライベートCDNを「NGINX」で実現するWeb最適化セミナー
講演資料: コスト最適なプライベートCDNを「NGINX」で実現するWeb最適化セミナー
イミュータブルデータモデル(入門編)
イミュータブルデータモデル(入門編)
PlaySQLAlchemy: SQLAlchemy入門
PlaySQLAlchemy: SQLAlchemy入門
プログラミング言語Clojureのニャンパスでの活用事例
プログラミング言語Clojureのニャンパスでの活用事例
例外設計における大罪
例外設計における大罪
Angularを利用したシステム開発事例
Angularを利用したシステム開発事例
SQLアンチパターン - ジェイウォーク
SQLアンチパターン - ジェイウォーク
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
Mavenの真実とウソ
Mavenの真実とウソ
Ruby で高速なプログラムを書く
Ruby で高速なプログラムを書く
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
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
WSO2
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
sn679259
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
Dernier
(10)
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
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