Más contenido relacionado
La actualidad más candente (20)
Similar a React を導入したフロントエンド開発 (20)
React を導入したフロントエンド開発
- 24. 比較項目 Angular React
機能 高機能
管理画面構築は
非常に楽。
実装が必要
デザイナー親和性 高
基本HTML
低
JSX+カスタムタグは
読みづらい
パフォーマンス 低 高
将来性 1系×(打ち切り)
2系??
枯れてない。
どんどん変わる。
好み もりもりすぎなん
じゃないの?
一方向なデータフロー
が読みやすい!
- 32. var HomeScreen = React.createClass(){
render : function() {return
<div>
<DaySelect/>
<TableSchedule/>
<ReservationFooter/>
<Modal>
<ReserveForm/>
</Modal>
</div>})..};
JSX+コンポーネントタグ
=JS内のrender()中に
HTMLと独自タグを記述
- 33. var DaySelect = React.createClass(){
//初期化
getInitialState(){...},
//描画前
componentWillMount() {...},
//描画
render() {...},
//描画後
componentDidMount() {...},
//クリックイベント
onClickBotton() {...}
}
- 37. var HomeScreen = React.createClass(){
render : function() {return
<div>
<DaySelect/>
<TableSchedule
onClickReservation={this.onClickReservation}/>
<ReservationFooter/>
<Modal>
<ReserveForm/>
</Modal>
- 38. var HomeScreen = React.createClass({
onClickReservation: function(reservation)
{
this.setState({
inputReservation: reservation,
isModalOpen: true,
doneButtonName:‘予約修正’,
cancelButtonName:'予約取消'
}); },
setState()
⇒再描画
- 40. var HomeScreen = React.createClass(){
render : function() {return
<div>
<DaySelect/>
<TableSchedule onClickReservation={this.onClickReservation}/>
<ReservationFooter/>
<Modal>
<ReserveForm onDone={this.updateReservation}/>
</Modal>
</div>})..};
- 47. <Route name="app" path="/" handler={App}>
<Route
name="home"
path="/shops/:shopId“
handler={HomeScreen}/>
<Route
name="weekSchedule“
path="/shops/:shopId/week_schedule“
handler={WeekScheduleScreen}/>
<Route
name="login"
path="/"
handler={LoginScreen}/>
<DefaultRoute handler={LoginScreen}/>
</Route>
一元管理
- 52. React は setState で何度も再描画
getInitialState : 初期化時に1回だけ
componentWillMount : render 前処理
render : 描画処理
componentDidMount : render 後処理
componentWillUpdate : State 変更後 render の前
componentDidUpdate : State 変更後
componentWillUnmount :コンポーネント削除前
=クリックイベント処理のバインドが外れてしまう
- 54. render 直後であれば DOM 操作可能
getInitialState : 初期化時に1回だけ
componentWillMount : render 前処理
render : 描画処理
componentDidMount : render 後処理
componentWillUpdate : State 変更後 render の前
componentDidUpdate : State 変更後
componentWillUnmount :コンポーネント削除前
- 55. componentDidMount: function () {
self = this;
$('.input-date').datepicker(
{
//Datepicker 初期化のための値
dateFormat: 'yy-mm-dd',
//選択時のイベント処理
onSelect: function(dateVal) {
//親コンポーネントに変数渡すなどの処理
}
}
);
}
- 56. jQuery が data-reactid を
いじってしまうと
破壊されるので注意
<section data-reactid=".0.1.0.1">
<div data-reactid=".0.1.0.1.0">
<dl data-reactid=".0.1.0.1.0.0">
<dt data-reactid=".0.1.0.1.0.0.0">
- 59. まとめ
• Angular もいいけど React が平易そう
• React での SPA 設計
1.コンポーネント化が基本
2.ReactRouterで統一的に画面遷移制御
3.jQuery との共存の方法は
ライフサイクルを把握する
- 61. アジェンダ
• 絶対王者 Angular vs 挑戦者 React
• React での SPA 設計
1.コンポーネントを分ける
2.ReactRouter
3.jQuery との共存
• もうちょっとがんばれば Flux
- 66. • View
= React でつくった画面。
onClick などイベントがあればActionを呼ぶ。
• Action
onClickなどのイベント処理の集約クラス。
イベントが発生したら Dispatcher を呼ぶ。
渡すデータのことをペイロードと呼ぶ。
• Dispatcher
Actionからデータ(ペイロード)をもらって Store を操作
するクラス。
• Store
Ajax や Localstorage などデータ取得・保存系の処理を行
うクラス。