Soumettre la recherche
Mettre en ligne
今からでも遅くない! React事始め
•
Télécharger en tant que PPTX, PDF
•
57 j'aime
•
114,760 vues
ynaruta
Suivre
Logiciels
Signaler
Partager
Signaler
Partager
1 sur 71
Télécharger maintenant
Recommandé
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Naoyuki Kataoka
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
Kohei Asai
Flutter移行の苦労と、乗り越えた先に得られたもの
Flutter移行の苦労と、乗り越えた先に得られたもの
Recruit Lifestyle Co., Ltd.
Djangoのススメ
Djangoのススメ
Alisue Lambda
React入門
React入門
GIG inc.
React JS and why it's awesome
React JS and why it's awesome
Andrew Hull
스타트업 인턴 개발자 3달간의 고군분투기 김은향
스타트업 인턴 개발자 3달간의 고군분투기 김은향
Eunhyang Kim
Recommandé
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Naoyuki Kataoka
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
Kohei Asai
Flutter移行の苦労と、乗り越えた先に得られたもの
Flutter移行の苦労と、乗り越えた先に得られたもの
Recruit Lifestyle Co., Ltd.
Djangoのススメ
Djangoのススメ
Alisue Lambda
React入門
React入門
GIG inc.
React JS and why it's awesome
React JS and why it's awesome
Andrew Hull
스타트업 인턴 개발자 3달간의 고군분투기 김은향
스타트업 인턴 개발자 3달간의 고군분투기 김은향
Eunhyang Kim
ワタシはSingletonがキライだ
ワタシはSingletonがキライだ
Tetsuya Kaneuchi
DDDはオブジェクト指向を利用してどのようにメンテナブルなコードを書くか
DDDはオブジェクト指向を利用してどのようにメンテナブルなコードを書くか
Koichiro Matsuoka
Node.JS - Workshop do básico ao avançado
Node.JS - Workshop do básico ao avançado
Eduardo Bohrer
プログラムの処方箋~健康なコードと病んだコード
プログラムの処方箋~健康なコードと病んだコード
Shigenori Sagawa
C# における Redis 徹底活用
C# における Redis 徹底活用
Takaaki Suzuki
ドメイン駆動設計サンプルコードの徹底解説
ドメイン駆動設計サンプルコードの徹底解説
増田 亨
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
Yuki Ishikawa
ADRという考えを取り入れてみて
ADRという考えを取り入れてみて
infinite_loop
どこに何を書くのか?
どこに何を書くのか?
pospome
Its time to React.js
Its time to React.js
Ritesh Mehrotra
3週連続DDDその1 ドメイン駆動設計の基本を理解する
3週連続DDDその1 ドメイン駆動設計の基本を理解する
増田 亨
고려대학교 컴퓨터학과 특강 - 대학생 때 알았더라면 좋았을 것들
고려대학교 컴퓨터학과 특강 - 대학생 때 알았더라면 좋았을 것들
Chris Ohk
リッチなドメインモデル 名前探し
リッチなドメインモデル 名前探し
増田 亨
iOS/Androidアプリエンジニアが理解すべき「Model」の振る舞い
iOS/Androidアプリエンジニアが理解すべき「Model」の振る舞い
Ken Morishita
React js - The Core Concepts
React js - The Core Concepts
Divyang Bhambhani
reactJS
reactJS
Syam Santhosh
신입 웹 개발자 포트폴리오 / 댓글 게시판
신입 웹 개발자 포트폴리오 / 댓글 게시판
hyeonjae Cheon
Introduction to React JS for beginners
Introduction to React JS for beginners
Varun Raj
オブジェクト指向の設計と実装の学び方のコツ
オブジェクト指向の設計と実装の学び方のコツ
増田 亨
ふつうのRailsアプリケーション開発
ふつうのRailsアプリケーション開発
Takafumi ONAKA
Flux react現状確認会
Flux react現状確認会
VOYAGE GROUP
React.jsでクライアントサイドなWebアプリ入門
React.jsでクライアントサイドなWebアプリ入門
spring_raining
Contenu connexe
Tendances
ワタシはSingletonがキライだ
ワタシはSingletonがキライだ
Tetsuya Kaneuchi
DDDはオブジェクト指向を利用してどのようにメンテナブルなコードを書くか
DDDはオブジェクト指向を利用してどのようにメンテナブルなコードを書くか
Koichiro Matsuoka
Node.JS - Workshop do básico ao avançado
Node.JS - Workshop do básico ao avançado
Eduardo Bohrer
プログラムの処方箋~健康なコードと病んだコード
プログラムの処方箋~健康なコードと病んだコード
Shigenori Sagawa
C# における Redis 徹底活用
C# における Redis 徹底活用
Takaaki Suzuki
ドメイン駆動設計サンプルコードの徹底解説
ドメイン駆動設計サンプルコードの徹底解説
増田 亨
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
Yuki Ishikawa
ADRという考えを取り入れてみて
ADRという考えを取り入れてみて
infinite_loop
どこに何を書くのか?
どこに何を書くのか?
pospome
Its time to React.js
Its time to React.js
Ritesh Mehrotra
3週連続DDDその1 ドメイン駆動設計の基本を理解する
3週連続DDDその1 ドメイン駆動設計の基本を理解する
増田 亨
고려대학교 컴퓨터학과 특강 - 대학생 때 알았더라면 좋았을 것들
고려대학교 컴퓨터학과 특강 - 대학생 때 알았더라면 좋았을 것들
Chris Ohk
リッチなドメインモデル 名前探し
リッチなドメインモデル 名前探し
増田 亨
iOS/Androidアプリエンジニアが理解すべき「Model」の振る舞い
iOS/Androidアプリエンジニアが理解すべき「Model」の振る舞い
Ken Morishita
React js - The Core Concepts
React js - The Core Concepts
Divyang Bhambhani
reactJS
reactJS
Syam Santhosh
신입 웹 개발자 포트폴리오 / 댓글 게시판
신입 웹 개발자 포트폴리오 / 댓글 게시판
hyeonjae Cheon
Introduction to React JS for beginners
Introduction to React JS for beginners
Varun Raj
オブジェクト指向の設計と実装の学び方のコツ
オブジェクト指向の設計と実装の学び方のコツ
増田 亨
ふつうのRailsアプリケーション開発
ふつうのRailsアプリケーション開発
Takafumi ONAKA
Tendances
(20)
ワタシはSingletonがキライだ
ワタシはSingletonがキライだ
DDDはオブジェクト指向を利用してどのようにメンテナブルなコードを書くか
DDDはオブジェクト指向を利用してどのようにメンテナブルなコードを書くか
Node.JS - Workshop do básico ao avançado
Node.JS - Workshop do básico ao avançado
プログラムの処方箋~健康なコードと病んだコード
プログラムの処方箋~健康なコードと病んだコード
C# における Redis 徹底活用
C# における Redis 徹底活用
ドメイン駆動設計サンプルコードの徹底解説
ドメイン駆動設計サンプルコードの徹底解説
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
ADRという考えを取り入れてみて
ADRという考えを取り入れてみて
どこに何を書くのか?
どこに何を書くのか?
Its time to React.js
Its time to React.js
3週連続DDDその1 ドメイン駆動設計の基本を理解する
3週連続DDDその1 ドメイン駆動設計の基本を理解する
고려대학교 컴퓨터학과 특강 - 대학생 때 알았더라면 좋았을 것들
고려대학교 컴퓨터학과 특강 - 대학생 때 알았더라면 좋았을 것들
リッチなドメインモデル 名前探し
リッチなドメインモデル 名前探し
iOS/Androidアプリエンジニアが理解すべき「Model」の振る舞い
iOS/Androidアプリエンジニアが理解すべき「Model」の振る舞い
React js - The Core Concepts
React js - The Core Concepts
reactJS
reactJS
신입 웹 개발자 포트폴리오 / 댓글 게시판
신입 웹 개발자 포트폴리오 / 댓글 게시판
Introduction to React JS for beginners
Introduction to React JS for beginners
オブジェクト指向の設計と実装の学び方のコツ
オブジェクト指向の設計と実装の学び方のコツ
ふつうのRailsアプリケーション開発
ふつうのRailsアプリケーション開発
En vedette
Flux react現状確認会
Flux react現状確認会
VOYAGE GROUP
React.jsでクライアントサイドなWebアプリ入門
React.jsでクライアントサイドなWebアプリ入門
spring_raining
React を導入したフロントエンド開発
React を導入したフロントエンド開発
daisuke-a-matsui
フロントエンド初学者がSPAに手を出してみた
フロントエンド初学者がSPAに手を出してみた
Kei Yagi
Angular1&2
Angular1&2
Kenichi Kanai
React入門-JSONを取得して表示する
React入門-JSONを取得して表示する
regret raym
kunibiki.rb #5 発表資料
kunibiki.rb #5 発表資料
yoshioka_cb
PHPerがRaspberry piとRubyでゴニョゴニョした話
PHPerがRaspberry piとRubyでゴニョゴニョした話
Toru Tamura
React系(別言語含む)の サーバーサイドレンダリング について考えよう
React系(別言語含む)の サーバーサイドレンダリング について考えよう
Kazuhiro Hara
Spring Bootの本当の理解ポイント #jjug
Spring Bootの本当の理解ポイント #jjug
Masatoshi Tada
AI and Machine Learning Demystified by Carol Smith at Midwest UX 2017
AI and Machine Learning Demystified by Carol Smith at Midwest UX 2017
Carol Smith
En vedette
(11)
Flux react現状確認会
Flux react現状確認会
React.jsでクライアントサイドなWebアプリ入門
React.jsでクライアントサイドなWebアプリ入門
React を導入したフロントエンド開発
React を導入したフロントエンド開発
フロントエンド初学者がSPAに手を出してみた
フロントエンド初学者がSPAに手を出してみた
Angular1&2
Angular1&2
React入門-JSONを取得して表示する
React入門-JSONを取得して表示する
kunibiki.rb #5 発表資料
kunibiki.rb #5 発表資料
PHPerがRaspberry piとRubyでゴニョゴニョした話
PHPerがRaspberry piとRubyでゴニョゴニョした話
React系(別言語含む)の サーバーサイドレンダリング について考えよう
React系(別言語含む)の サーバーサイドレンダリング について考えよう
Spring Bootの本当の理解ポイント #jjug
Spring Bootの本当の理解ポイント #jjug
AI and Machine Learning Demystified by Carol Smith at Midwest UX 2017
AI and Machine Learning Demystified by Carol Smith at Midwest UX 2017
Similaire à 今からでも遅くない! React事始め
Visualforce + jQuery
Visualforce + jQuery
Salesforce Developers Japan
PHP 2大 web フレームワークの徹底比較!
PHP 2大 web フレームワークの徹底比較!
Shohei Okada
scala+liftで遊ぼう
scala+liftで遊ぼう
youku
jsライブラリで実装する効率的なWeb制作
jsライブラリで実装する効率的なWeb制作
西畑 一馬
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
Toshiaki Maki
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
Yatabe Terumasa
Apexコアデベロッパーセミナー070726 配布用
Apexコアデベロッパーセミナー070726 配布用
stomita
図とコード例で多分わかる React と flux (工事中)
図とコード例で多分わかる React と flux (工事中)
Teloo
LaravelでAPI定義を管理する
LaravelでAPI定義を管理する
Kenjiro Kubota
UnicastWS vol.2
UnicastWS vol.2
Unicast Inc.
Cubby 2006-08-23
Cubby 2006-08-23
Agata Toshikata
CodeIgniterによるPhwittr
CodeIgniterによるPhwittr
kenjis
WordPress widget api
WordPress widget api
Takami Kazuya
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
Ayumi Goto
Data api workshop at Co-Edo
Data api workshop at Co-Edo
Yuji Takayama
Knockout.js を利用したインタラクティブ web アプリケーション開発
Knockout.js を利用したインタラクティブ web アプリケーション開発
Daizen Ikehara
Pro aspnetmvc3framework chap19
Pro aspnetmvc3framework chap19
Hideki Hashizume
ScaLa+Liftとか
ScaLa+Liftとか
youku
Streaming API で実現する クラウド ⇔ イントラ連携
Streaming API で実現する クラウド ⇔ イントラ連携
Shinichi Tomita
Struts2を始めよう!
Struts2を始めよう!
Shinpei Ohtani
Similaire à 今からでも遅くない! React事始め
(20)
Visualforce + jQuery
Visualforce + jQuery
PHP 2大 web フレームワークの徹底比較!
PHP 2大 web フレームワークの徹底比較!
scala+liftで遊ぼう
scala+liftで遊ぼう
jsライブラリで実装する効率的なWeb制作
jsライブラリで実装する効率的なWeb制作
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
Apexコアデベロッパーセミナー070726 配布用
Apexコアデベロッパーセミナー070726 配布用
図とコード例で多分わかる React と flux (工事中)
図とコード例で多分わかる React と flux (工事中)
LaravelでAPI定義を管理する
LaravelでAPI定義を管理する
UnicastWS vol.2
UnicastWS vol.2
Cubby 2006-08-23
Cubby 2006-08-23
CodeIgniterによるPhwittr
CodeIgniterによるPhwittr
WordPress widget api
WordPress widget api
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
Data api workshop at Co-Edo
Data api workshop at Co-Edo
Knockout.js を利用したインタラクティブ web アプリケーション開発
Knockout.js を利用したインタラクティブ web アプリケーション開発
Pro aspnetmvc3framework chap19
Pro aspnetmvc3framework chap19
ScaLa+Liftとか
ScaLa+Liftとか
Streaming API で実現する クラウド ⇔ イントラ連携
Streaming API で実現する クラウド ⇔ イントラ連携
Struts2を始めよう!
Struts2を始めよう!
今からでも遅くない! React事始め
1.
いまからでも遅くない! React 事始め 2015/6/6 @ynaruc
2.
自己紹介 • 名前: 成田
幸紀 (なるた ゆきのり) @ynaruc • 出身: 愛媛 • サイボウズ株式会社 3 年目 • 松山開発部 PG • 使っている言語 • TypeScript, JavaScript, C++, etc. 勉強会やハッカソンなどのイベントが好きで, 愛媛のイベントにたまに出没しています。
3.
さっそくですが, React はご存知ですか?
4.
5.
React • UI を構築するための JavaScript
ライブラリ • Facebook 製
6.
流行っているらしい • Fluent 2015
でも多数セッションがあった • O’reilly で入門書が発売された • 入門 React • 採用実績もある • Facebook • Yahoo • atom • Web に React を扱った記事が増えている
7.
流行に乗って React に入門しよう!
8.
今回発表すること • React ってなんだろう •
React で書くコンポーネント • 簡単なアプリを書いてみる • React を書くときに便利なツール
9.
今回発表しないこと • テスト • 仮想
DOM の詳細 • サーバサイドレンダリング • Flux 入門なので詳しい方ごめんなさい
10.
Info • もし発表中に React
を書いてみたい という方は JSFiddle で簡単に試せる ので下記のリンク先でお試しください • https://goo.gl/Fp9NLj
11.
React ってなんだろう?
12.
React • Facebook 製 •
Web アプリケーションの UI を構築 するための JavaScript ライブラリ • MVC の View の役割を担当する 簡単にいうと,「DOMの更新」と 「イベントハンドリング」をやってくれる ライブラリ
13.
React の特徴 • 役割が
View だけ • 仮想 DOM • コンポーネント
14.
役割が View だけ •
React は MVC の View の役割 • 既存の MVC フレームワークの View だけ React にすることも可能 • できることが限られているので シンプルで覚えやすい
15.
仮想 DOM • React
では DOM の更新に 仮想 DOM を使っている • 仮想 DOM は更新が必要な箇所を 自動的に計算して実際の DOM を更新する • 無駄な再描画を抑えることができる
16.
コンポーネント • React ではコンポーネントという 単位でUIパーツを作る •
コンポーネントは,UIパーツの ロジックとマークアップが一箇所に 定義されたもの
17.
コメントのリストを表示する例
18.
コメントのリストを表示する例 画面を構成するパーツはだいたいコンポーネント
19.
コンポーネント単位で分割するメリット • UI パーツ毎に分割できるので再利用 性の高いパーツが作れる •
コンポーネントの処理はコンポーネン ト内に閉じ込めることができる
20.
とりあえず React で書いた コンポーネントを見てみよう!
21.
React で Hello
World var Hello = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; } }); React.render(<Hello name="World" />, document.getElementById('container'));
22.
React で Hello
World var Hello = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; } }); React.render(<Hello name="World" />, document.getElementById('container')); JavaScript の中にタグがある!?
23.
タグを使って書いているのなに? • JSX (JavaScript
XML) • コンポーネントのマークアップを 書くためのシンタックス • HTMLによく似ている • コンパイルすると JavaScript になる
24.
JSX の書き方 • 基本的には
HTML と似ている • JavaScript の値を使いたいときは {} で囲む • {} の中身は JavaScript の式として 解釈されるので変数だけでなく関数も使える <h1>{title}</h1> <h1>{['hello', 'world'].join(' ')}</h1>
25.
JSX の注意点 • HTML
に似ているが属性名などは 異なる場合があるので気をつける 必要がある • HTML の class • JSX では className • HTML の for • JSX では htmlFor
26.
JSX に対する批判 • JavaScript
の中に マークアップが混在している React は JSX を使わなくても書ける
27.
JSX のいいところ • HTML
と似ているので理解しやすい • デザイナーも理解しやすいはず • コンポーネントの構造が分かりやすい • React の API を隠蔽してくれる • React 側で API が変更された場合は, コンパイラが勝手に変更してくれる
28.
JSX で書いた例 <div> <form className="comment-form" onSubmit={this.handleSubmit}> <input type="text" value={this.state.inputValue} onChange={this.handleChange} /> <input
type="submit" value="add" /> </form> <CommentList comments={this.state.comments} /> </div>
29.
JavaScript で書いた例 React.createElement("div", null, React.createElement("form",
{ className: "comment-form", onSubmit: this.handleSubmit}, React.createElement("input", { type: "text", value: this.state.inputValue, onChange: this.handleChange}), React.createElement("input”, {type: "submit", value: "add"} ) ), React.createElement(CommentList, {comments: this.state.comments}) ) ); }
30.
JSX は使うべきか? • JavaScript
にマークアップが混在するこ とがどうしても許せない場合は無理に使わ なくても良い • 個人的には JSX で書いたほうが見やすい ので JSX を使うのをお勧め 今回の発表中は JSX を使って サンプルを書きますのでご了承ください
31.
JSX を理解した上でもう一度 Hello
World var Hello = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; } }); React.render(<Hello name=“World” />, document.getElementById('container')); コンポーネントの定義部分
32.
JSX を理解した上でもう一度 Hello
World var Hello = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; } }); React.render(<Hello name=“World” />, document.getElementById('container')); ここでマークアップを返す
33.
JSX を理解した上でもう一度 Hello
World var Hello = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; } }); React.render(<Hello name=“World” />, document.getElementById('container')); コンポーネントに渡された値は this.props で参照できる
34.
JSX を理解した上でもう一度 Hello
World var Hello = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; } }); React.render(<Hello name=“World” />, document.getElementById('container')); Helloコンポーネントを id=“container” な要素に描画
35.
Hello World の学び •
コンポーネントの作り方 • React.createClass を使って作る • コンポーネントの DOM 構造は render 関数で返す • React.reander を使って指定した 要素にコンポーネントを描画する
36.
簡単なコンポーネントの作り方は 分かったので,簡単なアプリを 作ってみよう!
37.
サンプルコード JSFiddle にあります http://goo.gl/n1944d
38.
作るアプリ 【機能】 テキスト入力欄にコメントを入力して 「add」を押すとコメントがリストに追加される
39.
作るコンポーネント CommentApp コンポーネント CommentList コンポーネント
40.
まずは CommentList から •
CommentApp からコメントの配列 を受け取ってリストを表示する • 渡されるコメントの配列は 以下の様な形式 • [“こんにちは”, “プロ生ちゃん”,…]
41.
CommentList の実装 var CommentList
= React.createClass({ render: function() { var comments = this.props.comments.map(function(comment, index) { return <li key={index}>{comment}</li>; }); return ( <ul className="comment-list">{comments}</ul> ); } }); // comments 配列の例 // [“こんにちは”, “プロ生ちゃん”]
42.
// comments 配列の例 //
[“こんにちは”, “プロ生ちゃん”] CommentList の実装 var CommentList = React.createClass({ render: function() { var comments = this.props.comments.map(function(comment, index) { return <li key={index}>{comment}</li>; }); return ( <ul className="comment-list">{comments}</ul> ); } }); コメントの配列からコンポーネントの配列を作る
43.
CommentList の実装 var CommentList
= React.createClass({ render: function() { var comments = this.props.comments.map(function(comment, index) { return <li key={index}>{comment}</li>; }); return ( <ul className="comment-list">{comments}</ul> ); } }); key 属性にユニークな値を設定しておくと 更新時の差分計算が効率的になる // comments 配列の例 // [“こんにちは”, “プロ生ちゃん”]
44.
CommentList の実装 var CommentList
= React.createClass({ render: function() { var comments = this.props.comments.map(function(comment, index) { return <li key={index}>{comment}</li>; }); return ( <ul className="comment-list">{comments}</ul> ); } }); コンポーネントの配列を設定 // comments 配列の例 // [“こんにちは”, “プロ生ちゃん”]
45.
作るコンポーネント CommentApp コンポーネント CommentList コンポーネント
46.
CommentApp コンポーネント • コメント入力して
Submit したら コメントを追加し,入力欄を空にする • 入力された文字列を管理する必要がある • 書き込んだコメントの一覧を表示する • 書き込んだコメントの配列を持つ必要がある コンポーネント内で変化する値を管理し, 値が更新されたら再描画する必要がある
47.
コンポーネント内で変化する値 • コンポーネントの内部状態という • コンポーネント内では
this.state を 使って内部状態参照する • setState を使って内部状態を更新する
48.
CommentApp の初期内部状態の定義 var CommentApp
= React.createClass({ getInitialState: function() { return { comments: [], inputValue: '' } }, … }); ここで定義した値は this.state で参照できる 入力されたコメントの 文字列を格納する コメントリストに表示する コメントの配列
49.
render 関数の実装 var CommentApp
= React.createClass({ … render: function() { return ( <div> <form className="comment-form" onSubmit={this.handleSubmit}> <input type="text" value={this.state.inputValue} onChange={this.handleChange} /> <input type="submit" value="add" /> </form> <CommentList comments={this.state.comments} /> </div> ); } }); コメント入力欄 コメントリスト
50.
入力欄の値の更新 var CommentApp =
React.createClass({ … render: function() { return ( <div> <form className="comment-form" onSubmit={this.handleSubmit}> <input type="text" value={this.state.inputValue} onChange={this.handleChange} /> <input type="submit" value="add" /> </form> <CommentList comments={this.state.comments} /> </div> ); } }); コンポーネントのコメントの 文字列を参照する
51.
入力欄の値の更新 var CommentApp =
React.createClass({ … render: function() { return ( <div> <form className="comment-form" onSubmit={this.handleSubmit}> <input type="text" value={this.state.inputValue} onChange={this.handleChange} /> <input type="submit" value="add" /> </form> <CommentList comments={this.state.comments} /> </div> ); } }); 入力したら handleChange 関数を呼び出す
52.
入力欄の値の更新 (handleChange 関数) var
CommentApp = React.createClass({ … handleChange: function(e) { this.setState({ inputValue: e.target.value }); }, … }); this.setState 関数を実行すると, 状態を更新して再描画が走る
53.
コメントを入力から画面の更新の流れ input の value
の値が this.state.inputValue に更新される CommentApp の render が呼び出される handleChange で setState を使って状態を更新 コメントの入力すると onChange イベントが発火
54.
コメント追加の実装 var CommentApp =
React.createClass({ … render: function() { return ( <div> <form className="comment-form" onSubmit={this.handleSubmit}> <input type="text" value={this.state.inputValue} onChange={this.handleChange} /> <input type="submit" value="add" /> </form> <CommentList comments={this.state.comments} /> </div> ); } }); form の submit が発生したら handleSubmit を呼び出す
55.
コメント追加の実装 (handleSubmit の実装) var
CommentApp = React.createClass({ … handleSubmit: function(e) { e.preventDefault(); var comment = this.state.inputValue; this.setState({ comments: this.state.comments.concat(comment), inputValue: '' }); }, … }); 新しいコメントを追加し,入力文字列を空にして状態を更新
56.
CommentApp の実装 var CommentApp
= React.createClass({ … render: function() { return ( <div> <form className="comment-form" onSubmit={this.handleSubmit}> <input type="text" value={this.state.inputValue} onChange={this.handleChange} /> <input type="submit" value="add" /> </form> <CommentList comments={this.state.comments} /> </div> ); } }); this.state.comments がを更新したら CommentList が再描画される
57.
Submit してからの流れコメント追加まで CommentList の
render が呼び出されて再描画されコメントが追加される CommentList に更新されたコメントの配列を渡す CommentApp.render が呼び出される handleSubmit で setState を使って状態を更新 コメントを入力してAddをクリック すると onSubmit イベントが着火
58.
サンプルでの学び • コンポーネントの組み合わせ方 • イベントハンドラの登録方法 •
内部状態の持ち方と更新の仕方
59.
React の便利な機能を少し紹介
60.
PropTypes • this.props の値のバリデーションができる •
バリデーションに引っかかるとコンソールで 警告してくれる var UserLabel = React.createClass({ propTypes: { // userName は文字列で必須 userName: React.PropTypes.string.isRequired, // size は数値 size: React.PropTypes.number, // onClick は関数 onClick: React.PropTypes.func }, // ... });
61.
PropTypes のエラーを見てみる • サンプル •
UserLabel コンポーネントに渡す値を 変更すると開発者ツールに警告が出る • http://goo.gl/uxogKO • 参考資料 • https://facebook.github.io/react /docs/reusable-components.html
62.
さらに学ぶには? • O’reilly 社の「入門
React – コンポーネ ントベースのWebフロントエンド開発」 • http://www.oreilly.co.jp/books/9784 873117195/ • React の公式ドキュメント • https://facebook.github.io/react/docs /getting-started.html
63.
React を始めるときに便利なツール
64.
Yeoman + react-gulp-browserify •
Yeoman • プロジェクトのひな形を作るツール • 0作るのは面倒なので これでプロジェクトのひな形を作ると楽 • react-gulp-browserify • react アプリのためのひな形 • ファイル更新時の自動ビルド • テストなども入っている
65.
React Developer Tool •
Chrome の拡張機能 • コンポーネントの構造の確認 • コンポーネントの props や state の 値の確認ができる • Chrome で開発者ツールを開くと コンソールにこの拡張を入れるように 促される
66.
まとめ
67.
今回はなしたこと • React とは •
React の基本的な使い方 • 便利なツール
68.
React を使ってみた感想 • 最初
JSX を見て「???」になったが, 書いてみるとシンプルで覚えやすい • UI パーツの書き方が統一される • オレオレ実装の UI パーツが減るかも • 警告が親切でデバッグしやすい
69.
React を使ってみた感想 • DOM
を勝手に更新してしまうので UI周りのライブラリを使うときは気 をつける必要がある • かっちりしているので、 さっと作るアプリには向かない
70.
React はいかがでしたか?
71.
ぜひこれを期に React を 勉強してみてはいかがでしょう
Télécharger maintenant