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

Reactとは

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

ソースコード

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 ライフサイクル図

データフロー

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) 入門

・30分間React入門「いいねボタン」作成チュートリアル

・Tutorial: Intro to React

・今から始めるReact入門〜 React の基本

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