React Routerの公式チュートリアルがわかりやすかったよ
TL;DR
これから React Router について学ぶならコレがおすすめ!
はじめに
React Routerについて解説をされている日本語記事は、この2つくらいじゃないでしょうか。
- 2014-12-18
React.jsでserver-side renderingにも対応したRouting - Qiita - 2015-02-20
React初心者のためのreact-routerの使い方 - ハッカーを目指す白Tのブログ
ちなみに、この記事を書いているのは 2016-02-28 です。時が経つのは早いですね。 今回の本旨としては、今ちゃんと学ぶならどうすべきか検討していたら React Community 公式の react-router チュートリアルを見つけたので紹介してみよう、というものになります。初回コミットは 2016-02-10 なので、つい最近出来たみたいですね。
React Routerとは
ルーターってなんぞ?無線のアレ?と思っていたくらいには、このパッケージの役割がわかっていませんでした。確かに React を使ってコンポーネントを作ることはできるようになってきましたが、このルーターってのはどんな時に使うんだろう、学ぶ必要があるかどうかがまずわからん、そんな感想でした。なのでこれから学ぶ方にも React Router が何のために用意されているものなのかを把握してから臨むとよいと思います。
自分は React と聞くと SPA (Single Page Application) を想起しがちなのですが、ルーターを使うことで URL に応じてコンポーネントを出し分けすることができます。つまり、リンクをクリックしてURL遷移する一般的なページ遷移Webサイトと同等のことができるということですね。
それから、本パッケージの発祥 rackt/react-router
は reactjs/react-router
になり変わったようです。
アクセスするとリダイレクトされますね。コミュニティ側の事情までは追いかけていないのでわかりませんが、デファクトとして利用されていたものが公式採用されたということでしょう。
React Router Tutorial で学べること
この記事では、本家をなぞって詳細を説明するのはやめておきます。本家側の更新までは追いかけていられませんからね。ただしチュートリアルは英語なので、抵抗のある方向けに各章で学べることをざっくり書いておきます。特に長くもなく難しくもない、ノリのいい感じでしたので雰囲気でやってみてもできると思いますが。まぁ、ここまで踏み込んでくるようなお方には余計なお世話かもしれません。
公式のチュートリアルはこちらからどうぞ。レッスン1は 01-setting-up.md です。
webpackの土台も体験できるので、その面でもやってみる価値ありです!
Lesson 1. Setting up the Project
<tutorial url>
: https://github.com/reactjs/react-router-tutorial.git
- 変更を保存するとwebpack上で自動的に再コンパイルが走り、ブラウザが再描画されるのを見ることができます。
Lesson 2. Rendering a Router
- Router クラスを使ってアプリを描画する方法
- About と Repos ページを追加して、それを /about と /repos に対応付ける
Lesson 3. Navigating with Link
- よく使う
<a/>
タグのリンクを Link コンポーネントを使って最適化
Lesson 4. Nested Routes
- アプリ全体と各ページのネストの実現方法
Lesson 5. Active Links
- Link コンポーネントのうちアクティブなもの(ネストで経由しているもの)をスタイリング
Lesson 6. URL Params
/repos/:userName/:repositoryName
形式の扱い方
Lesson 7. More Nesting
- ネスト中間でのコンポーネント表示
Lesson 8. Index Routes
- サイトトップ
/
にいる時に表示する Home コンポーネントの定義方法
Lesson 9. Index Links
- サイトトップ
/
はすべてのページにおける親であるため常にアクティブ扱いになってしまうので、それを特別扱いする2つの方法IndexLink
ComponentonlyActiveOnIndex
Property
Lesson 10. Clean URLs with Browser History
- デフォルトの、URLにハッシュを使った処理方式をブラウザ履歴を使ってクリーンなURLにする方法
- サーバ側の設定を変更して実現
Lesson 11. Production-ish Server
- React Routerの話とは直接関係がないが、
development
とproduction
を分けて開発する方法 - Express を利用してコンテンツを配信するときの設定方法
Lesson 12. Navigating Programatically
- フォームを使った場合のブラウザ履歴の制御方法
Lesson 13. Server Rendering
- サーバサイドレンダリングの話。React / Webpack / Express の設定方法。これはさすがにヨクワカラナイ…
Lesson 14. What's Next?
- この先は examples を試そう、ドキュメント、ソースを読もう!
Examples
たくさん用意されている実装例も React Router で制御されています。1度 clone すれば全部見られるので、面倒臭がらずに見てみましょう。特に Huge Apps (Partial App Loading) はそれなりに作りこんであるので見応えありますよ。
Happy routing!
全然関係ないけど昨日買ったHDMIキャプチャおすすめ (^ ^)