React超入門 / HelloWorld, JSX, コンポーネントの基本 #React

はじめに

Facebook製JavaScriptライブラリReactについて、最低限の内容を簡単にまとめました。

読者対象者

React未経験だけど興味がある人
他JavaScriptフレームワーク未経験者

開発環境

JSFiddle
React 15.4.2(2017/03/26時点の最新版)
ES5基準とする

Reactとは何か

公式サイトのトップページには

A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

と記載されており、Reactとは「ユーザーインターフェースを構築するJavaScriptライブラリ」と定義されています。

Hello Worldを表示させよう

サンプルコード

実行例：https://jsfiddle.net/hypermkt/fy1apndp/

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<div id="content"></div>

ReactDOM.render(
  React.DOM.h2(null, 'Hello World'),
  getElementById('content')
);

処理の流れ

CDNからreact.js, react-dom.jsを読み込む
Reactで生成したHTMLを表示させる場所を宣言する
ReactDOM.render を利用して、content IDの場所に、h2タグでHello Worldを表示させる

ReactDOM.render とは

ReactDOM.render(
  element,
  container,
  [callback]
)

指定されたコンテナーに対して、React DOMツリーを出力する関数です。第１引数にReactのDOMエレメントを渡します。第２引数には、DOMエレメントを出力したい要素を指定します。

JSX

JSXとは

JSXは、JavaScriptの拡張文法で、JavaScript内にHTMLタグを直接記述しているかのようにDOMエレメントを指定できます。

以下を見ると一目瞭然ですが、JSXで記述された方が可読性も高くなり、かつコーディングもシンプルになります。

ReactDOM.render(
-  React.DOM.h2(null, 'Hello World'),
+  <h2>Hello World</h2>,
  document.getElementById('content')
);

JSXのもう一つの特徴としては、JSX自体はJavaScriptコードではないのでブラウザ上では動作しません。そのため、Babelなどのトランスパイラを利用して変換する必要があります。

JSFiddleでJSXを利用するには

左下の窓内のアイコンをクリックし、Languageの中から「Babel」を選択することで、JSXをReactのJavaScriptコードに自動的にトランスパイルしてくれるようになります。

コンポーネント

コンポーネントとは

UIを作るコードを独立した部品とすることができます。ES5では、React.createClass関数を利用することで、コンポーネントを生成します。

React.createClassコンポーネントを作ろう

React.createClassを使用してコンポーネントを作成します。render関数でReact要素を返すようにします。これを HelloWorldComponent変数に格納すれば、コンポーネントは完成です。

var HelloWorldComponent = React.createClass({
  render: function() {
    return <h2>Hello World From Component</h2>
  }
});

作成したコンポーネントを使うには、React.createElementの第１引数に渡すことで使用できます。

ReactDOM.render(
  React.createElement(HelloWorldComponent),
  document.getElementById('content')
);

実行例：https://jsfiddle.net/hypermkt/s5cqr5uy/

終わりに

まだまだ内容として薄いので、今後とも継続して追記していきます。