React

React – A JavaScript library for building user interfaces

React.jsとは

まずはReact.jsってなんなのっていう方は下記の記事をみてもらうといいです。
ちなみに、個人的にはjQueryは使わなくなった訳ではないです。もちろんReact.jsを使っているサービスではjQueryを使うことはないですが、コーポレートサイトなどでReactを使う必要性もないのでjQueryを使っています。住み分けができている分jQueryだけできるよりもReact.jsもできた方が仕事の幅は広がりますね。

• Reactを使うとなぜjQueryが要らなくなるのか – Qiita
• 出来る限り短く説明するReact.js入門 – Qiita
• これからReactを勉強する人が最初に見るべきスライド７選 | UX MILK
• Reactを毛嫌いしてるが実は好きになりたい人へ | ITANDI Blog
• これからReactを学ぼうとしてる人へ / fujimisakari blog
• Reactチュートリアル: Intro To React【日本語翻訳】 | maesblog
• 新人プログラマーが「React」を使ってリアルタイムコメント機能を作ってみた（前編） | 東北ギーク
• Reactチュートリアルをcreate-react-appの形式に合わせて焼きなおす – Qiita

Redux

reactjs/redux: Predictable state container for JavaScript apps

ReactはViewを担当するフレームワークです。SPAサービスなどを作っているとどうしてもしんどくなってくるのが、stateの管理です。Reduxを使うことでstateの一元化、更新管理がわかりやすくなります。なので、以下の記事等で概要を把握した後に実際に使ってみてstateがどのように流れているか把握するのがいいでしょう。

実際にサービスを作る時には導入することをオススメします。

• Redux の基本 — Mobage Developers Blog
• Reduxのパターンとアンチパターン | プログラミング | POSTD
• 【Redux入門】 React + Redux の考え方を理解する – おかかウェブ
• React+Reduxの最もシンプルな構成 – 30歳からのプログラミング
• React + Redux入門① – Reduxの概念を理解 – Push: Ctrl+Y
• React + Reduxでカウンターアプリの作成 (react-redux使う編) – funxion

環境構築

Reactを使うってなると絶対に通らなければいけないのが環境構築です。新規サービスを作るってなると以外にここが手間だったりします。しかも、これからReactやりたいって方には結構とっつきにくいんですよねー。BabelでトランスパイルしてWebPackでバンドルしてwebpack-dev-serverでとか。さらにBabelのプラグイン使ってってなるとかなりしんどくなってきます。なので手っ取り早くやるなら
facebookincubator/create-react-app: Create React apps with no build configuration.がいいかなと思います。

ただ、実際にサービス作るなら必要な知識なので以下の記事でまずは概要から把握していくといいと思います。

• webpack で始めるイマドキのフロントエンド開発 – Qiita
• webpack 入門 – Qiita
• Webpackってどんなもの？ – Qiita
• webpack.config.jsの読み方、書き方 – dackdive’s blog
• Webpack + React + ES6の最小構成を考えてみる。 – TOEIC940点の文系プログラマー
• React x Webpackプロジェクトの雛形を作る
• babelとwebpackを使ってES6でreactを動かすまでのチュートリアル – Qiita

React-Router

React Router: Declarative Routing for React.js

Reactでページ遷移させるなら必須です。SPAによくあるブラウザバックの時にはページトップへスクロールさせないなどもわずかなコードでできます。基本的には上記の公式サイトを見れば大体のことはできます。以下の記事は補足的に見るといいと思います。

• React Routerでルーティングをやってみる – Snaplog
• react-router@v4 を調査した – あいつの日誌β
• 大幅変更されそうな react-router @ next (v4) 覗き見メモ – Qiita

Redux-Form

Redux Form – Redux Form

Reduxを使っているならForm周りはRedux-Formがオススメです。理由としては、活発に開発が行われていますし、慣れてくると使いやすいです。当ブログでも過去に紹介しているのでぜひご覧になってください。

• redux-form 慣れてきた – present
• React + ReduxのプロジェクトでRedux Formを使ったので使い方のまとめと注意点 | ichimaruni-design

Immutable.js

Immutable.js

こちらもReact, Reduxでサービスを実際に開発していると起きるのがReducer周りの肥大化です。僕も一年前に作ったサービスで経験しました。んで、このImmutable.jsを使うことでReducerでModel的な役割をすることができます。

• React使い必見！ Immutable.jsでReactはもっと良くなる | Wantedly Engineer Blog
• Immutable.jsでreact+redux環境が楽になりそうな話 | Gaku’sMemo
• immutableのメリットとImmutable.jsでのModel定義 – コネヒト開発者ブログ
• immutable.js を使ってみる | スマホ神 – JavaScript 受託開発 –
• ReactとImmutable.jsで関数型を体験してわかったこと・活用するメリットとは？ – linotice＊ | Yahoo! JAPAN RECRUITMENT
• React + ReduxのプロジェクトにAtomic DesignとImmutable.jsを使ったらいい感じになった話 | ichimaruni-design

CSSについて

普通にCSSファイルを作ってJSX内で要素にCSSクラスなりを割り当てることもできるけど、
CSSクラスをローカルにするためにCSS in JSとCSS Modulesがよく使われる手法です。

Styleとなるオブジェクトを直接JSで記述する CSS in JSと.cssを.jsから利用する CSS Modulesどっちを使うかは好みかもしれないです。
個人的にはCSS Modulesの方が使いやすいかなと思います。というか併用もできます。

• 社内でCSSの新しい方針について話したメモ – Qiita
• Free-Style のススメ ~ CSS Modules は解決策ではない – Qiita
• webpack で CSS Modules | スマホ神 – JavaScript 受託開発 –
• Reactを使ったモジュラーCSS : CSS-in-JSとCSS Module | プログラミング | POSTD
• How to style React components

オススメの本