Upgrade to Pro — share decks privately, control downloads, hide ads and more …

170613-react_handson_rev1.1

nakazawa
June 15, 2017
250

 170613-react_handson_rev1.1

nakazawa

June 15, 2017
Tweet

Transcript

  1. Contents • Introduction • React開発環境 • Hello, React! • コンポーネント

    • props • イベントハンドリング(1) • state • イベントハンドリング(2) • 実習 コメントボード コラム • JSXとBabel • コンポーネント その他の書き⽅ • JSX中の{}に書けること書けないこと • 式ではなく⽂を書きたいときは? • JSX中の<h1>、HTMLの<h1>、違い • Virtual DOM • その他UIコンポーネントライブラリ • ローカルでの環境構築
  2. 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が⾃動で効率的に⾏う。
  3. コラム: コンポーネント その他の書き⽅ • 単なる関数として定義する書き⽅ • 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本体から別パッケージに切り離される予定
  4. コラム: 式ではなく⽂を書きたいときは? • メソッドに切り出し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
  5. コラム: 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のチェックは外す
  6. 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
  7. イベントハンドリング(2) • https://codepen.io/shinji709/pen/BZomJJ • this.setState()にstateの更新したい部分を渡す • 更新前のstateとマージされ、stateが新しい状態に更新される • this.state.customer =

    〜;などとして直接書き換えてはいけない • 更新するstateの渡し⽅で2通りの呼び出し⽅がある • オブジェクトを渡す⽅法 • コールバックを渡す⽅法 • コールバックはpreviousStateとcurrentPropsを引数として受け取れる
  8. 実習 コメントボード • ここまでの内容でいろいろなものが作れる • 今回はコメントボード • 名前⼊⼒欄、コメント⼊⼒欄、ボタンがある • ボタンを押すと名前とコメントがリストされる

    • 回答例) https://codepen.io/shinji709/pen/NgrwWq • (時間があれば)UIコンポーネントライブラリーで装飾 • CodePenでsemantic-ui-reactを使う設定 • https://codepen.io/shinji709/pen/awZwZG • 回答例) https://codepen.io/shinji709/pen/GEqExJ
  9. • コラム: 学習書籍 • ⼊⾨ 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との連携例が⾒られる。記 法も新しい。
  10. コラム: ローカルでの環境構築 • Create React Appというツールが便利 • 環境構築が⾯倒という声を受けFacebookが7⽉に発表 • Babel,

    Webpack, ESLintの設定など⾃動でやってくれる • Githubスター数28,000の⼤⼈気 • https://github.com/facebookincubator/create-react-app