React 入門メモ

memo.md

非推奨：避けるアイディア

CDNを使ってのReactローディング

• 遅い

Body タグで指定されたページ全体をReactで生成したHTMLで置き換える(p19)

stateの多用

  * propsによる受け渡しで目的を達成できないか検討する

mixin

https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html

React 注意点

name

• class -- > className
• for --- > htmlFor

...演算子(spread演算子)

// デフォルト設定＆ propsによる上書き
<button {...defualtAtts} {...this.props} >
{this.props.children}
<\button>

prevendDefault()

• ブラウザによる通常のHTMLのサブミット処理が実行されないようにしている。
• ブラウザによる標準的な処理では、フォームに関わるU/Iが強制的にリセットされることによりonHandleSubmit()の中でValidationの結果に応じた処理を実行しても意味がなくなる。

onHandleSubmit: function(event) {
  event.preventDefault();
}

<form
  onChange={this.onHandleChange}
>
  <input
    onSubmit={this.onHandleSubmit}
  />
</form>

keyが必要な理由

1. Virual DOM から DOMへ部分的な変更をする際に必要。
2. 変更部分を一意に特定し、最低限の変更操作で済むようにするために必要。
3. もし指定しない場合は、警告が出る    * よい広域のDOMが更新対象になるためrender負荷が増えてしまう。そのため省略するメリットはない。

addon

• Perf
• TestUtils
• ReactTransitionGroup
• ReactCSSTransitionGroup

UI design

add-on	URL
material-ui	http://www.material-ui.com/
grommet	https://grommet.github.io/
Belle	http://nikgraf.github.io/belle/
React-Bootstrap	https://react-bootstrap.github.io/
Elemental UI	http://elemental-ui.com/
Semantic UI	http://semantic-ui.com/