React.js入門

React.js とは

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

前提

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

環境

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

項目 バージョン
node.js 8.9.4
React.js 16.2.0
VSCode 1.19.2

プロジェクトの作成

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

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

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

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

プロジェクト作成

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

スクリプト

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

項目 説明
start 開発モードでアプリケーションを開始する。URL(http://localhost:3000)で動作を確認することができます。
build build ディレクトリに、公開用のファイルが出力されます。
test Facebook 製のテストライブラリ jest によるテストを実行します。
eject create-react-app が標準で用意している webpack,Babel などの設定を変更したい場合に、実行すると各種ファイルがプロジェクト内に作成されます。この操作を行うと、元の状態に戻すことが出来ないので、注意してください。

JSX

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

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

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

実装

ReactDOM.render

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

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

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

src/index.js

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

src/components/hello.js

React.Component を継承して実装

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

src/index.js

src/components/hello.js

Stateful Components

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

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

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

src/index.js

src/components/counter.js

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

debug

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

参照

React.js

スポンサーリンク
  • このエントリーをはてなブックマークに追加
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA