最近話題のReact.js使ってみた

最近話題のReact.js使ってみた

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

ちょっと前に、React.jsが話題になって、最近また話題が上がったので使ってみようと思って、簡単なプログラムを作って触ってみました。

React.jsとは

そもそもReact.jsとはなんぞやというかたにざっくり説明しますと。

シンプルにMVCモデルのviewに対してシンプルにComponentを作成できるライブラリになります。
詳しくは、以下サイトに詳しく記載されていますので、そちらを参照ください。
React.jsはFacebook製のJavaScriptライブラリ

React.jsの特徴

  1. JUST THE UI
  2. VIRTUAL DOM
  3. DATA FLOW

公式サイトでは、上記の様に記載があります。

要するに、
・ UIの構成要素を作成していくライブラリなので、プログラマではなく、
  デザイナーが使い方がわかりやすい仕様になっている。

・ MVCモデルで言うviewの部分で、動的な表示を行っている場合、
  に事前に変更後と変更前の情報を持ち合わせた状態で、
  ユーザーが変更をかけた時に、それらを表示する。

・ Ajax等サーバーサイドへのリクエストが減らせる。

という風に私はざっくり理解しました。

実際に書いてみた

なんとなくわかったところで、入力したデータを表示する簡単なプログラムを作成してみました。

テンプレートの作成をします。

index.htmlを作成
[html]









[/html]

この時、react.jsを読み込ませておくこと!
今回はライブラリダウンロードではなく、直接読み込ませています。

[html]
//react.js 元
// JSX処理プログラム
 // 自分のプログラム読み込み

[/html]

次に、自分のプログラム作成
[javascript] var Comment = React.createClass({
setValue: function (name) {
this.setState({
title: name
});
},
getInitialState: function () {
return {
title: ‘React.jsのテスト’
}
},
onClick : function(e) {
var value = document.getElementById(“nyuryoku”).value;
if(!value){return false;}
this.setValue(value);
},
render: function () {
return (

{this.state.title}


);
}
});
[/javascript]

getInitialStateで、初回表示時の文言を設定しておきます。
renderで、表示状態を管理(表示)させるので、Dom Tree構造を作成し、プログラム部分は、{}付きで処理させます。

動的な文字の適用。「{this.state.title}」
ボタンクリックした時も関数を呼び出す。「{this.onClick}」
[javascript] render: function () {
return (

{this.state.title}


);
}
[/javascript] 入力して、クリックしたされたら、this.state.titleを入力値に書き換えるので、

[javascript] setValue: function (name) {
this.setState({
title: name
});
},
【~~ 中略 ~~】
onClick : function(e) {
var value = document.getElementById(“nyuryoku”).value;
if(!value){return false;}
this.setValue(value);
},
【~~ 以下略 ~~】
[/javascript] setValue関数を呼び出し、this.setStateのtitleの値を引数で渡された文字に変更する。

実際に実行してみる

最初の表示、設定している”Reacr.jsのテスト”が表示されてます。

値を入力して、[ h1変更 ]ボタンを押します。

変更されましたね!

まとめ

まだいろんなことできると思いますが、今日はちょっと触ってみた感じなのでここまで。
実際、重要だなと思ったことは、

・値等の初期値を変更するとき、this.setStateの中に変更する為のプロパティが存在するようなので、そこを参照させるようにしなければ行けなかった。
・DOM treeの変更箇所をレンダリングする関数renderはReactオブジェクトが持っているので、それで、DOM Tree構造を管理させるようにする。
・後は、Reactオブジェクトにいろいろ便利な関数があるので、そちらを利用する。

今回は、こんな知識で自分なりに初歩的なことをやってみました。
今度は応用できるようなことをやって、便利ツールでも作ってみようと思います。

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

【週刊bitWave】(メルマガ)始めました!

登録はこちらからメールアドレスを入力してお申込みください。

ご登録いただいたメールアドレスは 【週刊bitWave】の更新情報の配信にのみ使用します。

個人情報の取扱いに関しては、「プライバシーポリシー」をご確認ください。解除はいつでもこちらから行うことが可能です。

あなたにおすすめ