to-R Media の React入門に入門する。

[markdown]

> * [React入門 – to-R Media](https://www.to-r.net/media/react-tutorial/)
以下のバージョンで進めました。

“`prettyprinted
React v16.3.2
Babel v6.26.3
Flow v0.72.0
“`

## Reactとは?

> * [Reactとは? – React入門 – to-R Media](https://www.to-r.net/media/react-tutorial01/)

– Virtual DOM(仮想DOM)と呼ばれるレンダリング機構が特徴。
– ページに表示されている広いエリアの情報をJavaScriptで管理しておき、なにか変更があった場合に変更箇所のみを再描画するUIなどには向いています。
– jQueryなど直接HTMLに操作をおこなうライブラリとの併用は相性があまり良くはありません。

## Reactで「Hello world」

> * [Reactで「Hello world」 – React入門 – to-R Media](https://www.to-r.net/media/react-tutorial02/)

– JSXが一度JavaSciptに変換されてから実行される。
– あらかじめ変換しておいたJSファイルを読み込み利用するのが一般的です。

## BabelとES2015

> * [BabelとES2015 – React入門 – to-R Media](https://www.to-r.net/media/react-tutorial03/)
> * [DriftwoodJP/sandbox-react at a681ced22c84b595f66cbaeeaeb46ca1e7eccc58](https://github.com/DriftwoodJP/sandbox-react/tree/a681ced22c84b595f66cbaeeaeb46ca1e7eccc58)

`WARN deprecated babel-preset-es2015` なので、以下に変更する。

> * [Env preset · Babel](https://babeljs.io/docs/plugins/preset-env/)

“`prettyprinted
% npm install –save-dev babel-cli babel-preset-react babel-preset-env
“`

“`prettyprinted:.babelrc
{
“presets”: [“env”,”react”]
}
“`

## JSXの基本

> * [JSXの基本 – React入門 – to-R Media](https://www.to-r.net/media/react-tutorial04/)

– 最上位の要素 … 最上位にdivなどの要素を配置してその内側に複数の要素を並列で配置してきます。
– コメントアウト … 波括弧内にJavaScriptのコメントアウトでコメントが記述できます。
– 空要素 … XHMTLのように要素末に/を入れなくてはいけません。
– class属性 … className属性として記述する必要があります。
– for属性 … htmlFor属性として記述する必要があります。
– value属性 … defaultValue属性を利用します。
– checked属性 … defaultChecked属性を利用します。
– style属性 … {{…}}内にオブジェクト記法で指定する必要があります。
– 名前空間 … キャメルケースに変換して書く必要があります。
– JavaScript … {}内にはJavaScriptの記述が適用できます。スプレッド演算子( … )を用いてオブジェクトを展開して設定することもできる。

## コンポーネント

> * [コンポーネント – React入門 – to-R Media](https://www.to-r.net/media/react-tutorial05/)
> * [DriftwoodJP/sandbox-react at 37459eb7bad4bf76b7e74432ff4921c7cbb88d82](https://github.com/DriftwoodJP/sandbox-react/tree/37459eb7bad4bf76b7e74432ff4921c7cbb88d82)

`React.createClass` は非推奨となった。

> * [React 15.5へのアップデート手順(prop-typesとReact.createClass) – Qiita](https://qiita.com/azu/items/9d1985bf0140576894aa)
『「可能な限りは」 Stateless Fuctional Component を使う』べきとのこと。
> * [2017末時点での React Component 設計のベストプラクティス – Qiita](https://qiita.com/mizchi/items/bcb1aef8d1f14f8d0b4a)

“`javascript:app.jsx
//コンポーネントの作成
function MyComponent() {
return (

)
};
//コンポーネントの描画
ReactDOM.render(
,
document.getElementById(‘app’)
);
“`

## Propsとは？

> * [Propsとは？ – React入門 – to-R Media](https://www.to-r.net/media/react-tutorial06/)
> * [DriftwoodJP/sandbox-react at 371593af709ff3d29ef6c456a3eaaeb25c3d24df](https://github.com/DriftwoodJP/sandbox-react/tree/371593af709ff3d29ef6c456a3eaaeb25c3d24df)

– Reactのコンポーネントでは、PropsとStateと呼ばれる値でUIの状態や情報を管理している。
– Propsは、コンポーネント利用時に属性として設定ができる値で、一度設定してしまえば後から変更ができません。

`React.PropTypes` は非推奨となった。

> * [React 15.5へのアップデート手順(prop-typesとReact.createClass) – Qiita](https://qiita.com/azu/items/9d1985bf0140576894aa)
『Flow / TypeScript を使ってください。どちらも JSX の props の型情報を静的に検証できます。』とのこと。
> * [2017末時点での React Component 設計のベストプラクティス – Qiita](https://qiita.com/mizchi/items/bcb1aef8d1f14f8d0b4a)

### Flow

[Flow: A Static Type Checker for JavaScript](https://flow.org/en/) を導入します。

> * [Static Type Checking – React](https://reactjs.org/docs/static-type-checking.html)

`flow` コマンドをインストールします。

“`prettyprinted
% npm install –save-dev flow-bin
“`

`npm script` に `flow` コマンドを追加します。

“`json:package.json
{
“scripts”: {
“flow”: “flow”,
},
}
“`

`flow init` を実行し、`.flowconfig` を生成します。

“`prettyprinted
% npm run flow init
“`

`babel` に preset を追加します。

“`prettyprinted
% npm install –save-dev babel-preset-flow
“`

`.babelrc` に preset を設定します。

“`prettyprinted:.babelrc
{
“presets”: [“env”,”flow”,”react”]
}
“`

以上で `npm run flow` 実行時やコンパイル時に型チェックが行われるようになります。

Flow を利用した型定義は、下記のように書けました。

> * [Components | Flow](https://flow.org/en/docs/react/components/#toc-stateless-functional-components)

“`javascript:app.jsx
//コンポーネントの作成
function MyComponent(props: Props) {
return (

);
}
type Props = {
myPropsName1: string,
myPropsName2: number
};
//コンポーネントの描画
ReactDOM.render(
,
document.getElementById(“app”)
);
“`

Class Property Declarations はドラフトなのでスキップ。

## Stateとは？

> * [Stateとは？ – React入門 – to-R Media](https://www.to-r.net/media/react-tutorial07/)
> * [DriftwoodJP/sandbox-react at 5bcca7f30deb2737caa9d60df977c1c4ccfa78ab](https://github.com/DriftwoodJP/sandbox-react/tree/5bcca7f30deb2737caa9d60df977c1c4ccfa78ab)

– Stateとは、コンポーネント利用時に設定ができる値で、後から変更できる点がPropsと異なる。
– Reactでは、Stateが変更されたタイミングでコンポーネントの再描画を行うので、UI変更に不要なプロパティはStateではなくPropsで管理したほうがよい。

どうあるべきかがまだ見えないので保留。

以下は、`SyntaxError: src/app.jsx: Unexpected token (13:8)` がコンパイル時に発生。

> * [Components | Flow](https://flow.org/en/docs/react/components/#toc-adding-state)

## Reactのイベント設定

> * [Reactのイベント設定 – React入門 – to-R Media](https://www.to-r.net/media/react-tutorial08/)
> * [DriftwoodJP/sandbox-react at 6f2cf3f7b6e52c67758b4b3fd7eb8cec1ab65001](https://github.com/DriftwoodJP/sandbox-react/tree/6f2cf3f7b6e52c67758b4b3fd7eb8cec1ab65001)

– ボタンに対してonClick属性を利用してイベントを設定。
– イベントにはメソッド名の後ろにbind(this)を追加して指定。
– 入力要素に指定されているref属性は後ほど入力フィールドの値を参照するための属性。

## Reactのライフサイクル

> * [Reactのライフサイクル – React入門 – to-R Media](https://www.to-r.net/media/react-tutorial09/)
> * [DriftwoodJP/sandbox-react at 608df03868b43743d410adaf401a307bb06f295e](https://github.com/DriftwoodJP/sandbox-react/tree/608df03868b43743d410adaf401a307bb06f295e)

– コンポーネントには、状態の変化(ライフサイクル)により発火する様々なライフサイクルメソッドが用意されている。

## コンポーネント間で情報の受け渡し

> * [コンポーネント間で情報の受け渡し – React入門 – to-R Media](https://www.to-r.net/media/react-tutorial10/)
> * [DriftwoodJP/sandbox-react at 6906eb75f34d9563656eb667bf285c3118e17b6f](https://github.com/DriftwoodJP/sandbox-react/tree/6906eb75f34d9563656eb667bf285c3118e17b6f)

– 子コンポーネントに情報を引き渡す処理処理はバケツリレーとよばれている。JSXのスプレッド演算子を利用しオブジェクトを展開して設定することである程度複雑さを軽減することができる。
– Ref関数を用いることで親から子のメソッドを実行することができ、親から子や子から親への情報伝達が可能になります。
– ReactはViewに特化しており正直に言って状態/情報管理はそれほど得意ではありません。複雑なアプリケーションの場合は、React単体で情報を管理しようとせずに __ReduxなどのFluxアーキテクチャーを利用したほうがよい__ でしょう。

[/markdown]