はじめに
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ツリーを出力する関数です。第1引数にReactのDOMエレメントを渡します。第2引数には、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
の第1引数に渡すことで使用できます。
ReactDOM.render(
React.createElement(HelloWorldComponent),
document.getElementById('content')
);
実行例:https://jsfiddle.net/hypermkt/s5cqr5uy/
終わりに
まだまだ内容として薄いので、今後とも継続して追記していきます。