スキルアップ記事

レバテックキャリアではIT・Web業界のエンジニア、デザイナーのスキルアップに役立つコンテンツをお届けいたします。
転職に役立つノウハウから、日々のスキルアップや業務で使える記事等幅広く掲載していきます。

転職支援サービスをご希望の方はこちら

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

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

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

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

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

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

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

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

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

http://c16e.com/1510161700/

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

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

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

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

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

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

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

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

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

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

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

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

React関連の転職でお悩みの方、以下よりご相談ください!

■求人をお探しの方へ
JavaScriptの求人・転職情報

  • このエントリーをはてなブックマークに追加

  • STEP1
  • STEP2
  • STEP3
  • 次のstepで入力すると返事が来る!
  • プロフィール入力すると返事が来る!
  • ご希望の条件を選択してください

    ご希望の勤務形態

    必須

    ご希望の勤務地

    任意

  • プロフィールをご入力ください!必須入力項目はこのページで終わりです。

    氏名

    必須

    氏名かな

    必須

    生年月日

    必須

    電話番号

    必須

    メールアドレス

    必須

  • スキルシート・ポートフォリオをお持ちの方はアップロードしてください

    スキルシート

    任意

    提出しておくことで
    迅速なご紹介が可能に!

    職務経歴書

    ドラッグアンドドロップ or ファイルを選択 選択されていません

    履歴書

    ドラッグアンドドロップ or ファイルを選択 選択されていません

    スキルシートを確認しています...

    スキルシートを確認しています...

    ※ファイルは5MB以下で対応するファイル形式 ? でアップロードしてください
    Microsoft Office .xls .xlsx .doc .docx .ppt .pptx
    KINGSOFT Office .xls .xlsx .doc .docx .ppt
    iWork .numbers .pages .key
    LibreOffice .ods .odt .odp
    OpenOffice .ods .odt .odp
    その他 .pdf

    ※事前にご用意のない方は、弊社フォーマットを是非ご活用下さい。

    ポートフォリオURL

    任意

    ?

    ポートフォリオとは主にクリエイターの方が自己PRのために過去の作品や制作実績をまとめた作品集の事です。

    ポートフォリオをWeb上で公開されている方はそのURLを、データでお持ちの方は作品データをアップしたURLを入力してください。

    ※データをアップされる場合は、保存期間や容量制限の少ないGoogleドライブを推奨しています。

    その他ご要望

    任意

  • 下記の内容をご確認いただき問題ないようでしたら、送信してください

    プロフィール入力すると返事が来る!

    • ご希望の勤務形態 必須

    • ご希望の勤務地 任意

      第一希望:
      第二希望:

    • 氏名 必須

    • 氏名かな 必須

    • 生年月日 必須

    • 電話番号 必須

    • メールアドレス 必須

    • 職務経歴書 任意

    • 履歴書 任意

    • ポートフォリオURL 任意

    • その他ご要望 任意

    個人情報の取り扱い」と「利用規約」に同意の上、『同意して登録する』ボタンをクリックして下さい。

プライバシーマーク

レバテック株式会社は「プライバシーマーク」使用許諾事業者として認定されています。
個人情報の秘密は厳守します。ご入力いただいた情報は許可を頂くまで求人企業に公開することはありませんので、ご安心ください。

申し込みに関するご注意
以下の方は弊社の事業基盤、求人動向から、ご提案のご連絡までお時間をいただく可能性があります。ご了承ください。
IT業界、または希望職種が未経験の方
レバテックキャリア対象エリア以外での勤務地、また在宅での作業を希望される方

関連記事

人気記事

無料"個別相談会"実施中-平日の夜、土曜も実施しています!-

関西求人特集 みんなの年収UP公開中

九州求人特集 福岡での転職をサポートします!

転職・求人・採用情報を探す

プライバシーマーク

レバテック株式会社は、
「プライバシーマーク」
使用許諾事業者として
認定されています。