React.js とは

Facebook が開発した、UI パーツを作成するライブラリです。仮想 DOM という仕組みを採用し、ページの表示をはやくしています。

前提

node.js がインストールされていること。

環境

記事作成時の環境を記載しています。

プロジェクトの作成

プロジェクトの作成には、facebook が用意している「create-react-app」を利用し雛形を作成します。

npm install を使用して環境を構築することも可能ですが、webpack や Babel の設定が必要となります。

create-react-app のインストール

以下コマンドを実行し、create-react-app コマンドを利用できるようにします。

npm install -g create-react-app

プロジェクト作成

create-react-app コマンドを使用して、プロジェクトを作成します。作成したプロジェクトの src ディレクトリ以下にファイルが存在しますが不要なので、削除してください。

create-react-app <プロジェクト名>

スクリプト

create-react-app コマンドで作成したプロジェクトには、スクリプトがあらかじめ作成されています。実行には、以下のように実行します。

npm run <スクリプト名>

JSX

JSX は javascript 構文を拡張したもので、XML の様な記述を可能としたものです。

以下の、div タグ内が JSX となります。

const WORLD = 'world';
const jsxSample =
<div>hello {WORLD}</div>
;

JSX では、HTML ５の構文と、Component をタグ名として使用可能です。また、javascript でも使用されている「class」「for」は HTML の属性として使用できないため、それぞれ「className」「htmlFor」が用意されています。

実装

ReactDOM.render

ルートとなるスクリプトで、ルートコンポーネントを何処に出力するか指定します。ここでのコンポーネントは、ルートとなるコンポーネントを指定します。

例)div タグ内の内容を、HTML 内の id=’root’に出力

出力先の HTML は create-react-app で作成されている、public/index.html を使用している事を前提としています。

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/app';

ReactDOM.render(, document.getElementById('root'));

Stateless Components

Stateless Components とは、state(状態)を保持しない component を表します。その component は、state を保持せず外部から受け取る props(プロパティ)で表示を変える component となります(state/props の両方を利用しない物も含む)。

Function として記述する方法と React.Component を継承する方法があります。前者は、Stateless Function Components(SFC)と呼ばれています。SFC はシンプルに記述することができます。

動作を確認するには前述の start スクリプトを実行してください。

Function(SFC)で実装

props 引数を受け取り、レンダリングしたい内容を戻り値とする関数を記述します。

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './components/hello';

ReactDOM.render(, document.getElementById('root'));

src/components/hello.js

import React from 'react';

export default function render(props = { value: 'world' }) {
return
<div>{props.value}</div>
;
}

React.Component を継承して実装

React.Component を継承し、render メソッドとして props 引数を受け取り、レンダリングしたい内容を戻り値として記述します。

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './components/hello';

ReactDOM.render(, document.getElementById('root'));

src/components/hello.js

import React from 'react';

export default class Hello extends React.Component {
render(props) {
return
<div>{props.value}</div>
;
}
}

Stateful Components

Stateful Components とは、state(状態)を保持する component を表します。
state はその component クラスの state プロパティで保持します。
state の変更が必要な場合は、setState メソッドを利用して state を更新します。
setState を使用し、更新することでその component が更新対象であると判断され、再レンダリングされます。

以下の counter.js は、初期値「0」で表示されている値が、「count up」ボタンをクリックすると、カウントアップしていくだけの Component になります。

動作を確認するには前述の start スクリプトを実行してください。

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Counter from './components/counter.js';

ReactDOM.render(, document.getElementById('root'));

src/components/counter.js

• renderメソッド内のbuttonタグに　onClick={add}　を追加してください。wordpressにて削除されるため、以下には含まれていません。

import React from 'react';

export default class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
count: props.defaultCount || 0
};
}

add() {
this.setState({
count: ++this.state.count
});
}

render() {
const add = this.add.bind(this);
return (
<div>count:{this.state.count}

<hr />

<button>count up</button>

</div>
);
}
}

debug

VSCode で debug が可能です。
デバッグ構成に以下を記述してください。既にデバッグ構成が存在する場合は、configurations 内のみを追記してください。

{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "React debug",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
},
{
"type": "chrome",
"request": "attach",
"name": "Attach to Chrome",
"port": 9222,
"webRoot": "${workspaceFolder}"
}
]
}

参照

• React.js 公式
• React.js github

奥山

ECMAScript,Javaを扱います。
最近は、vue.jsなどフロントエンドの技術に興味あり！

中日ドラゴンズを応援してます。