前回の続き。 hinathy.hatenablog.com Lesson10 - Clean URLs with Browser History これまで作ったアプリのURLは、ハッシュを使ったHackで成り立っています。これは常にうまく動作するデフォルトの挙動です。 しかし、もっと良い方法があります。 モダンな…

前回の続き。 hinathy.hatenablog.com Lesson9 - Index Links 今回は、ナビゲーションリンクにHomeリンクを追加して、どの画面からでもホーム画面に戻れるようにします。 最初に思いつく方法 単純にapp/components/app.jsxに、ホーム画面へのリンクを追加す…

前回の続き。 hinathy.hatenablog.com Lesson8 - Index Routes これまでの実装では、/にアクセスすると、単にリンク一覧とBlankページが表示されるだけでした。 今回は、Homeコンポーネントを追加して、/にアクセスしたときにHome画面を表示します。 方法１ …

前回の続き。 hinathy.hatenablog.com Lesson7 - More Nesting 今回は、前回追加したパラメータ付きリンクのクリック時の挙動を、ちょっとだけ変更します。 リンクをクリックすると、その下にリンクしたリポジトリ名を表示するようにします。 ネストを変更す…

前回の続き。 hinathy.hatenablog.com Lesson6 - Params 今回のお題は、パラメータの渡し方です。 例えば、以下のようなURLを考えてみます。 /repos/reactjs/react-router /repos/facebook/react これらのパラメータは、以下の形式にマッチします。 /repos/:…

前回の続き。 hinathy.hatenablog.com Lesson5 - Active Links 今回は、アクティブなリンクにスタイルを適用して、アクティブなリンクをわかりやすく表示してみます。 Linkにスタイルを適用する ハイパーリンクにスタイルを与えるには、Linkコンポーネントの…

前回の続き。 hinathy.hatenablog.com Lesson 4 - Nested Routes 今回は、Lesson3で追加したハイパーリンクを、全ての画面に表示します。 ReposとAboutをAppの子要素に配置する import React from 'react'; import ReactDOM from 'react-dom'; import { Rout…

前回の続き。 hinathy.hatenablog.com Lesson3 - Navigating With Link 今回は、ハイパーリンクをつけて/reposと/aboutに画面遷移できるようにします。 ハイパーリンクをつける ハイパーリングは、React Routerが提供するLinkコンポーネントを使います。 app…

前回の続き。 hinathy.hatenablog.com Lesson2 - Rendering a Route 今回は、React Routerを導入して、About画面とRepos画面を追加します。 React Routerのインストール 事前に、React Routerをインストールしておきます。 $ npm install react-router --sav…

React Routerにはチュートリアルreact-router-tutorialが用意されています。 Step by Stepで勉強して、React Routerに入門してみます。 Lesson 1 - Setting Up この章は、チュートリアルのプロジェクトをセットアップするのみ。 react-webpack-seedをもとに…

前回の続き。 hinathy.hatenablog.com お題 今回のお題は、表示するリポジトリがない場合は、Alertでメッセージを表示するようにしてみます。 まずは完成イメージ。 どう実装するか？ リポジトリ数が0か否かを知っているのはRepositoryListなので、ここで実…

seedプロジェクトを作っておくとなにかと便利。 ということで、browserify-railsとreact-railsでモダンな環境をrails上に構築してみます。 browserify-railsを採用したのは、ここの記事に影響ですね。 Railsのプロジェクトを作る $ rails new react-browseri…