170613-react_handson_rev1.1

Transcript

1. Reactハンズオン資料 Rev1.1 株式会社DOMO 畑⼭
2. Contents • Introduction • React開発環境 • Hello, React! • コンポーネント • props • イベントハンドリング(1) • state • イベントハンドリング(2) • 実習 コメントボード コラム • JSXとBabel • コンポーネント その他の書き⽅ • JSX中の{}に書けること書けないこと • 式ではなく⽂を書きたいときは？ • JSX中の<h1>、HTMLの<h1>、違い • Virtual DOM • その他UIコンポーネントライブラリ • ローカルでの環境構築
3. Introduction • フロントエンドUIを構築するライブラリとして⼈気のあるReact について、ハンズオン形式で学習していきます。
4. React開発環境 • 開発環境の準備のハードルが⾼いと⾔われる • Reactを学び始める前に挫折しては本末転倒… →そこで今回はCodePen(https://codepen.io/pen/)を使⽤する • Free PlanでもSign Upすると機能が増えるので登録推奨 CodePen CodePen is a playground for the front end side of the web. It's all about inspiration, education, and sharing.
5. React開発環境 ‒ CodePenの設定 Settingをクリックし、以下のように設定 ・JavaScript Preprocessor： None → Babel ・Add External JavaScript： Quick-addでReact, React DOM追加
6. Hello, React! • 以下の通り⼊⼒してプレビューにHello, React!と表⽰されるか 確認（打ち込んでみてください） https://codepen.io/shinji709/pen/oWJdWM
7. Hello, React! • Debug ModeにしてChromeデベロッパーツールで動作を確認 ※Debug ModeはFree Planでも使えます
8. Hello, React! • HTMLのみ(Javascript部分を書く前) • HTML+Javascript(React)
9. Hello, React! • ここまででは、素のJavascriptやjQueryによるDOM操作と変わ らないように⾒えるが… cf) https://codepen.io/shinji709/pen/bRpKvb • 私たちはすでにJSXを使⽤し、 • ReactがVirtual DOMを管理、DOMにレンダリングしている • ※Virtual DOM: jQuery等でDOMを直接操作していくのではなく、JSXを⽤いて(htmlを書 くように)宣⾔的にビューを書き、Reactが管理する偽物のDOMを構築していく。Virtual DOMを本物のDOMに反映する作業はReactが⾃動で効率的に⾏う。
10. コラム: JSXとBabel • Reactのために作られたJavascriptの構⽂拡張 • 必須ではないが、ビューをHTMLを書くように作れるので便利 • JSX→Javascriptの変換を⾏ってくれるツールがBabel • 正確にはBabelが変換できるのはJSXだけではない。元々はES6→ES5変 換をするためのツール JSXを使わない場合はこのようになる
11. コラム: JSXとBabel • 通常、実⾏時ではなく製作時に変換 するので速度上のデメリットはない • JSX使おう https://codepen.io/shinji709/pen/weGxqo
12. コンポーネント • Reactはコンポーネント指向のライブラリ • コンポーネントは構造・⾒た⽬・振る舞いをセットにした単位 • 構造はHTML、⾒た⽬はCSS、振る舞いはJS、のイメージ • コンポーネント指向のライブラリはいくつかあるが、Reactは構 造・⾒た⽬・振る舞いすべてJavascriptに集約するタイプ(HTML のbodyタグにはdiv要素１つあればいい) • コンポーネントを組み合わせてWebアプリを組み⽴てていく
13. コンポーネント - 書き⽅(基本) • ES2015(=ES6)のclass構⽂を使⽤ • React.Componentを継承 • JSXをreturnするrenderメソッドを定義 https://codepen.io/shinji709/pen/YVdLxR
14. コンポーネント - 使い⽅(基本) • Hello, React!のh1と同じ • このh1もHTML要素ではなくReact要素≒コンポーネントでした JSXを使わない場合はこのようになる JSXを使わない場合はこのようになる HTML要素はdocument.createElement('h1')
15. コラム: コンポーネント その他の書き⽅ • 単なる関数として定義する書き⽅ • https://codepen.io/shinji709/pen/GEpZNK • Stateless Functional Component (SFC)という • propsは使えるがstateは使えない（props/stateについては後述） • ライフサイクルメソッド※は定義できない ※本⽇は取り扱わない • これで書けるときは積極的に使っていくのが最近の潮流 • React.createClass()を使った書き⽅ • https://codepen.io/shinji709/pen/BZoKmK • 古い書き⽅。⾮推奨となって⻑いが、Webや本で⾒かけるかも • v16からReact本体から別パッケージに切り離される予定
16. コンポーネント - ⼊れ⼦ • ⼩さなコンポーネントを組み合わせてコンポーネントを作る例 • https://codepen.io/shinji709/pen/KmbRZg • CodePenのFree PlanではJavascript１ファイルにコンポーネン ト定義をたくさん書いているが、普通ファイルを分ける • 参考) https://codesandbox.io/s/olrXDBWj
17. props • HTMLタグの属性のようなイメージ • https://codepen.io/shinji709/pen/VbqxXq {}で囲むことでJSX内にjavascriptの式を 書くことができる（※⽂は書けない） this.props.「props名」で受け取った propsを参照できる htmlタグの属性のような書き⽅でpropsを コンポーネントに渡せる
18. props
19. props • 複数のprops • https://codepen.io/shinji709/pen/XgmgLb
20. コラム: JSX中の{}に書けること書けないこと • JSX中の{}に書けるのは式(expression)のみ • if⽂や for⽂は…⽂(statement) • そのためJSX中では三項演算⼦（?:）や配列のmapメソッドなど をよく使う
21. コラム: 式ではなく⽂を書きたいときは？ • メソッドに切り出しJSXの{}内で呼ぶ • https://codepen.io/shinji709/pen/weKqmb • メソッド(関数)呼び出しは式 • 注）;をつけないこと。;は単独でも空⽂＝⽂ • 即時実⾏関数式を使ってJSXの{}内に直接書く(参考まで) • https://codepen.io/shinji709/pen/vZNJbV • Immediately invoked function expression(IIFE)は式 • Arrow関数でもfunction式でも書けるがfunction式の場合、今回 は.bind(this)が必要 • renderメソッド定義内、return⽂の前で計算する(参考まで) • https://codepen.io/shinji709/pen/OgNaNy
22. イベントハンドリング(1) • https://codepen.io/shinji709/pen/rwOGor • JSXではonclickではなくonClick（キャメルケース）
23. コラム: JSX中の<h1>、HTMLの<h1>、違い • 閉じタグ必須 • <li>hogeはダメ、<li>hoge</li>はOK • <br>はダメ、<br />はOK • class属性はclassName（classがjavascriptの予約語のため） • style属性はオブジェクトで渡す。プロパティ名はcamelCase • https://codepen.io/shinji709/pen/jwqXjo • コメントの書き⽅（<!-- コメント --> → {/* コメント */}） など。 • 慣れないうちは以下のページで確認できる • http://magic.reactjs.net/htmltojsx.htm • Create classのチェックは外す
24. state • コンポーネントの状態を保持しておける • UIパーツ（Input要素など）の現在の値など • propsとstate、以下Webページの図がわかりやすい • http://creator.dwango.co.jp/3413.html • 単純な例 • https://codepen.io/shinji709/pen/weKPMq • 上では無視していたpropsをstateの初期値に利⽤する例 • https://codepen.io/shinji709/pen/RgWjZK
25. イベントハンドリング(2) • https://codepen.io/shinji709/pen/BZomJJ • this.setState()にstateの更新したい部分を渡す • 更新前のstateとマージされ、stateが新しい状態に更新される • this.state.customer = 〜;などとして直接書き換えてはいけない • 更新するstateの渡し⽅で２通りの呼び出し⽅がある • オブジェクトを渡す⽅法 • コールバックを渡す⽅法 • コールバックはpreviousStateとcurrentPropsを引数として受け取れる
26. イベントハンドリング(2) • コンストラクターでハンドラを.bind(this) • 内部でthisを参照するイベントハンドラーには必要 • 無いと呼ばれたときハンドラ内のthisがundefinedとなりエラー • イベントハンドリング(1)では必要なかった(this参照していないため) • コンストラクター内でbindする以外にもいくつか⽅法がある • http://qiita.com/cubdesign/items/ee8bff7073ebe1979936 • http://blog.andrewray.me/react-es6-autobinding-and-createclass/
27. 実習 コメントボード • ここまでの内容でいろいろなものが作れる • 今回はコメントボード • 名前⼊⼒欄、コメント⼊⼒欄、ボタンがある • ボタンを押すと名前とコメントがリストされる • 回答例) https://codepen.io/shinji709/pen/NgrwWq • (時間があれば)UIコンポーネントライブラリーで装飾 • CodePenでsemantic-ui-reactを使う設定 • https://codepen.io/shinji709/pen/awZwZG • 回答例) https://codepen.io/shinji709/pen/GEqExJ
28. • コラム:その他UIコンポーネントライブラリ • semantic-ui-reactを紹介したのはCodePenで使えるCDNが公式 に提供されていたため • 他にもたくさんある • https://hackernoon.com/the-coolest-react-ui-frameworks-for-your- new-react-app-ad699fffd651 • Material-UIが最も有名 • 各ライブラリ作法が異なるため選定の際は注意 • 特にCSSの扱いが様々
29. • コラム: 学習書籍 • ⼊⾨ React ―コンポーネントベースのWebフロントエンド開発 • 2015/4/3 • JavaScript フレームワーク⼊⾨ • 2016/9/15 • WebデベロッパーのためのReact開発⼊⾨: JavaScript UIライブラリの基本と活⽤ • 2016/11/25 • WEB+DB PRESS Vol.97 (Reactで作るシングルページアプリケーション⼊⾨) • 2017/2/24 • Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発⼊⾨ • 2017/3/11☆おすすめ。新しい記法に対応。環境構築や周辺ツールの説明も豊富。 • Electronではじめるアプリ開発 ~JavaScript/HTML/CSSでデスクトップアプリを作ろう • 2017/3/28☆おすすめ。UIの構築にReactを採⽤している。Firebaseとの連携例が⾒られる。記 法も新しい。
30. コラム: ローカルでの環境構築 • Create React Appというツールが便利 • 環境構築が⾯倒という声を受けFacebookが7⽉に発表 • Babel, Webpack, ESLintの設定など⾃動でやってくれる • Githubスター数28,000の⼤⼈気 • https://github.com/facebookincubator/create-react-app
31. ありがとうございました よいReactライフを。