プログラミング

Redux + React Router を使ったサンプルページを作りました

投稿日:2017年7月20日 更新日:

Redux + React Router を使ったサンプルページを作りました。

1. スクリーンショット

スクリーンショット

2. デモページ

以下のURLで実際のページを見ることができます。

3. 動作

用意されたページのリンクをクリックすると、画面が切り替わります。

メモ

  • ウェブブラウザの「戻る」「進む」が使えます。
  • 最初のページ以外のURLはダミーなので、ウェブブラウザでそちらのURLを直接指定してもアクセスできません。

4. メモ

  • 各モジュールのバージョンが重要です。今回は以下のバージョンを使いました。
    • react-redux は v5系
    • react-router は v3系
    • react-router-redux は v4系

5. ソースコード

6. 参考情報

📂-プログラミング

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Web Components

Web Components: 組み込み要素を拡張する方法

目次1. はじめに2. 組み込みHTML要素を拡張する方法3. おわりに4. 参考 1. はじめに Web Components では、HTMLElement を継承してカスタムクラスを定義することも …

JavaScript

JavaScriptで画面上の文字列をクリップボードにコピーする方法

目次1. はじめに2. Clipboard API and events を使う方法3. Selection API を使う方法(1) 基礎知識(2) プログラムの書き方(3) サンプルページ4. お …

Milkcocoa のチュートリアルを試す

Milkcocoa のチュートリアルをやってみました。 目次Milkcocoa とは?チュートリアル1. アカウント登録する2. ログインする3. アプリを作成する4. スマートフォン側のWebページ …

web development

Web Development for Beginners を読む:レッスン11

目次1. はじめに2. Lesson 11: Creating a game using eventsEvent driven programmingCommon eventsCreating the …

no image

プログラミングのコツ

随時、追加していきます。 目次 1. 関連する技術の仕様書や公式ドキュメントを読み込む 2. 機能のかたまり毎に、クラスやメソッドを分割する 3. ツールやアプリケーションはなるべくメイン機能だけを利 …