プログラミング

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

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

関連記事

QRコードの画像ファイルから内容を読み取るWebページを作りました

目次1. はじめに2. スクリーンショット3. URL4. 操作と内容5. ソースコード6. 参考情報 1. はじめに QRコードの画像ファイルから内容を読み取る を作りました。 2. スクリーンショ …

React Redux

React + Redux を1つのJavaScriptファイル内で使うサンプル

目次1. はじめに2. デモページ3. 画面4. JavaScript のコード(全文)5. 解説1. Action (Action Creator)adddionActionclearAdditio …

web development

Web Development for Beginners を読む:レッスン4と5

目次1. はじめに2. Lesson 4: JavaScript Basics: Data TypesVariables(変数)Constants(定数)Data Types3. Lesson 5: …

JavaScript

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

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

JavaScript でスロットマシーンを作ってみました(Canvas版)

JavaScript でスロットマシーンを作ってみました。 前回 とは違い、今回は Canvas を使っています。 目次1. スクリーンショット2. デモページ3. 内容4. ソースコード5. 参考情 …