↓もし、良かったらSNSでの紹介よろしくお願いします。

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

bootstrap

はじめに

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