これからReactを勉強する人が最初に見るべきスライド７選

React.js（以下、React）は、Facebookが作ったJavaScriptのビュー・ライブラリです。最近よく耳にするけどあまり理解していないという人も多いのではないでしょうか。

そこで今回は、

「Reactって最近よく聞くけど一体何？」
「jQueryと何が違うの？」

といった疑問にこたえてくれる初心者向けのスライドを厳選して紹介します。JavaScriptは苦手だけど概念だけは理解したいといった人のために、なるべくわかりやすいものを選んでいます。

＊もし、「このスライドもおすすめ」というものがあったら教えてください。

Reactとは？

なぜ人は必死でjQueryを捨てようとしているのか

なぜjQueryを捨て、Reactを採用しようとするのかについて説明してくれるスライドです。ページ遷移のないシングルページアプリケーション（SPA）への需要が増えてきているといった最近のトレンドと合わせて「jQueryで良くない？」という疑問に応えてくれています。

までDOM 操作で消耗してるの？

Flashから始まり、Ajax、jQueryと時代はながれReactが登場するまでのここ10年近くのクライアントサイドの歴史を新卒エンジニア向けに面白おかしく説明してくれています。

フロントエンド初学者がSPAに手を出してみた

そもそも、シングルページアプリケーション（SPA）とは何？という人におすすめなのがこのスライドです。SPAはどのようなメリットがあるのか、どういった仕組みなのかについて簡単に解説してくれています。

コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス

Reactのベースとなる考え方のコンポーネント指向について詳しく説明するスライドです。内容はやや難しいかもしれません。

Reactの実践・導入事例

今からでも遅くない! React事始め

仮想DOM、コンポーネント、JSXといったReactの基本を丁寧に説明してくれています。コメント欄の実装サンプルをコードを交えながらの解説しているので、実際にReactを試してみたい人におすすめです。

Reactってなんだ？

Reactの仮想DOM、JSXなどの基本についてコードを交えながら説明してくれるスライドです。

React を導入したフロントエンド開発

Angular.jsとの比較をしながら、GMOスマートリザーブの管理画面でReactを導入した事例を解説するスライドです。

まとめ

今回は、Reactの基礎と導入に絞って、スライドを紹介しました。Reactについて詳しくは、FacebookによるReactの公式ドキュメントとチュートリアルを参照してみてください。

また、実際に導入する場合は、Flux/Reduxなどと組み合わせることが多いと思われますので、別途調べてみてください。