最近話題の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オブジェクトにいろいろ便利な関数があるので、そちらを利用する。

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

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

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

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

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

あなたにおすすめ

仮想環境で『Ansible』を使ってサーバ構築... 最近、サーバ構築を実施する必要がありました。 まずは仮想環境を作り、サーバ構築を……と思ったのですが、私はインフラ周りの経験が浅く、色々困ったことが頻出してしまいました。 今回の記事では、私と同じような “サーバ構築ビギナー” ...
「Puppeteer」+「LINE Notify」でサイトの更新時のみ通知を受け取ってみる... 前回の記事では閲覧数向上が期待できそうなキーワードの「Puppeteer」と「LINE Notify」のそれぞれの解説、およびサイトのサムネイルを通知してみるといった試みを実施してみました。 <bitWave関連記事『「Puppeteer...
Vue.jsで社用登録データフォームを作ってみた... 今回は社内用データ登録フォームを作ろうと思い、初めて「Vue.js」を試してみることにしました。 「Vue.js」は使い方、書き方も簡単で、初心者もすぐ活用できるjsだと思いましたので、この場を借りて共有させていただきます。 なお、...
「Puppeteer」+「LINE Notify」でサイトのサムネイルを通知してみる... 今回は記事閲覧数が期待できそうなキーワードを用いて、ブログを書いてみようかと思います。 そのキーワードとは…… 「Puppeteer」と「LINE Notify」。 「Puppeteer」って何? 「LINE Notify」って...