入門 React：簡単なまとめ

dapps開発を行なっており、フロントエンドはReactで開発することになったのでReactを勉強します。
ちなみにプログラミングに関してはRailsを少しできるくらいで全くの素人です。
勉強した内容に関して簡単にまとめたいと思います。

#Reactとは
2013年、Facebookが開発した、Webアプリの User Interface を構築するための Java Script ライブラリです。
仮想DOMなどを利用して余計な機能を排除し、View部分に特化しています。

#ソースコード
https://github.com/backstopmedia/bleeding-edge-sample-app

#JSX
##JSXとは（Java Script XML）
ReactのコンポーネントないでHTMLのような可読性の高く記述できる構文です
メリット：よく知られている、意味的にわかりやすい、構造の可視化

##コンポーネント
Reactの中心概念です。
基本的な書き方

```sample.js
class diver extends Component {
  render() {
    return (
      <div>
        <p>Hello world</p>
      </div>
    );
  }
}

```

##JSXとHTMLの違い
JSXとHTMLは基本的に同じですが若干異なるところがあります。

####・HTMLの`class`は、JSXでは`className`

####・属性値を{}で括ることにより動的な属性値を記述できます

```
var classId = this.props.id
...
<div class = {classId}>...</div>
```

####・条件分岐は`if` `else`などではできない。
・三項演算子
・変数に値を代入し参照する
・条件文を別の関数として呼び出し
・&&
といったものを利用します

・三項演算子を使った例

```sample.js
{ this.state.loading
  ? <div id="loader"><p>Loading...</p></div>
  : <p>Done!</p>
}
```

####・`key` `ref` `dangerouslySetInnerHTML`といった属性がある

```
render() {
  return (
    <div>
      <input ref="textInput" ... /></input>
    </div>
  );
}
```
この`ref`の設定により、{this.refs.textInput}で参照できるようになっています。

####・スタイルはキャメルケースで参照

```
<div style={styles}>
  <p>Hello world</p>
</div>

var styles= {
  width: 350px,
  margin-bottom: 10px,
}
```

#コンポーネントのライフサイクル
コンポーネントは作成時、作成後、破棄時の３つのイベントで処理を登録する手段があります。

[React component ライフサイクル図](https://qiita.com/kawachi/items/092bfc281f88e3a6e456)

#データフロー
Reactでのデータの流れは基本的に親から子への一方通行です
そして、`props`と`state`の２つで、データの流れは扱えます。

##props

###propTypes
データをバインディングできます
###getDefaultProps

##state
コンポーネントの内部状態を示すものです。

###stateの更新
`replaceState`と`setState`の２種類ありますが、`setState`が使いやすいので`setState`を主に使います。

```
this.setState({ update: ---- })
```





#イベントの処理
ReactのイベントはJavaScriptのイベントと基本的に同じです
例えば、
・MouseEvent：ユーザーがクリックした時の通知
・change：要素の内容が変わった場合の通知

##SystematicEvent

```sample.js
class diver extends Component {
  handleCreate (event) => {
    this.setState({ update: event.target.value })
  }
  render() {
    return (
      <div>
        <input onChange={this.handleCrate} />
      </div>
    );
  }
}

```

#コンポーネントの合成

#Mixin
複数のコンポーネント間で共有できるメソッドを定義できます。

#DOM操作
どうしてもDOMにアクセスしたい場合は、ref属性を設定することで特定のコンポーネントにアクセスできます。

#フォーム

##Uncontrolled Component
複雑なフォームの作成に向いており、直接DOMノードへアクセスします。
そのため特殊なパターンであると言えます。

```smaple.js
class UncontrolledComponent extend component {
  render () {
    return (
      <input 
        type="text"
        defaultValue="Hello world" />;
    )
  }
}
```
このように、`UncontrolledComponent`のコンポーネントとは関係なく、`Input`は独自の値を保有しています。

```smaple.js
class UncontrolledComponent extend component {
  submitHandler: function (event) {
    event.preventDefault();
    var hello = React.findDOMNode(this.refs.hello).value;
  }
  render () {
    return (
      <form onSubmit={this.submitHandler}>
        <input 
          type="text"
          defaultValue="Hello world"
          ref="hello" />;
    )
  }
}
```
`Input`に`ref`属性を記述することによって、`this.refs`でアクセス可能になっています。

##Controlled component

下記の`Input`は`state`により保持されているので`Controlled component`と言えます。

```smaple.js
class ControlledComponent extend component {
  handleChange = e => {
    this.setState({ hello: e.target.value})
  }
  submitHandler = e => {
    event.preventDefault();
    ....
  }
  render () {
    return (
      <form onSubmit={this.submitHandler}>
        <input 
          type="text"
          defaultValue="Hello world"
          value={this.state.hello}
          onChange={this.handleChange} />;
      </form>
    )
  }
}
```

##ラベル
フォームが何を意味しているかを、ユーザーに伝えるため利用します。

```Sampele.js
<label htmlFor="name">名前</label>
```

##select
```sample.js
<select value={this.state.hoge} onChange={this.handleChange}>
  <option value="A">選択肢A</option>
  <option value="B">選択肢B</option>
  <option value="C">選択肢C</option>
</select>
```

##Checkbox

```smaple.js
class SampleCheckBox extend component {
  constructor(props) {
    super(props)
    this.state = {
      checked: true,
    }  
handleChange = e => {
    this.setState({ checked: e.target.checked})
  }
  submitHandler = e => {
    event.preventDefault();
    console.log("checked:", this.state.checked)
    ....
  }
  render () {
    return (
      <form onSubmit={this.submitHandler}>
        <input 
          type="checkbox"
          checked={this.state.checked}
          onChange={this.handleChange} />;
      </form>
    )
  }
}
```

##フォーカス
`Autodocus`を使うと、ユーザーがブラウザを開いた時に、
クリックする必要なく`form`を入力できるようになります。

```input.js
<input type="text" autoFocus={true} />
```

##ユーザビリティー
ユーザビリティーの向上には下記の５つを考えると良いです。

###ユーザーのやることが明確である
`placeholder`、`label`等を使って何をやれば良いのか明確にする

###ユーザーの入力に即座に応答する
処理に時間がかかる場合、「ロード中」と出すだけでもユーザーの忍耐力は変化する

###予測可能であること

###アクセシビリティー
マウスだけ、タッチだけ、といった一定の制約下でテストを行ってみる

###入力項目をなるべく少なくする
オートコンプリートなどを利用して、「たくさん入力する必要がある」とユーザーに感じさせない


#Java Script
アロー関数、スプレッド構文、に関してはReactを勉強する際に覚えておくよいJavaScriptの概念になります。

##アロー関数
`function`を省略して書くことができる

```
// 一般的な関数
var func = function(str) {
  console.log(str);
}

// アロー関数
var func = (str) => {
  console.log(str);
}
```

##スプレッド構文

```Sample.js
// 従来の書き方
function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction.apply(null, args);

// スプレッド構文
function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction(...args);
```

#参考サイト
JavascriptがわかってないとReactもわからないことが多くなるため
[ES2015(ES6) 入門](https://qiita.com/soarflat/items/b251caf9cb59b72beb9b)

・[30分間React入門「いいねボタン」作成チュートリアル](http://c16e.com/1510161700/)

・[Tutorial: Intro to React](https://reactjs.org/tutorial/tutorial.html)

・[今から始めるReact入門 〜 React の基本](https://qiita.com/TsutomuNakamura/items/72d8cf9f07a5a30be048)

イベントリスナー
イベントパンドラ
DOMノード