React.js、Fluxを学びたい方向け今からでも読んでおきたいReact.js入門資料12選

最終更新日:2020年11月11日

レバテックキャリアは
ITエンジニア・Webクリエイター専門の転職エージェントです

Facebookが提供しているJavaScriptライブラリ・React.jsは「Yahoo!」「Airbnb」「Reddit」「Netflix」などで採用されています。
日本でも注目され始めているので、React.jsを使ってみたい方は多いのではないでしょうか。

これからReact.jsを学ぶ方の参考になるReact.jsの入門資料(サイト・記事・スライド)を12個ご紹介します。
他のJavaScriptフレームワークからReact.jsに乗り換えようか迷っている方の参考になる資料も紹介しています。

React.jsの学習の参考になるサイト・記事

今話題のReact.jsはどのようなWebアプリケーションに適しているか? Introduction To React─ Frontrend Conference / HTML5 Expert.jp

Webサイト「HTML5 Experts.jp」。今話題のReact.jsはどのようなWebアプリケーションに適しているか? Introduction To React─ Frontrend Conferenceの画像

https://html5experts.jp/hokaccha/13301/

フロントエンドにフォーカスしたカンファレンス「Frontrend Conference」で講演された「Introduction to React」の内容を紹介した記事です。

React.jsやFluxの思想・特徴を解説しています。
他のライブラリやフレームワークの問題点をふまえたReact.jsの特徴の解説、3つのケースを元にしたReact.jsの速度の計測、Fluxの解説などをまとめてあります。
これからReact.jsを始めようと思っている方は、本記事を読んでReact.jsの特徴を学んでおきましょう。

【AngularJS vs React.js】どっちがどう使える?JavaScriptフレームワークの最新事情 #html5j

https://codeiq.jp/magazine/2015/05/24294/
CodeIQ MAGAZINE
六本木ヒルズにて開催された「第56回HTML5とか勉強会」にて行われた、AngularJSとReact.jsの2つのJavaScriptフレームワークのセッションとパネルディスカッションを紹介している記事です。
それぞれのフレームワークの特徴や違いがわかります。

チュートリアル | React

Webサイト「React」。チュートリアルの画像

https://facebook.github.io/react/docs/tutorial-ja-JP.html

こちらは本家サイトに掲載されている日本語で解説しているチュートリアルです。
コメントボックスを作りながらReact.jpの実装の仕方を学びます。
目的が持ってコードを書いた方が身につくので、本記事を参考にしながらコメントボックスを作ってReact.jpの書き方を覚えていきましょう。

チュートリアル | React 0.13 日本語リファレンス /  js STUDIO

Webサイト「js STUDIO」の画像。

http://js.studio-kingdom.com/react/

React.jsの本家サイトの内容を日本語訳しているサイトです。
英語が得意でなく、日本語で学びたい方はこちらのサイトを参考にしてください。

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

「株式会社クラフトマンソフトウェア」のWebサイト。30分間React入門「いいねボタン」作成チュートリアルの画像

http://c16e.com/1510161700/

React.jsでFacebookの「いいね!ボタン」のようなコンポーネントを実装する方法を解説している記事です。
実際にReact.jsを使って何か作ってみたい方は、提供元であるFacbookの「いいね!ボタン」を作ってみるのも面白いのではないでしょうか。

ReactとFluxとReduxについて順を追って整理する / moxt

ブログ「moxt」。ReactとFluxとReduxについて順を追って整理するの画像

https://hogehuga.com/post-1095/

FluxはReact.jsの提供元であるFacebookが提唱しているアプリケーションアーキテクチャで、ReduxはFluxのライブラリです。
本記事はReact.jp、Flux、Reduxの順番に解説していて、読むとなぜReact.jpにはFluxが必要なのかがわかります。

Reactの単純なサンプルでFluxの実装を解説 / mae's blog

ブログ「mae's blog」。Reactの単純なサンプルでFluxの実装を解説の画像

http://mae.chab.in/archives/2747

React.jsの簡単なサンプルを使ってFluxを実装する方法を解説している記事です。
Fluxの理解を深めたい方は参考にしてください。

React.jpの学習の参考になるスライド

10分で実装するFlux

Webサイト「GitHub」。10分で実装するFluxの画像

http://azu.github.io/slide/react-meetup/flux.html

クリックするとカウントが増える簡単なアプリを作りながら、Fluxの実装の仕方を覚えるスライドです。
React.jpと関わりが深いFluxを学びたい方は、参考にしながらアプリを作ってみてください。

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


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

React.js初心者向けの入門スライドです。
簡単なコンポーネントの作り方、簡単なアプリ( 「add」を押すと入力したコメントがリストに追加されるアプリ)の作り方の解説、React.jsを書くときに便利なツールを紹介しています。

ReactとLoopbackことはじめ / React.js meets Loopback


Node.jsのWeb API フレームワーク・LoopbackとReact.jsを連携する方法を解説しているスライドです
サクッと作りたい方向けに、React-Loopbackというライブラリを紹介しています。

React.js + Flux


ビジネスSNSの「Wantedly」では、React.jsとFluxのフレームワークReduxを導入したそうです。
具体的な実装方法を解説しているわけではないですが、React.jsの導入を検討する際の参考になります。

Flux react現状確認会


Flux react現状確認会 from VOYAGE GROUP

Vue.jsを断念し、FluxとReact.jsに乗り換えた方が作成したスライドです。
なぜVue.jsを断念したのか、Fluxのメリット、React.jsのメリット・デメリットは何か、について詳しく紹介しています。
他のJavaScriptライブラリからReact.jsに乗り換えようか迷っている方はぜひご覧ください。

まとめ

React.js初心者向けの資料を中心に紹介しましたので、これからReact.jsを学ぼうと思っている方はぜひ参考にしていただければと思います。
FluxはReact.jsと関わりが深いので、React.jsを学ぶならFluxの入門資料も一緒に読むことをおすすめします。

ITエンジニア・Webクリエイターの転職ならレバテックキャリア

レバテックキャリアはIT・Web業界のエンジニア・クリエイターを専門とする転職エージェントです。最新の技術情報や業界動向に精通したキャリアアドバイザーが、年収・技術志向・今後のキャリアパス・ワークライフバランスなど、一人ひとりの希望に寄り添いながら転職活動をサポートします。一般公開されていない大手企業や優良企業の非公開求人も多数保有していますので、まずは一度カウンセリングにお越しください。

転職支援サービスに申し込む

また、「初めての転職で、何から始めていいかわからない」「まだ転職するかどうか迷っている」など、転職活動に何らかの不安を抱えている方には、無料の個別相談会も実施しています。キャリアアドバイザーが一対一で、これからのあなたのキャリアを一緒に考えます。お気軽にご相談ください。

「個別相談会」に申し込む

プロのアドバイザーがあなたのお悩みや疑問にお答えします

- 転職個別相談会開催中 -

相談内容を選択してください

※転職活動や求人への応募を強制することはありません

人気の求人特集

内定率が高い

関連する記事

人気の記事

スキルアップ記事トップへ

JavaScriptの求人・転職一覧