React Routerの公式チュートリアルがわかりやすかったよ

f:id:syonx:20160228140548p:plain

TL;DR

これから React Router について学ぶならコレがおすすめ!

はじめに

React Routerについて解説をされている日本語記事は、この2つくらいじゃないでしょうか。

ちなみに、この記事を書いているのは 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-routerreactjs/react-router になり変わったようです。 アクセスするとリダイレクトされますね。コミュニティ側の事情までは追いかけていないのでわかりませんが、デファクトとして利用されていたものが公式採用されたということでしょう。

React Router Tutorial で学べること

この記事では、本家をなぞって詳細を説明するのはやめておきます。本家側の更新までは追いかけていられませんからね。ただしチュートリアルは英語なので、抵抗のある方向けに各章で学べることをざっくり書いておきます。特に長くもなく難しくもない、ノリのいい感じでしたので雰囲気でやってみてもできると思いますが。まぁ、ここまで踏み込んでくるようなお方には余計なお世話かもしれません。

公式のチュートリアルはこちらからどうぞ。レッスン1は 01-setting-up.md です。

webpackの土台も体験できるので、その面でもやってみる価値ありです! f:id:syonx:20160228140137p:plain

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

Lesson 4. Nested Routes

  • アプリ全体と各ページのネストの実現方法

Lesson 5. Active Links

  • Link コンポーネントのうちアクティブなもの(ネストで経由しているもの)をスタイリング

Lesson 6. URL Params

  • /repos/:userName/:repositoryName 形式の扱い方

Lesson 7. More Nesting

Lesson 8. Index Routes

Lesson 9. Index Links

  • サイトトップ / はすべてのページにおける親であるため常にアクティブ扱いになってしまうので、それを特別扱いする2つの方法
    • IndexLink Component
    • onlyActiveOnIndex Property

Lesson 10. Clean URLs with Browser History

  • デフォルトの、URLにハッシュを使った処理方式をブラウザ履歴を使ってクリーンなURLにする方法
    • サーバ側の設定を変更して実現

Lesson 11. Production-ish Server

  • React Routerの話とは直接関係がないが、developmentproduction を分けて開発する方法
  • 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) はそれなりに作りこんであるので見応えありますよ。

f:id:syonx:20160228153546p:plain

Happy routing!


全然関係ないけど昨日買ったHDMIキャプチャおすすめ (^ ^)