プロが選ぶ！Reactオススメ教材9選！！ 2021 3/17 IT プログラミング学習 2021年3月17日2022年1月7日 URLをコピーしました！ フリーランスエンジニアの雄貴です！ 今回は現場レベルのReactスキルを身につけることができるオススメの教材を9つ紹介いたします！ Youtubeではエンジニアの単価が上がる情報発信しています！ 毎週木曜日の21時から、ライブ配信やってますので、気軽にお越しください😁 </noscript><iframe width="560" height="315" data-src="https://www.youtube.com/embed/mG1EKhbU3LM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" class="lazyload" > 目次Reactを学ぶ前に JavaScriptの基礎がわかっていないと、Reactを勉強しても100%挫折します！ 完璧にする必要はありませんが、「こんなのあったなぁ」くらいの認識は必要です。 JavaScriptの基礎固めの方法はこちらにまとめていますので、まずはこちらから着手してみてください！ あわせて読みたい プロになるためのJavaScript勉強法！！ フリーランスエンジニアの雄貴です！ 近年のWebサービスではSPAと呼ばれる構成でUIをより良くしているものが増えており、それを実現するReactやVue.jsなどのJavaScript... また「Reactってこういうものなんだよ！」っていうイメージを学ぶ前に持っておいた方がいいので、そちらも記事にまとめています。 Reactも機能がたくさんあるので、「優先的に学ぶもの」と「時間がある時にキャッチアップすべきもの」を区別しなければ、効率的に学習することができません。 少しはイメージを掴むことができるかと思います。 あわせて読みたい プロになるためのReact勉強法！！〜入門編〜 フリーランスエンジニアの雄貴です！ JavaScriptフレームワークのなかで圧倒的にシェア率の高いReact! しかし挫折率の高いフレームワークですので、現役フロントエンド... オススメ教材9選！！ それでは早速、オススメ教材を紹介していきます！ 「初級編」、「中級編」、「上級編」と3段階で紹介しますので、ご自身のレベルにあったところから始めてみてください！ 初級編 初級編ではこれからReactの勉強をはじめる方にとって分かりやすい教材を選定しています。 初級編でReactに慣れてみてください。 【Udemy】| モダンJavaSciptの基礎から始める挫折しないためのReact入門 Udemy 【最新ver対応済】モダンJavaScriptの基礎から始める挫折しないためのReact入門 【フルリニューアルしました！】Reactの習得に苦戦する理由は「JavaScript」への理解不足です。このコースではスムーズにReact開発のスタート地点に立てるように、モダンJa... はじめてReactに触れるならこの教材から始めることをオススメします。 カリキュラムとして、JavaScriptの復習を実施してからReactの学習へと進むようになっています。 またフロントエンドの環境構築に必要な、npmやyarnなどのパッケージ管理ツール、webpackやbabelなどのモジュールバンドラーやトランスパイラなども説明されているので、モダンフロントの基礎的な部分はイメージできると思います。 【Udemy】| Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版 Udemy Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版 「React何となく分かったけど次どうしたら良いか分からない」という人がステップアップするために知っておくべきことを順序立ててハンズオン形式で詰め込みました。本コー... 基礎から実践向きのスキルを習得するのに、最適な教材です。 CSS in JSやReactRouterなどを学ぶための基礎的な教材はあまり出回っていないので、とても貴重です。 またReactだけでなくコンポーネント設計の思想であるAtomic Designや状態管理の手法も説明されているので、現場に出向く前に抑えておきたい事項ばかりです。 【Udemy】|【はむ式】React Hooks 入門 – HooksとReduxを組み合わせて最新のフロントエンド状態管理手法を習得 Udemy React Hooks 入門 - HooksとReduxを組み合わせて最新のフロントエンド状態管理手法を習得 Vue.js Firebase Docker Gatsby などを抑え、なんと受講生の37.2%が次に学びたいと注目度の高い React Hooks 。複雑な状態管理をシンプルに且つ美しく実装するためのフロン... UdemyのReactといえば有名な「はむさん」の教材です。 こちらではReduxとReactHooksを併用した手法を基礎的な部分から説明しています。 現場に出ると分かるのですが、結構ReduxとReactHooksを併用している案件は多いんですよね。。 またReduxについては慣れが必要な部分もあるので、この教材で抑えておくのが良いと思います。 【Udemy】|【はむ式】ハンズオンで学ぶTypeScript – JavaScript エンジニアのためのTypeScript徹底入門 Udemy JavaScriptエンジニアのためのハンズオンで学ぶTypeScript徹底入門 2024年最新版 受講生の約6割が次に学びたいと高注目のTypeScript。Goに並ぶ人気、フロントエンド開発やバックエンド開発、そしてインフラ構築の全てで活用されるTypeScriptの費用対効果... こちらはTypeScriptを基礎から学べる教材です。 今やReactを使っている現場のほとんどはTypeScriptで記述されています。 というより、「TypeScriptを入れるからReactを使っている」と言った方が正しいですね。 こちらの教材ではJavaScriptの基礎に自信がない方でもでも、その辺りを説明しながらTypeScriptを教えているので、非常にわかりやすいです。 また最後にTypeScriptでReactを記述する方法も教えています。 なぜTypeScriptが必要なのか？はこちらの記事にまとめていますので、ぜひご覧ください。 あわせて読みたい プロになるためのReact勉強法！！〜TypeScript編〜 フリーランスエンジニアの雄貴です！ 前回React入門編として記事をまとめました！状態管理がReactの基礎でしたね！ 今回はTypeScriptについてお話ししようと思います！ ... 中級編 中級編では実践的なスキルを身につけていける教材を選定しています。 現場でよく使う機能の実装方法や、有能なライブラリの紹介など、仕事で使う上でとても役に立つ教材を選定しました。 【Techpit】| React/ReduxでGoogleカレンダー風カレンダーアプリケーションを作ろう Techpit（テックピット） カレンダーアプリケーションを開発しながら学ぶ！React / Redux | Techpit React/Redux を使い実践的な開発・設計スキルを身に着ける。さらに、Reduxによる状態管理、実践的なAPIサーバーとの非同期通信、複雑なロジックを含むアプリケーションの... この教材ではReduxを用いてカレンダーアプリを開発していくカリキュラムになっています。 Reduxは癖が強いので座学で勉強するだけではなく、多くアウトプットしていく必要があります。 こちらの教材で作成したコードを参考に、Reduxを組み込んだ簡単なアプリを開発していくと効率良くReduxをキャッチアップしていくことができます。 またカレンダーのUI実装も割と現場であったりするので、この機会にやり方を学ぶのもオススメです。 【Techpit】|【React/Redux/TypeScript】実践的なフォームの扱いを完全に理解しよう！ Techpit（テックピット） 【React/Redux/TypeScript】実践的なフォームの扱いを完全に理解しよう！ | Techpit React/Redux/TypeScriptで実践的でかつUXの高いフォームを作成！基本的なフォーム（文字列・日付・ラジオ・セレクト）の扱いから、住所フォーム（郵便番号による自動補完）... 入力フォームやセレクトボックス、ラジオボタンなど、Webシステムを開発する上で絶対に開発することになる機能の構築方法を学べます。 またTypeScriptを用いた有効な型定義の方法なども学べて、かなりの実践スキルが身に付きます。 フォームの開発はモダンフロントの仕事では避けては通れないのですが、割と難しいんですよね。。 この機会にキャッチアップしていきましょう！ 【書籍】| フロントエンド開発入門 </noscript><iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" data-src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=read007hhd-22&language=ja_JP&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=B08SQQWPDW&linkId=f78f4fe77a25a0cef9c01d93ca6d7140" class="lazyload" > こちらはReact専門の書籍ではなく、モダンフロントで扱うスキル全般を「なぜそれが必要なのか？」という背景にフォーカスして説明しています。 これまでに紹介してきた教材をこなしているならば、こちらの教材の内容も理解しやすくなっていると思います。 モダンフロントはTypeScriptやReact, Vue.jsだけでなく、node.js, yarn, babel, webpack, storybook, jestなど必要なスキルは多くあります。 こちらの書籍で全体像とそれぞれを用いる意味を理解していきましょう！ 【書籍】| りあクト！ あわせて読みたい くるみ割り書房 ft. React - BOOTH 「仕事で使える React 本」といえばコレ❗ 超・実践的な React が学べると評判の『りあクト！』シリーズ。 技術同人誌として異例の累計 2.5 万部を突破、現在 BOOTH 技術書... モダンなReactを基礎から実践的な使い方まで説明している書籍です。 この一冊をやり込めば、Reactの基礎は完璧だと言えます。 これまでやってきた内容の総復習と、他の教材でキャッチできなかった実践的な部分をキャッチアップできるので、ぜひ購入することをオススメします。 最新版はこちらの3.1版で、全３部構成になっています。 あわせて読みたい りあクト！ TypeScriptで始めるつらくないReact開発 第4版【① 言語・環境編】 - くるみ割り書房 ft. React ... 💡 3.1版から 4版への変更点については以下の記事をご参照ください https://klemiwary.com/blog/riakuto-4ed-release ―――― シリーズ累計 2.5 万部を突破、BOOTH 技術書カテ... あわせて読みたい りあクト！ TypeScriptで始めるつらくないReact開発 第4版【② React基礎編】 - くるみ割り書房 ft. React -... 💡 3.1版から 4版への変更点については以下の記事をご参照ください https://klemiwary.com/blog/riakuto-4ed-release ―――― シリーズ累計 2.5 万部を突破、BOOTH 技術書カテ... あわせて読みたい りあクト！ TypeScriptで始めるつらくないReact開発 第4版【③ React応用編】 - くるみ割り書房 ft. React -... 💡 3.1版から 4版への変更点については以下の記事をご参照ください https://klemiwary.com/blog/riakuto-4ed-release ―――― シリーズ累計 2.5 万部を突破、BOOTH 技術書カテ... 上級編 上級編では教材ではなく、実際に最先端の企業が開発しているシステムのコードを見て学んでいきます。 企業もあまり公開しておらず、私の観測範囲では1点のみでしたが、実務で運用しているコードなのでここから全てを学ぶことができます。 【Github】| SmartHR UI GitHub GitHub - kufu/smarthr-ui: React components for creating SmartHR applications. React components for creating SmartHR applications. - kufu/smarthr-ui SmartHR社が公開しているUIライブラリのコードです。 コンポーネントの構築のみならず、カスタムフックの構築、型定義ファイルの構成など、現場で使っている構成を全て学ぶことができます。 もちろん全ての現場で使われている構成ではありませんが、実運用されているシステムのコードを閲覧できるのはとても貴重です。 現場でReactに慣れてきた後にこちらで学習してみることをオススメします。 最後に 以上、Reactオススメ教材9選を紹介しました！ 初級編、中級編、上級編と難易度別に分けて紹介いたしました。 インプットだけでなくアウトプットしながら効率良く学べる教材を選定しているので、ぜひ学習してみてください！ Youtubeではエンジニアの単価が上がる情報発信しています！ 毎週木曜日の21時から、ライブ配信やってますので、気軽にお越しください😁 </noscript><iframe width="560" height="315" data-src="https://www.youtube.com/embed/mG1EKhbU3LM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" class="lazyload" > ーーーーーーーーーーーーーーーーーーーー 僕は月商にして120万円を稼いでいますが、 エンジニアで月100万以上稼いでいるというと、 怪しいですよね。 お前は元々仕事できた、才能やセンスがあったんだろ？ともよく言われます。 ですが僕は最初からプログラミングが得意だったわけでもなければ、 仕事が得意だったわけでも 交渉や戦略も得意だったわけではありません。 そんな僕でも自信を得ることができて エンジニアとして月100万以上頂ける程 実力をつけることができました。 経済的にも精神的にも豊かになってます。 結局正しい方向で努力するだけなんですよね。 誰だって稼げますし。 正しい方向で学べば誰でも自信を持って エンジニアとして稼ぐことができる 僕雄貴がポンコツエンジニアから、月120万を稼げるようになった過程を下記の記事では公開しています。 >未経験から月商120万になれた雄貴の行動理念 ーーーーーーーーーーーーーーーーーーーー 【下記画像をクリックして、エンジニアのロードマップをGET！！】 >>詳細が気になる方はこちらをクリック<< IT プログラミング学習 よかったらシェアしてね！ URLをコピーしました！ URLをコピーしました！ 【書評】資本主義ハック 新しい経済の力を生き方に取り入れる30の視点 ITエンジニアが海外案件で働くための情報まとめ この記事を書いた人 雄貴 フリーランスエンジニア 【エンジニアの単価が上がる情報を発信中】 27歳未経験からIT業界へ→経験2年半で月商80万達成 React案件で初回契約月105万を実現 この著者の記事一覧へ 関連記事 未経験エンジニアが1年半で年収1000万円を達成するキャリアプラン 2024年2月18日 一生懸命やってるけど、成果が出ない人が見落としがちなポイント 2024年1月15日 伸び悩んでるならまず学ぼう。世の中知ってるだけで一瞬で解決できる問題が多すぎる 2024年1月4日 今年こそは変わりたい人へ～見違えるくらい変わる目標達成のために重要なこと～ 2024年1月2日 独学でエンジニアとして稼げる人の特徴。自力でできる人とできない人の差はなんなのか？ 2023年12月30日 【成功者インタビュー②】4ヶ月で月収40万円アップさせたエンジニア。〜ブラック企業から抜け出せなかったエンジニアが、経験３年でなぜ月収100万円を超えられたのか？〜 2023年12月30日 【成功者インタビュー①】月収105万円達成したエンジニア 〜月収20万円のオペレーターが0から2年半で月100万越えになぜなれたのか？〜 2023年12月22日 2日で単価が20万上がる人と、数年やっても5万円しか上がらない人の違い 2023年10月6日 コメント コメントする コメントをキャンセルコメント ※ 名前 ※ メール ※ サイト 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。 Δ
コメント