170613-react_handson_rev1.1

5a3b7a1116982e5443fcd627bbf542b8?s=47 nakazawa
June 15, 2017
170

 170613-react_handson_rev1.1

5a3b7a1116982e5443fcd627bbf542b8?s=128

nakazawa

June 15, 2017
Tweet

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要素1つあればいい) • コンポーネントを組み合わせて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ではJavascript1ファイルにコンポーネン

    ト定義をたくさん書いているが、普通ファイルを分ける • 参考) 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の渡し⽅で2通りの呼び出し⽅がある • オブジェクトを渡す⽅法 • コールバックを渡す⽅法 • コールバックは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ライフを。