Reactの学習方法

それでは、Reactを基本的なことから学んでいくにはどのようにすればいいのでしょうか。
ここでは、オススメのホームページやスライドをピックアップしてご紹介していきます。

1. 公式サイト

1_official.jpeg
https://facebook.github.io/react/

最新の情報が揃っているのは公式サイトです。
基本的なコードで実装できるチュートリアルなどが分かりやすくまとめられており、最新情報をブログで確認することもできます。

2. React チュートリアル 日本語版

2_tutorialjp.jpeg
http://mae.chab.in/archives/2943

Reactのチュートリアルの日本語翻訳を掲載しています。
日本語だけではなく翻訳元の英語も掲載しているので、Reactだけでなく英語の勉強にもなります。

3. 30分間React入門「いいねボタン」作成チュートリアル

3_iine.jpg
http://c16e.com/1510161700/

Reactを使ってFacebookの「いいねボタン」を実装するためのチュートリアルを紹介しています。
カーソルが乗ったときに色が変わったり、ボタンをクリックしていいねの数を増やしたり減らしたりする細かなギミックも学ぶことができます。

4. Reactってなんだ？

4_whatisreact.jpeg
http://www.slideshare.net/katty0324/sirok-1-react

株式会社シロクの勉強会で紹介されたReactの紹介スライドです。
「Virtual DOMって結局何？」「JSXのコンパイル？」といった用語も、図解でわかりやすく解説してくれています。

5. 出来る限り短く説明するReact.js入門

5_shortreact.jpeg
http://qiita.com/rgbkids/items/8ec309d1bf5e203d2b19

各項目をできるだけ3行で説明するように心がけている、初心者向けのReactの解説記事です。
各分野がシンプルにまとめられているだけでなく、必要部分にはサンプルコードも掲載されています。

6. いま最も注目のライブラリ「React.js」でシングルページアプリケーションを作ってみよう！

6_codezine.jpeg
https://codezine.jp/article/detail/8491

Reactを使ってToDoアプリを作るチュートリアルです。
最終的にはタブを使って「未完了」「完了」を切り替えるような一歩進んだ実装を行っていきます。

7. Elemental UI

7_elementalui.jpeg
http://elemental-ui.com

ReactベースのUIフレームワークです。
ベースはReactですが、実装はHTMLタグのようにコーディングしているので、Reactの知識は必要ありません。
React風のUIを作りたいときに役に経ちます。