前回の続き。 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なので、ここで実…

前回で一区切りついたGithub Repository Browser。 hinathy.hatenablog.com いろんなユーザー名を入力して遊んでいたら、ふと一文字ユーザーのリポジトリが気になったので、aさんからwさんまで試してみました。 するとaさんとwさんに空きが。 早速、憧れの一…

前回の続き。 hinathy.hatenablog.com お題 今回のお題は、react-bootstrapを導入して見た目をそれなりにしてみます。 ビフォー・アフター react-bootstrapの導入前後でどう変わったか。先に結論を。 導入前 導入後 だいぶ良くなりましたね。 react-bootstra…

前回の続き。 hinathy.hatenablog.com お題 今回のお題は、Clearボタンの実装。 Clearボタンを押すと、ユーザー名のテキストボックスと、検索済みのリポジトリ一覧をクリアします。 テキストボックスをクリアする まずは、ユーザー名のテキストボックスのval…

前回の続き。 hinathy.hatenablog.com お題 今回はちょっとしたお題。 ユーザー名が未入力でもボタンが押せちゃうのは、ユーザービリティが良くないので改善します。 具体的には、ユーザー名未入力の場合は、Updateボタンをdisableします。 以下のように、di…

GithubのRepositories APIは、指定したユーザーのリポジトリを取得することができます。 $ curl -s 'https://api.github.com/users/toshiyukihina/repos' [ { "id": 38911425, "name": ".emacs.d", "full_name": "toshiyukihina/.emacs.d", "owner": { "logi…

Material UIを色々試してみます。 react-browserify-rails-seedからSeedプロジェクトをダウンロードして色々試します。 前準備 ダウンロードしたSeedを展開します。 2016/04/21現在、material-uiが依存するreactのバージョンは、14でなければならないみたい…

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

はじめに Webアプリの開発で、運用データを開発環境にインポートすることってよくあることだと思います。 この記事は、そのときに遭遇したトラブルと、その解決方法です。 環境は OS X El Capitan(10.11.4) ですが、Linuxとかでも解決方法は同じだと思われま…

きっかけ 今年も既に2月終盤。仕事に追われてなんか勉強できていないなぁ。 電車の中で、ぼんやりそんなことを考えていて、なんかWebサービスでもつくってみようかなぁと。 あと、ここ数年、Railsを仕事で使っているので、腕試ししたいですしね。 どんなサー…

はじめに グローバルな場所には、必要最小限のgemをインストールして、Railsプロジェクトを新しく作成する手順。 いつも忘れるのでメモ。 事前準備 rubyのバージョンは、rbenvで管理するので、予めインストールしておきます。 rbenvは、READMEを参考にインス…