Enviar búsqueda
Cargar
React vtecx20170920
•
Descargar como PPTX, PDF
•
0 recomendaciones
•
350 vistas
Shinichiro Takezaki
Seguir
勉強会
Leer menos
Leer más
Empresariales
Denunciar
Compartir
Denunciar
Compartir
1 de 25
Descargar ahora
Recomendados
React vtecx20171025
React vtecx20171025
Shinichiro Takezaki
React vtecx20170822
React vtecx20170822
Shinichiro Takezaki
React vtecx20171129
React vtecx20171129
Shinichiro Takezaki
Pepper+独自会話エンジン
Pepper+独自会話エンジン
Recruit Technologies
【13-B-6】Hondaの生産技術屋さんがソフトウェア開発でアジャイルを初導入し組織変革に挑戦
【13-B-6】Hondaの生産技術屋さんがソフトウェア開発でアジャイルを初導入し組織変革に挑戦
Developers Summit
Kubernetesによる機械学習基盤への挑戦
Kubernetesによる機械学習基盤への挑戦
Preferred Networks
Developers-Summit-2022_Improving-Digital-Customer-Experience-with-Enterprise_...
Developers-Summit-2022_Improving-Digital-Customer-Experience-with-Enterprise_...
Shotaro Suzuki
ゼロから学ぶIoT
ゼロから学ぶIoT
Masaru Takahashi
Recomendados
React vtecx20171025
React vtecx20171025
Shinichiro Takezaki
React vtecx20170822
React vtecx20170822
Shinichiro Takezaki
React vtecx20171129
React vtecx20171129
Shinichiro Takezaki
Pepper+独自会話エンジン
Pepper+独自会話エンジン
Recruit Technologies
【13-B-6】Hondaの生産技術屋さんがソフトウェア開発でアジャイルを初導入し組織変革に挑戦
【13-B-6】Hondaの生産技術屋さんがソフトウェア開発でアジャイルを初導入し組織変革に挑戦
Developers Summit
Kubernetesによる機械学習基盤への挑戦
Kubernetesによる機械学習基盤への挑戦
Preferred Networks
Developers-Summit-2022_Improving-Digital-Customer-Experience-with-Enterprise_...
Developers-Summit-2022_Improving-Digital-Customer-Experience-with-Enterprise_...
Shotaro Suzuki
ゼロから学ぶIoT
ゼロから学ぶIoT
Masaru Takahashi
Azure IoT HubとIoT Edgeを活用した "三密対策"ソリューション「comieru LIVE」の開発プロジェクトへの道のり
Azure IoT HubとIoT Edgeを活用した "三密対策"ソリューション「comieru LIVE」の開発プロジェクトへの道のり
IoTビジネス共創ラボ
Google Container Engine と Kubernetes で 無理をしないコンテナ管理
Google Container Engine と Kubernetes で 無理をしないコンテナ管理
Ryosuke Suto
新プロジェクト Hyperledger Cactus のご紹介
新プロジェクト Hyperledger Cactus のご紹介
Hyperleger Tokyo Meetup
SnapmartにおけるCameraRollから写真の複数枚アップロードの実装
SnapmartにおけるCameraRollから写真の複数枚アップロードの実装
PIXTA Inc.
新卒入社のみなさまへ30代が贈る20代のキャリア戦略入門
新卒入社のみなさまへ30代が贈る20代のキャリア戦略入門
PIXTA Inc.
Developers Summit 2018 | IoTサービスを始める際に必要なこととは
Developers Summit 2018 | IoTサービスを始める際に必要なこととは
SORACOM,INC
.NET Gadgeteerで組み込み開発の第一歩
.NET Gadgeteerで組み込み開発の第一歩
Yoshitaka Seo
.Net GadgeteerでIoT
.Net GadgeteerでIoT
Yoshitaka Seo
20141003 webマーケティングエンジニアリング
20141003 webマーケティングエンジニアリング
Innova Inc.
一エンジニアが伝えたい、プロジェクトや組織の運営を理想に近づけるための考え方
一エンジニアが伝えたい、プロジェクトや組織の運営を理想に近づけるための考え方
崇 宮下
アジャイルの手法を取り入れたプロジェクトマネジメントの実例
アジャイルの手法を取り入れたプロジェクトマネジメントの実例
Takuya Kitamura
Watson info in think2019 サンフランシスコで聞いてきた Watson 最新情報
Watson info in think2019 サンフランシスコで聞いてきた Watson 最新情報
Satoru Yoshida
【C-2・醍醐様】AIとAPIがITインフラにもたらす変化 ~プログラマブルなクラウド型Wi-Fi~
【C-2・醍醐様】AIとAPIがITインフラにもたらす変化 ~プログラマブルなクラウド型Wi-Fi~
Developers Summit
Siderご紹介スライド@第2回 GitHub Enterprise ユーザ会
Siderご紹介スライド@第2回 GitHub Enterprise ユーザ会
Koichiro Sumi
COVID-19 研究・対策に活用可能な NVIDIA ソフトウェアと関連情報
COVID-19 研究・対策に活用可能な NVIDIA ソフトウェアと関連情報
NVIDIA Japan
経営のアジリティを支えるDevOpsと組織
経営のアジリティを支えるDevOpsと組織
Recruit Technologies
IoT 入門 ~ .NET Gadgeteer で簡単プログラミング
IoT 入門 ~ .NET Gadgeteer で簡単プログラミング
Yoshitaka Seo
大手ユーザー企業に入ってマネジメントでやってみたこと
大手ユーザー企業に入ってマネジメントでやってみたこと
Takuya Kitamura
20190117 teamup
20190117 teamup
Katsuhiro Honda
マネージャーになってからの技術を磨く戦略と戦術
マネージャーになってからの技術を磨く戦略と戦術
PIXTA Inc.
Lt20190129
Lt20190129
Shinichiro Takezaki
Web study20171007
Web study20171007
Shinichiro Takezaki
Más contenido relacionado
La actualidad más candente
Azure IoT HubとIoT Edgeを活用した "三密対策"ソリューション「comieru LIVE」の開発プロジェクトへの道のり
Azure IoT HubとIoT Edgeを活用した "三密対策"ソリューション「comieru LIVE」の開発プロジェクトへの道のり
IoTビジネス共創ラボ
Google Container Engine と Kubernetes で 無理をしないコンテナ管理
Google Container Engine と Kubernetes で 無理をしないコンテナ管理
Ryosuke Suto
新プロジェクト Hyperledger Cactus のご紹介
新プロジェクト Hyperledger Cactus のご紹介
Hyperleger Tokyo Meetup
SnapmartにおけるCameraRollから写真の複数枚アップロードの実装
SnapmartにおけるCameraRollから写真の複数枚アップロードの実装
PIXTA Inc.
新卒入社のみなさまへ30代が贈る20代のキャリア戦略入門
新卒入社のみなさまへ30代が贈る20代のキャリア戦略入門
PIXTA Inc.
Developers Summit 2018 | IoTサービスを始める際に必要なこととは
Developers Summit 2018 | IoTサービスを始める際に必要なこととは
SORACOM,INC
.NET Gadgeteerで組み込み開発の第一歩
.NET Gadgeteerで組み込み開発の第一歩
Yoshitaka Seo
.Net GadgeteerでIoT
.Net GadgeteerでIoT
Yoshitaka Seo
20141003 webマーケティングエンジニアリング
20141003 webマーケティングエンジニアリング
Innova Inc.
一エンジニアが伝えたい、プロジェクトや組織の運営を理想に近づけるための考え方
一エンジニアが伝えたい、プロジェクトや組織の運営を理想に近づけるための考え方
崇 宮下
アジャイルの手法を取り入れたプロジェクトマネジメントの実例
アジャイルの手法を取り入れたプロジェクトマネジメントの実例
Takuya Kitamura
Watson info in think2019 サンフランシスコで聞いてきた Watson 最新情報
Watson info in think2019 サンフランシスコで聞いてきた Watson 最新情報
Satoru Yoshida
【C-2・醍醐様】AIとAPIがITインフラにもたらす変化 ~プログラマブルなクラウド型Wi-Fi~
【C-2・醍醐様】AIとAPIがITインフラにもたらす変化 ~プログラマブルなクラウド型Wi-Fi~
Developers Summit
Siderご紹介スライド@第2回 GitHub Enterprise ユーザ会
Siderご紹介スライド@第2回 GitHub Enterprise ユーザ会
Koichiro Sumi
COVID-19 研究・対策に活用可能な NVIDIA ソフトウェアと関連情報
COVID-19 研究・対策に活用可能な NVIDIA ソフトウェアと関連情報
NVIDIA Japan
経営のアジリティを支えるDevOpsと組織
経営のアジリティを支えるDevOpsと組織
Recruit Technologies
IoT 入門 ~ .NET Gadgeteer で簡単プログラミング
IoT 入門 ~ .NET Gadgeteer で簡単プログラミング
Yoshitaka Seo
大手ユーザー企業に入ってマネジメントでやってみたこと
大手ユーザー企業に入ってマネジメントでやってみたこと
Takuya Kitamura
20190117 teamup
20190117 teamup
Katsuhiro Honda
マネージャーになってからの技術を磨く戦略と戦術
マネージャーになってからの技術を磨く戦略と戦術
PIXTA Inc.
La actualidad más candente
(20)
Azure IoT HubとIoT Edgeを活用した "三密対策"ソリューション「comieru LIVE」の開発プロジェクトへの道のり
Azure IoT HubとIoT Edgeを活用した "三密対策"ソリューション「comieru LIVE」の開発プロジェクトへの道のり
Google Container Engine と Kubernetes で 無理をしないコンテナ管理
Google Container Engine と Kubernetes で 無理をしないコンテナ管理
新プロジェクト Hyperledger Cactus のご紹介
新プロジェクト Hyperledger Cactus のご紹介
SnapmartにおけるCameraRollから写真の複数枚アップロードの実装
SnapmartにおけるCameraRollから写真の複数枚アップロードの実装
新卒入社のみなさまへ30代が贈る20代のキャリア戦略入門
新卒入社のみなさまへ30代が贈る20代のキャリア戦略入門
Developers Summit 2018 | IoTサービスを始める際に必要なこととは
Developers Summit 2018 | IoTサービスを始める際に必要なこととは
.NET Gadgeteerで組み込み開発の第一歩
.NET Gadgeteerで組み込み開発の第一歩
.Net GadgeteerでIoT
.Net GadgeteerでIoT
20141003 webマーケティングエンジニアリング
20141003 webマーケティングエンジニアリング
一エンジニアが伝えたい、プロジェクトや組織の運営を理想に近づけるための考え方
一エンジニアが伝えたい、プロジェクトや組織の運営を理想に近づけるための考え方
アジャイルの手法を取り入れたプロジェクトマネジメントの実例
アジャイルの手法を取り入れたプロジェクトマネジメントの実例
Watson info in think2019 サンフランシスコで聞いてきた Watson 最新情報
Watson info in think2019 サンフランシスコで聞いてきた Watson 最新情報
【C-2・醍醐様】AIとAPIがITインフラにもたらす変化 ~プログラマブルなクラウド型Wi-Fi~
【C-2・醍醐様】AIとAPIがITインフラにもたらす変化 ~プログラマブルなクラウド型Wi-Fi~
Siderご紹介スライド@第2回 GitHub Enterprise ユーザ会
Siderご紹介スライド@第2回 GitHub Enterprise ユーザ会
COVID-19 研究・対策に活用可能な NVIDIA ソフトウェアと関連情報
COVID-19 研究・対策に活用可能な NVIDIA ソフトウェアと関連情報
経営のアジリティを支えるDevOpsと組織
経営のアジリティを支えるDevOpsと組織
IoT 入門 ~ .NET Gadgeteer で簡単プログラミング
IoT 入門 ~ .NET Gadgeteer で簡単プログラミング
大手ユーザー企業に入ってマネジメントでやってみたこと
大手ユーザー企業に入ってマネジメントでやってみたこと
20190117 teamup
20190117 teamup
マネージャーになってからの技術を磨く戦略と戦術
マネージャーになってからの技術を磨く戦略と戦術
Similar a React vtecx20170920
Lt20190129
Lt20190129
Shinichiro Takezaki
Web study20171007
Web study20171007
Shinichiro Takezaki
Bpstudy20180725
Bpstudy20180725
Shinichiro Takezaki
Builderscon Tokyo 2017
Builderscon Tokyo 2017
Shinichiro Takezaki
Enterpriseapi20160210
Enterpriseapi20160210
Shinichiro Takezaki
Real techlt20180829
Real techlt20180829
Shinichiro Takezaki
LoRaWANとAzure IoT Hub接続ハンズオン
LoRaWANとAzure IoT Hub接続ハンズオン
Tomokazu Kizawa
SkyWay Vision & Mission
SkyWay Vision & Mission
Yoshiki Mizushima
eTrend20070608
eTrend20070608
Riotaro OKADA
リクルートテクノロジーズが語る 企業における、「AI/ディープラーニング」活用のリアル
リクルートテクノロジーズが語る 企業における、「AI/ディープラーニング」活用のリアル
Recruit Technologies
Dyna traceによるuxマネジメント
Dyna traceによるuxマネジメント
伸夫 森本
ライブラリ作成のすゝめ - 事例から見る個人OSS開発の効能
ライブラリ作成のすゝめ - 事例から見る個人OSS開発の効能
Yoshifumi Kawai
WebRTCエキスパート座談会
WebRTCエキスパート座談会
Ryosuke Otsuya
データから価値を生み続けるには
データから価値を生み続けるには
Recruit Lifestyle Co., Ltd.
Webによるデバイスを用いたリアルタイムサービスの可能性(神戸ITフェスティバル版)
Webによるデバイスを用いたリアルタイムサービスの可能性(神戸ITフェスティバル版)
Kensaku Komatsu
Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方
Masakazu Muraoka
Redmineの情報を自分好みに見える化した話
Redmineの情報を自分好みに見える化した話
ToshiharuSakai
Angularreflex20141210
Angularreflex20141210
Shinichiro Takezaki
Xen+Windowsで構築するサーバ仮想化環境
Xen+Windowsで構築するサーバ仮想化環境
VirtualTech Japan Inc.
JSUG 2018 BTC
JSUG 2018 BTC
kazukiotomori
Similar a React vtecx20170920
(20)
Lt20190129
Lt20190129
Web study20171007
Web study20171007
Bpstudy20180725
Bpstudy20180725
Builderscon Tokyo 2017
Builderscon Tokyo 2017
Enterpriseapi20160210
Enterpriseapi20160210
Real techlt20180829
Real techlt20180829
LoRaWANとAzure IoT Hub接続ハンズオン
LoRaWANとAzure IoT Hub接続ハンズオン
SkyWay Vision & Mission
SkyWay Vision & Mission
eTrend20070608
eTrend20070608
リクルートテクノロジーズが語る 企業における、「AI/ディープラーニング」活用のリアル
リクルートテクノロジーズが語る 企業における、「AI/ディープラーニング」活用のリアル
Dyna traceによるuxマネジメント
Dyna traceによるuxマネジメント
ライブラリ作成のすゝめ - 事例から見る個人OSS開発の効能
ライブラリ作成のすゝめ - 事例から見る個人OSS開発の効能
WebRTCエキスパート座談会
WebRTCエキスパート座談会
データから価値を生み続けるには
データから価値を生み続けるには
Webによるデバイスを用いたリアルタイムサービスの可能性(神戸ITフェスティバル版)
Webによるデバイスを用いたリアルタイムサービスの可能性(神戸ITフェスティバル版)
Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方
Redmineの情報を自分好みに見える化した話
Redmineの情報を自分好みに見える化した話
Angularreflex20141210
Angularreflex20141210
Xen+Windowsで構築するサーバ仮想化環境
Xen+Windowsで構築するサーバ仮想化環境
JSUG 2018 BTC
JSUG 2018 BTC
Más de Shinichiro Takezaki
Vtecx solution
Vtecx solution
Shinichiro Takezaki
11 29プレゼン資料
11 29プレゼン資料
Shinichiro Takezaki
20171025 date picker説明資料
20171025 date picker説明資料
Shinichiro Takezaki
Vtecx20151216 2
Vtecx20151216 2
Shinichiro Takezaki
Vtecx20151216
Vtecx20151216
Shinichiro Takezaki
Vtecxlt20151201
Vtecxlt20151201
Shinichiro Takezaki
No nosql20130424
No nosql20130424
Shinichiro Takezaki
BPStudy20121221
BPStudy20121221
Shinichiro Takezaki
Gaeja20121130
Gaeja20121130
Shinichiro Takezaki
Reflex works20120818 1
Reflex works20120818 1
Shinichiro Takezaki
Groovyコンファレンス
Groovyコンファレンス
Shinichiro Takezaki
Más de Shinichiro Takezaki
(11)
Vtecx solution
Vtecx solution
11 29プレゼン資料
11 29プレゼン資料
20171025 date picker説明資料
20171025 date picker説明資料
Vtecx20151216 2
Vtecx20151216 2
Vtecx20151216
Vtecx20151216
Vtecxlt20151201
Vtecxlt20151201
No nosql20130424
No nosql20130424
BPStudy20121221
BPStudy20121221
Gaeja20121130
Gaeja20121130
Reflex works20120818 1
Reflex works20120818 1
Groovyコンファレンス
Groovyコンファレンス
Último
セルフケア研修で使えるカードゲーム『攻略!きみのストレスを発見せよ!: ゲームで身につくストレスマネジメント』
セルフケア研修で使えるカードゲーム『攻略!きみのストレスを発見せよ!: ゲームで身につくストレスマネジメント』
Jun Chiba
物流は成長の準備ができていますか? 警告 1 日あたり 1 章を超えて消費しないでください コンテンツが覚醒と変化への意志を引き起こす
物流は成長の準備ができていますか? 警告 1 日あたり 1 章を超えて消費しないでください コンテンツが覚醒と変化への意志を引き起こす
Michael Rada
company profile.pdf
company profile.pdf
keiibayashi
事例DBサービス紹介資料(Case Study DB service introduction)
事例DBサービス紹介資料(Case Study DB service introduction)
YujiSakurai3
UP103シリーズ パワーコメット ユニパー スライドレールタイプ 瓦揚げ機 ウインチ
UP103シリーズ パワーコメット ユニパー スライドレールタイプ 瓦揚げ機 ウインチ
ユニパー株式会社
Service-introduction-materials-misorae-leadership
Service-introduction-materials-misorae-leadership
Yasuyoshi Minehisa
ストックマーク株式会社がご提供しているAnews(エーニュース)概要紹介.pdf
ストックマーク株式会社がご提供しているAnews(エーニュース)概要紹介.pdf
masakisaito12
202405_VISIONARYJAPAN_engineerteam_entrancebook(ver2.1)
202405_VISIONARYJAPAN_engineerteam_entrancebook(ver2.1)
KayaSuetake1
シンフォニティ株式会社(SYMPHONITY , Inc.) 会社説明・人材採用資料
シンフォニティ株式会社(SYMPHONITY , Inc.) 会社説明・人材採用資料
シンフォニティ 株式会社
Último
(9)
セルフケア研修で使えるカードゲーム『攻略!きみのストレスを発見せよ!: ゲームで身につくストレスマネジメント』
セルフケア研修で使えるカードゲーム『攻略!きみのストレスを発見せよ!: ゲームで身につくストレスマネジメント』
物流は成長の準備ができていますか? 警告 1 日あたり 1 章を超えて消費しないでください コンテンツが覚醒と変化への意志を引き起こす
物流は成長の準備ができていますか? 警告 1 日あたり 1 章を超えて消費しないでください コンテンツが覚醒と変化への意志を引き起こす
company profile.pdf
company profile.pdf
事例DBサービス紹介資料(Case Study DB service introduction)
事例DBサービス紹介資料(Case Study DB service introduction)
UP103シリーズ パワーコメット ユニパー スライドレールタイプ 瓦揚げ機 ウインチ
UP103シリーズ パワーコメット ユニパー スライドレールタイプ 瓦揚げ機 ウインチ
Service-introduction-materials-misorae-leadership
Service-introduction-materials-misorae-leadership
ストックマーク株式会社がご提供しているAnews(エーニュース)概要紹介.pdf
ストックマーク株式会社がご提供しているAnews(エーニュース)概要紹介.pdf
202405_VISIONARYJAPAN_engineerteam_entrancebook(ver2.1)
202405_VISIONARYJAPAN_engineerteam_entrancebook(ver2.1)
シンフォニティ株式会社(SYMPHONITY , Inc.) 会社説明・人材採用資料
シンフォニティ株式会社(SYMPHONITY , Inc.) 会社説明・人材採用資料
React vtecx20170920
1.
Copyright © Virtual
Technology, Inc Reactとvte.cxでWebアプリ ケーションを作成する#2 2017/9/20 竹嵜 伸一郎(@stakezaki) 1 <動作確認~ソース解説>
2.
Copyright © Virtual
Technology, Inc 竹嵜 伸一郎 (たけざき しんいちろう) twitter id:stakezaki (有)バーチャルテクノロジー代表取締役 2
3.
Copyright © Virtual
Technology, Inc React+vte.cx勉強会#2 • Reactのサンプルアプリの内容を解説し、実 際の開発を体験してもらいます <タイムテーブル> 18:30 ~ 19:30 セットアップとReactの概要 19:35 ~ 20:35 ソースコードの解説 20:35 ~ 20:45 質疑応答 • 今日のポイントは、「フォームとエンティティ」です。 3
4.
Copyright © Virtual
Technology, Inc vte.cxビジョン ”もうフルスタックエンジニアはいらない。 HTMLとJSの知識さえあればWebサービスを 開発できる。 そのような世界を私たちは目指しています。” 4
5.
Copyright © Virtual
Technology, Inc サンプルアプリのセットアップ • Visual Studio Codeの導入 – https://code.visualstudio.com/download • Windowsの場合、git for windowsの導入 – https://git-for-windows.github.io/ • あとは、以下のqiitaの記事を見ながら セットアップ – http://qiita.com/stakezaki/items/0401d7 9d392b081fb85e 5
6.
Copyright © Virtual
Technology, Inc Reactの概要 • ReactはFacebookが公開しているライブラ リでUIを効率的に構築することができる – HTMLに似たJSXのテンプレートを使うことで 直感的にUIを記述できる(仮想DOM) – コンポーネントの組み合わせで全体のアプリを 構築する 6
7.
Copyright © Virtual
Technology, Inc Reactの最も効率的な学習方法 • Quick Startを一通り動作確認する – https://facebook.github.io/react/docs/hell o-world.html 7
8.
Copyright © Virtual
Technology, Inc ES2015(ES6)も覚えましょう • let・constキーワードによる変数宣言 • class構文 • importとexportによるモジュール構文 • アロー関数(Arrow Functions) • その他、テンプレート文字列などいくつ かある 8
9.
Copyright © Virtual
Technology, Inc importとexport • export default foo • import foo from ‘foo’ • import {Form,Col} from 'react- bootstrap' 9
10.
Copyright © Virtual
Technology, Inc バンドラ(Webpack)とタスクランナ(Gulp) 10 ES2015 React(JSX) Flow トランスパイル Css/Sass ビルド・ モジュール結合 JavaScript (ES5) ローカルPC サーバ(vte.cx) Import/ export モジュール結合 GulpによるDeploy Webpackによるバンドル
11.
Copyright © Virtual
Technology, Inc アロー関数 • <Form horizontal onSubmit={(e)=>this.handleSubmit(e)}> • arrow関数を使えばbindしなくてもよい – function(e) = {this.handleSubmit(e).bind(this)} 11
12.
Copyright © Virtual
Technology, Inc Reactの基本構文 class Setup2 extends React.components { constructor(props:Props) { super(props) this.state = { isConfirmed: false } } componentWillMount() { } handleSubmit(e: InputEvent) { } render() { } } ReactDOM.render(<Signup />, document.getElementById('signform')) // SignupコンポーネントをHTMLのid:signformに挿入 12 ReactComponentを継承してclassを定義 Constructorで初期値を設定 Stateは更新されるとrender()が実行される特殊な変数 表示前に実行される(component関数) JSXをレンダリング ボタンクリックで実行(ユーザ関数)
13.
Copyright © Virtual
Technology, Inc Component Lifecycle • componentWillMount() – ComponentがDOMツリーに追加される前に一度だけ呼ばれます。 • componentDidMount() – ComponentがDOMツリーに追加された状態で呼ばれます • componentWillReceiveProps(nextProps) – Propが更新される時に呼ばれます。 • shouldComponentUpdate() – falseを返すとVirtualDOMの比較を行わずにrerenderされない • componentWillUpdate(nextProps, nextState) – Componentが更新する前に呼ばれます。 • componentDidUpdate(prevProps, prevState) – Componentが更新された後に呼ばれます。 • componentWillUnmount() – ComponentがDOMから削除される時に呼ばれます。 13
14.
Copyright © Virtual
Technology, Inc state • this.state • 更新すると再描画される(render()が実行) – 値の更新は、this.setState()を使う – stateを直接は更新できない • サンプル – 処理待ち中にボタンの上にSpinnerを表示する – http://qiita.com/stakezaki/items/0d467358a9 67d382697e 14
15.
Copyright © Virtual
Technology, Inc エラー表示のテクニック { this.state.isLoginFailed && <FormGroup> ・・・ } • State.inLoginFailedがtrueのときだけエ ラーを表示する 15
16.
Copyright © Virtual
Technology, Inc 型 • 型があれば10%〜20%のバグを減らすこ とができるとの調査結果 • サーバサイドにおける動的型付け言語疲れ 16
17.
Copyright © Virtual
Technology, Inc flow • 静的型付けにより型エラーを検出 /* @flow */ import type { State, Props, InputEvent } from 'demo.types' handleSubmit(e: InputEvent) { ・・・ } 17
18.
Copyright © Virtual
Technology, Inc コンポーネントを意識した開発 • demo.jsのreact-router-dom – <ListItems>、<ItemInput>、 <ItemUpdate>コンポーネント表示を切り替 える • 開発時はそれぞれのコンポーネントを 別々に作成して最後にまとめる • 外部コンポーネントを利用する – npmでインストールしてimportするだけ – ReCAPTCHA、パスワード強化チェック 18
19.
Copyright © Virtual
Technology, Inc Signup form 19
20.
Copyright © Virtual
Technology, Inc ReactPasswordStrength 20 • https://github.com/mmw/react-password-strength これ
21.
Copyright © Virtual
Technology, Inc ReCAPCHA 21 • https://github.com/dozoisch/react-google-recaptcha これ
22.
Copyright © Virtual
Technology, Inc uncontrolled form の例 • demo_iteminput.js – <FormGroup controlId={hobby_type}> • テーブル等を扱う場合はkeyが必要 – <tbody key={row.toString()}> – Reactのルールと考えればよい • Rowsの数だけ行を表示 – {this.state.rows.map(row => this.HobbyForm(row))} • addRow – rows: prevState.rows.concat([prevState.rows.length+1]) – Rowsに行の数を追記する 22
23.
Copyright © Virtual
Technology, Inc Controlled FormとEntity • signup2.js – 詳細は、 http://qiita.com/stakezaki/items/cbbfbf23 e107b60859c9 23
24.
Copyright © Virtual
Technology, Inc 10/25 勉強会#3やります! https://connpass.com/event/67541/ 24
25.
Copyright © Virtual
Technology, Inc25 support@virtual-tech.net ご質問はこちらまで
Descargar ahora