React

【React】超単純なシングルページアプリ

  • このエントリーをはてなブックマークに追加

はじめに

FacebookやGMail、Twitterなど、
シングルページアプリケーション(SPA)を導入する
Webサービスが増えています。
SPAは、サーバーにリクエストを送らずに
ページをレンダリングする機能です。
これは、
Javascriptをブラウザで処理することによって実現されます。
この流れは、次世代のアプリケーションの
スタンダードになることが期待されてます。
そんな、SPAをお手軽に作成できる
フレームワークとしてReactが注目を浴びています。
今回は、ReactとSPAを理解するために、
超単純なSPAをReactで作成しました。
本記事のアプリケーションは下記の記事の続きです。
https://www.tech-tech.xyz/archives/react-hello-world.html

作成したアプリケーション

リンクをクリックすると、
ページの一部が切り替わります。

サンプルコード

前回の記事のApp.jsを下記のように書き換えました。

import React, { Component } from 'react';
function ChangeButton(props) {
  return (
    <a href={props.link} onClick={() => props.onClick()}>
      {props.value}
    </a>
  );
}
class Body extends Component {
  constructor(props) {
    super(props);
    this.state = { value: <div>main</div> };
  }
  showPage1() {
    this.setState({ value: (<div>page1</div>) });
  }
  showPage2() {
    this.setState({ value: (<div>page2</div>) });
  }
  showPage3() {
    this.setState({ value: (<div>page3</div>) });
  }
  render() {
    return (
      <div>
        <ul>
          <li>
            <ChangeButton link="#1" value="page1" onClick={() => this.showPage1()} />
          </li>
          <li>
            <ChangeButton link="#2" value="page2" onClick={() => this.showPage2()} />
          </li>
          <li>
            <ChangeButton link="#3" value="page3" onClick={() => this.showPage3()} />
          </li>
        </ul>
        {this.state.value}
      </div>
    );
  }
}
class App extends Component {
  render() {
    return (
      <div>
        <Body />
      </div>
    );
  }
}
export default App;

react-routerを利用する

さらに、ここからreact-routerを利用して
アプリケーションを書き換えてみます。
https://www.tech-tech.xyz/archives/react-router.html

  • このエントリーをはてなブックマークに追加