agenda

 Reactを使ってみた話
   agenda
   作り方ポイント
   TIPS
     webpack
     webpack-dev-server
     if文
     checkedは、true か false
     this.props.children
     イベントを起こしたコンポーネントの識別
     polyfill
   ツール
     haml-jsx-loader
     react-checkbox-group
     Lodash
   その他
     deep-freeze

作り方ポイント

  • 静的なページから作り始める

    • 静的なバージョンを作る
    • 想定される初期表示用のデータを準備しておく
    • 画面をコンポーネントに分割する
    • 分割した各子コンポーネントは親からデータを受け取って描画するだけ
  • stateは最低限に絞る

    • propsを通して親から渡されるか?
    • コンポーネント内で他のstateまたはpropsの基に計算出来るものか?
    • 何度も変更されるか?
  • 参考

TIPS

webpack

const webpack = require('webpack');

module.exports = {
  context: __dirname + "/src",
  entry: {
    index:  './index.js',
    spec: './spec.js'
  },
  output: {
    path: './build',
    filename: '[name].js',
  },
  module: {
    loaders: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        loaders: ['react-hot', 'babel-loader', 'haml-jsx']
      },
      {
        test: /spec\.js$/,
        exclude: /node_modules/,
        loaders: ['mocha', 'babel-loader', 'haml-jsx']
      }
    ]
  },
  devServer: {
    contentBase: 'build'
  }
}

webpack-dev-server

if文

短絡評価を使う

<div>
{value && <div>value is true</div>}
</div>

三項演算子を使う

<div>
{value ? (<div>value is true</div>) : (<div> value is false </div>)}
</div>

関数を使う

<div>
{()=> {
  if(value) {
    return (<div>value is true</div>)
  else {
    return (<div>value is false </div>)
  }
}}
</div>

こんなのもある. this.props.childrenをレンダーするかしないかを切り替えてるだけ

checkedは、true か false

undefinedで、falseと同じ動作にならない

''' var isChecked = !!value; ( ) '''

this.props.children

???

イベントを起こしたコンポーネントの識別

bindを使用する

<input onClick={this.action.bind(this, item)} />

polyfill

chrome, firefox, スマホで動作させる分にはなくても動くけど... IE

ツール

haml-jsx-loader

見た目を整える前は、シンプルなDOMのみで動作を作ってるけど、 見た目を適用すると、DOMが複雑になってJSXではシンドイ... hamlでかけて、閉じタグを意識しなくて良くなるのは便利

GitHub - dingbat/haml-jsx-loader: Inline Haml with JSX

https://github.com/dingbat/haml-jsx-loader

react-checkbox-group

思いのほか、複数選択のチェックボックスの値をイベントごとに取得してくるというのがめんどくさい、これを使えば一度にチェックボックスで選択されている値を取ってくることができる。 GitHub - ziad-saab/react-checkbox-group: Sensible checkbox groups manipulation for DOM.

https://github.com/ziad-saab/react-checkbox-group

Lodash

日頃ruby書いている人だと、とても親和性が高い

Lodash

https://lodash.com/

その他

deep-freeze

..いつの間にか思わぬ場所を破壊していることも...

deep-freeze + 'use strict;'

Recent Entries