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

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

ちょっと前に、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を作成

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

次に、自分のプログラム作成

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

動的な文字の適用。「{this.state.title}」
ボタンクリックした時も関数を呼び出す。「{this.onClick}」

入力して、クリックしたされたら、this.state.titleを入力値に書き換えるので、

setValue関数を呼び出し、this.setStateのtitleの値を引数で渡された文字に変更する。

実際に実行してみる

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

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

変更されましたね!

まとめ

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

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

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

コメント