[React] to-R Media の React 入門に入門

公開日: 2018/05/17
更新日: 2018/09/26

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

React v16.3.2
Babel v6.26.3
Flow v0.72.0

Contents

Reactとは?

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

Reactで「Hello world」

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

BabelとES2015

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

% npm install --save-dev babel-cli babel-preset-react babel-preset-env
.babelrc
{
  "presets": ["env","react"]
}

JSXの基本

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

コンポーネント

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

app.jsx
//コンポーネントの作成
function MyComponent() {
    return (
        <div>
            <h1>Hello, world!</h1>
            <h2>texttext</h2>
        </div>
    )
};
//コンポーネントの描画
ReactDOM.render(
    <myComponent />,
    document.getElementById('app')
);

Propsとは？

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

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

Flow

Flow: A Static Type Checker for JavaScript を導入します。

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

% npm install --save-dev flow-bin

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

package.json
{
  "scripts": {
    "flow": "flow",
  },
}

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

% npm run flow init

babel に preset を追加します。

% npm install --save-dev babel-preset-flow

.babelrc に preset を設定します。

.babelrc
{
  "presets": ["env","flow","react"]
}

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

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

app.jsx
//コンポーネントの作成
function MyComponent(props: Props) {
  return (
    <div>
      props1 : {props.myPropsName1}
      props2 : {props.myPropsName2}
    </div>
  );
}
type Props = {
  myPropsName1: string,
  myPropsName2: number
};
//コンポーネントの描画
ReactDOM.render(
  <myComponent myPropsName1="string" myPropsName2={1} />,
  document.getElementById("app")
);

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

Stateとは？

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

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

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

Reactのイベント設定

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

Reactのライフサイクル

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

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

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