Reactを使ってWebサービスを作るための基礎２

Reactの基礎を学ぶためのメモ．
React Componentを作る上で理解しておかなければならない基本を理解する．

#React Componentの作り方　その１
##JSXについて
Reactにおいて必須なJSXは，JavaScript上でHTMLのコードを使えるJavaScriptの拡張構文．
BabelによってJavaScriptに変換される．

###CSS Styleについて
JSX内でスタイルを渡す場合には，キャメルケースで記述する．

呼び出し側

const rectStyle = {
    background: bgcolor,
    display: 'table-cell',
    border: '1px #000 solid',
    fontSize: 20,
    width: 30,
    height: 30,
    textAlign: 'center',
    verticalAlign: 'center',
  }

Rect.js

<div style={rectStyle} />
//JSX内でJSを記述する場合は{}

##属性値について
新規に作成したReact Componentには，通常のDOMと同様に属性値を設定することができる．

呼び出し側

<Rect num={1} bgcolor='#e02020' />

ここで設定した属性値は，，コンポーネント生成時（constructor時点)にpropsオブジェクト内に格納されて，React Componentに渡される．
コンポーネント内では，this.propsまたは各種ライフサイクルメソッドの引数から参照する．

Rect.js

render() {
  const { bgcolor } = this.props

また，defaultPropsを用いることで属性値がない場合のデフォルトの属性値を設定することが可能．

Rect.js

static defaultProps = {
  num: 0,
  bgcolor: '#808080',
}

###props.childrenについて
React Component呼び出し時に入れ子にされたDOMこ要素はprops.childrenに格納される．

呼び出し側

<NumberPlate><i>{this.state.num}</i></NumberPlate>

NumberPlate

//<i>{this.state.num}</i>がprops.childrenに格納される
<span>{props.children}</span>

###イベントハンドリングについて
基本的なaddEventListenerのイベントハンドリングは使用可能．
このとき書き方はキャメルケース表記．

呼び出し側

  <div onClick={() => this.countUp()}>

##コンポーネントのstateについて
コンポーネント内部で値を保持したい場合は，stateオブジェクトという特殊なオブジェクトを用いる．
中身のパラメータに関しては自由に宣言可能．

Rect.js

this.state = { number: this.props.num }

Reactには，stateオブジェクトのパラメータを更新するためにsetState()メソッドが用意されている．
このsetState()メソッドによりstateが更新されるのだが，無限ループになるためrenderメソッド内で呼び出してはいけない．

Rect.js

  countUp (num) {
    // stateを更新→renderメソッドが呼ばれ、再描画される
    this.setState({ number : num + 1 })
  }

  render () {
     return (
      <div onClick={(e)=> this.countUp(this.state.number)}>
     )
  }