React vtecx20170920

Copyright © Virtual Technology, Inc
Reactとvte.cxでWebアプリ
ケーションを作成する#2
2017/9/20 竹嵜伸一郎(@stakezaki)
1
<動作確認~ソース解説>

竹嵜伸一郎（たけざきしんいちろう）
twitter id:stakezaki
（有）バーチャルテクノロジー代表取締役
2

React+vte.cx勉強会#2
• Reactのサンプルアプリの内容を解説し、実
際の開発を体験してもらいます
＜タイムテーブル＞
18:30 ~ 19:30 セットアップとReactの概要
19:35 ~ 20:35 ソースコードの解説
20:35 ~ 20:45 質疑応答
• 今日のポイントは、「フォームとエンティティ」です。
3

vte.cxビジョン
”もうフルスタックエンジニアはいらない。
HTMLとJSの知識さえあればWebサービスを
開発できる。
そのような世界を私たちは目指しています。”
4

サンプルアプリのセットアップ
• 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

Reactの概要
• ReactはFacebookが公開しているライブラ
リでUIを効率的に構築することができる
– HTMLに似たJSXのテンプレートを使うことで
直感的にUIを記述できる(仮想DOM)
– コンポーネントの組み合わせで全体のアプリを
構築する
6

Reactの最も効率的な学習方法
• Quick Startを一通り動作確認する
– https://facebook.github.io/react/docs/hell
o-world.html
7

ES2015(ES6)も覚えましょう
• let・constキーワードによる変数宣言
• class構文
• importとexportによるモジュール構文
• アロー関数（Arrow Functions）
• その他、テンプレート文字列などいくつ
かある
8

importとexport
• export default foo
• import foo from ‘foo’
• import {Form,Col} from 'react-
bootstrap'
9

バンドラ(Webpack)とタスクランナ(Gulp)
10
ES2015
React(JSX)
Flow
トランスパイル
Css/Sass
ビルド・
モジュール結合
JavaScript
(ES5)
ローカルPC
サーバ(vte.cx)
Import/
export
モジュール結合
GulpによるDeploy Webpackによるバンドル

アロー関数
• <Form horizontal
onSubmit={(e)=>this.handleSubmit(e)}>
• arrow関数を使えばbindしなくてもよい
– function(e) = {this.handleSubmit(e).bind(this)}
11

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をレンダリング
ボタンクリックで実行(ユーザ関数)

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

state
• this.state
• 更新すると再描画される（render()が実行）
– 値の更新は、this.setState()を使う
– stateを直接は更新できない
• サンプル
– 処理待ち中にボタンの上にSpinnerを表示する
– http://qiita.com/stakezaki/items/0d467358a9
67d382697e
14

エラー表示のテクニック
{ this.state.isLoginFailed &&
<FormGroup>
・・・
}
• State.inLoginFailedがtrueのときだけエ
ラーを表示する
15

型
• 型があれば10%〜20%のバグを減らすこ
とができるとの調査結果
• サーバサイドにおける動的型付け言語疲れ
16

flow
• 静的型付けにより型エラーを検出
/* @flow */
import type {
State,
Props,
InputEvent
} from 'demo.types'
handleSubmit(e: InputEvent) {
・・・
}
17

コンポーネントを意識した開発
• demo.jsのreact-router-dom
– <ListItems>、<ItemInput>、
<ItemUpdate>コンポーネント表示を切り替
える
• 開発時はそれぞれのコンポーネントを
別々に作成して最後にまとめる
• 外部コンポーネントを利用する
– npmでインストールしてimportするだけ
– ReCAPTCHA、パスワード強化チェック
18

Signup form
19

ReactPasswordStrength
20
• https://github.com/mmw/react-password-strength
これ

ReCAPCHA
21
• https://github.com/dozoisch/react-google-recaptcha
これ

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

Controlled FormとEntity
• signup2.js
– 詳細は、
http://qiita.com/stakezaki/items/cbbfbf23
e107b60859c9
23

10/25 勉強会#3やります！
https://connpass.com/event/67541/
24

React vtecx20170920

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to React vtecx20170920

Similar to React vtecx20170920 (20)

More from Shinichiro Takezaki

More from Shinichiro Takezaki (11)

Recently uploaded

Recently uploaded (12)

React vtecx20170920