Outlecture
Home
About
Technology
Design
Video
Contact
Official
Outlecture
Home
About
Technology
Design
Video
Contact
Twitter Official
  • Home
  • Technology

React のおすすめの教材9選! 【 2023年3月 最新版】

更新日:2023年3月11日

こちらは、独学で React を学ぼうとしている初学者の方に最適な学習講座を紹介するページです。

目次

1. 本ページの説明

1. 本ページの説明

React を独学で学ぶ上でおすすめの講座を動画プラットフォームから合計9選紹介します。

React とは

React(リアクト)は、Metaによって開発されたWebサイト上のUIパーツを構築するためのJavaScriptライブラリの一つです。公式ではReactの特長を「宣言的な View」「コンポーネントベース」「一度学習すれば、どこでも使える」と宣言しています。Reactの学習はJavaScriptの基礎知識が前提となるので知識が無い方は先にJavaScriptを学習しておきましょう。

本サイト「Outlecture(アウトレクチャー)」は講座の評価、情報の鮮度、購入者や視聴者数、直近の数値上昇率などを全てバランスよく採点し、ユーザーにとって最適な講座のみ抜粋できるよう独自のアルゴリズムで評価を行っています。

また、各動画プラットフォームもそれぞれ特徴があり、「こういう状況の方にはこちらの方が良い」というユースケースも合わせて説明していきます。

Reactをこれから学ぼうとしているみなさまのご参考にしていただければ幸いです。

2. Udemy おすすめ講座5選

Outlectureで厳選したおすすめのUdemy講座5選はこちらです。

コース名 平均評価 総購入者数 先月の購入者数
(2023年2月)
コースレベル コース時間 作成日 更新日 料金

モダンJavaScriptの基礎から始める挫折しないためのReact入門

thumbnail
4.55 19,195 - 初級 6 時間 7 分 2020年8月27日 2023年2月27日 ¥4,200

【2023年最新】React(v18)完全入門ガイド|Hooks、Next.js、Redux、TypeScript

thumbnail
4.62 7,919 702 初級〜上級 24 時間 41 分 2022年3月29日 2023年1月10日 ¥10,000

Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版

thumbnail
4.61 12,100 - 中級 8 時間 7 分 2021年2月8日 2023年2月27日 ¥4,800

【Next.js入門】ReactフレームワークのNext.jsでマイクロブログを構築しながら基礎と本質を学ぶ講座

thumbnail
4.52 2,738 190 初級 3 時間 22 分 2022年2月22日 2022年7月17日 ¥21,800

【Twitterクローン】React×Firebaseでツイッターアプリをハンズオン形式で自作してみよう!

thumbnail
4.69 1,281 77 中級 3 時間 27 分 2021年12月29日 2022年7月17日 ¥21,800

Udemy(ユーデミー)は、アメリカ・シリコンバレー発祥のユニコーン企業で、世界最大級のオンライン学習プラットフォームを運営しています。

Udemyの特徴は、

  • 15.5万以上(※海外講座含む)の豊富な講座を提供している
  • 講師陣の多くが世界最先端の現場で活躍されている
  • 1講座あたり数千~数万円で、キャンペーン時は70~90%OFFとなる良心的な値段
  • 講座は1度購入すれば視聴期限なく受講でき、30日返金保証もついている
  • 講座は0.5~2倍の変速機能を備え、自分のペースで学習することができ、専用アプリを使えばスマホからでもオフライン環境で受講可能
  • 講師に直接掲示板から質問ができるため、疑問を解決し自学自習をサポートしてくれる

等があげられます。

Outlectureの管理メンバーは、ソフトウェアエンジニアやクリエイター、webデザイナーが現役で活躍しています。私たちは初めて触るプログラミング言語やプロダクトの多くはUdemyの受講からキャッチアップをはじめています。
私たちの体験談として、Udemyの講座の質は非常に高いと感じています。講師陣が世界最先端で活躍している方々ばかりで、最先端の知識や現場でのノウハウを丁寧にわかりやすく教えてくれます。試験で使う知識ではなく、実際の現場・案件で使う知識と技術を習得することができます。

Udemyの講座は、実際の現場で活用したい方や自己学習を始めたい方に特におすすめです。一度購入すれば、視聴期限がなく、30日間の返金保証もあるため、安心して学びを始めることができます。

こんな方におすすめ

  • 実案件でReactを使用する
  • 現役の(世界)トップ戦線で活躍している方のノウハウを学びたい
  • サブスクリプションの加入に抵抗のある
  • ITの基礎的な知識がある

各講座の詳細は以下に記載します。


モダンJavaScriptの基礎から始める挫折しないためのReact入門

Reactの習得に苦戦する理由は「JavaScript」への理解不足です。このコースではスムーズにReact開発のスタート地点に立てるように、モダンJavaScriptの動作の仕組みや概念、機能から解説します。

thumbnail
平均評価
4.55
総購入者数
19,195
先月の購入者数
(2023年2月)
-
コースレベル
初級
コース時間
6 時間 7 分
作成日
2020年8月27日
更新日
2023年2月27日
料金
¥4,200

これからReactを勉強する全ての人におくるReact入門コース決定版!


Reactの勉強に苦戦する多くの人と話してきました。

そこで感じたのは苦戦する多くの人は学習の順序を間違えているということです。


JavaScriptへの理解なくしてReactの習得はなし得ません。

そこでJavaScript→Reactの理解の架け橋となる本コースを作成しました。


■本コースでは以下の流れで学習を進めます。

  1. モダンJavaScriptを取り巻く周辺知識や仕組みの概念を知る

    SPAとは?仮想DOMとは?パッケージマネージャとは?等

    React開発に関わる事柄について説明することでまず概念を理解し学習を進め易くします。

  2. React開発で使用するモダンJavaScriptの機能を知る

    ReactはJavaScriptの機能をふんだんに使って開発していきます。そのためまずは良く使うモダンなJavaScriptの機能を先に理解することで後でReactの学習に集中することができます。

  3. プレーンなJavaScriptのみでアプリケーションを開発する

    Reactを使用することでどういう恩恵があるか、従来との違いは何なのか?を知るためにまずはReactを使わずJavaScriptのみでアプリケーションを開発します。

    このステップを挟むことでよりReactへの理解が深まります。

  4. Reactの基本やルールを知る

    ここからReact特有のルールや文法、機能についてフォーカスして学んでいきます。

  5. JavaScriptだけで作成したアプリケーションと同じものをReactで開発する

    学んできたReactを使用し実際にアプリケーションを開発することでより理解を深めます。

    実務ではどのような書き方をするか、抑えるべきポイントも合わせて説明していきますのでイメージが深まるかと思います。

    更にプレーンなJavaScriptで作成したものと同じものを作成するので、近代JavaScriptの転換を体感することができます。


■それ以外の本コースの特徴

  • 私自身、複数プロジェクトでReactを使用し仕事をしているエンジニアです(フリーランス→会社設立)

  • 学習には息抜きも必要なのでセクションの合間に私の経験やフロントエンド周りの雑談も含まれたりしています

  • コード入力時は画面を拡大する等、編集も工夫しているためスマホでもストレスなく閲覧できます

  • 収録音声にも気をつかっているのでイヤホン等で視聴しても不快ではないです(声の好みは分かりませんが...)


  1. はじめに
  2. 講師自己紹介
  3. コース全体像
  4. なぜこのコースが必要なのか
  5. このコースを受けたらできるようになること
  6. このコースで用いる環境について
  7. CodeSandboxの紹介
  8. CodeSandboxの機能説明
  9. CodeSandboxとGitHub連携の注意点
  10. CodeSandboxでGitHubにリポジトリを作ってみよう
  11. 雑談(情報処理の単位が取れずに留年しかけてました)
  12. ReactやVue等を使うために知っておきたいJavaScriptの基本
  13. このセクションで伝えたいこと
  14. JavaScript is 何?なぜオススメ?
  15. DOMや仮想DOMってなんなんだ
  16. npm/yarn等のパッケージマネージャーの意義を知る
  17. ECMAScriptとは。近代JavaScriptの転換期について
  18. モジュールバンドラーやトランスパイラの概念
  19. SPAとは?従来のWebシステムとの違い
  20. 雑談(フリーランスって一言に言っても...)
  21. モダンJavaScriptの機能に触れる
  22. このセクションで取り組むこと
  23. const、let等の変数宣言
  24. テンプレート文字列 ``
  25. アロー関数 =>
  26. 分割代入 {}
  27. デフォルト値 =
  28. スプレッド構文 ...
  29. mapやfilterを使った配列の処理
  30. 三項演算子 ? :
  31. 論理演算子の本当の意味を知ろう && ||
  32. セクションまとめ
  33. 素のJavaScriptだけでTODOアプリを作成してみよう
  34. 準備
  35. HTMLマークアップ間違いのお詫び
  36. HTMLで構造を作成
  37. CSSでスタイリング
  38. タスクの追加機能(テキスト)
  39. タスクの追加機能(ボタン)
  40. タスクの削除機能
  41. タスクの完了機能
  42. タスクの戻す機能
  43. セクションまとめ
  44. 雑談(コンポーネントって何だ??)
  45. Reactの基本を学ぶ
  46. 注意事項(Reactのバージョン)
  47. 準備
  48. JSX記法のルールを知る
  49. コンポーネントの使い方を知る
  50. コンポーネントの補足
  51. Reactでのイベントやstyleの扱い方を知る
  52. Propsを知る
  53. Stateを知る(useState)
  54. 再レンダリングと副作用を知る(useEffect)
  55. default exportとexport
  56. 雑談(クラスコンポーネントと関数コンポーネント)
  57. React使ってTODOアプリを作成してみよう
  58. 準備
  59. JSXで構造を作成
  60. CSSでスタイリング
  61. Reactでの実装を意識したモックに変更
  62. タスクの追加機能
  63. タスクの削除機能
  64. タスクの完了機能
  65. タスクの戻す機能
  66. カイゼン(コンポーネント化)
  67. カイゼン(CSS-in-JS)
  68. カイゼン(TODOの上限設定)
  69. さいごにとこれから
  70. フロントエンドの大変さ、モチベーション
  71. ボーナスレクチャー:さいごにとこれから
【2023年最新】React(v18)完全入門ガイド|Hooks、Next.js、Redux、TypeScript

HTML、CSS、JavaScriptの基礎を終えた方に最適!React入門の決定版!Reactについて知っておくべき基礎知識について体系的、かつ網羅的に学習して、最短でReactをマスターしよう!

thumbnail
平均評価
4.62
総購入者数
7,919
先月の購入者数
(2023年2月)
702
コースレベル
初級〜上級
コース時間
24 時間 41 分
作成日
2022年3月29日
更新日
2023年1月10日
料金
¥10,000

「Reactってよく聞くけど、なんだか難しそう。。」

「HTML、CSS、JSは触ったことあるけど、Reactには壁を感じる。。」

「興味はあるけど自分には早いんじゃないか。。」


本コースはReactに興味があるけど、できるか自信がないフロントエンド入門者の方に向けて作成しました。


まず、皆さんにお伝えしたいのはReactは決して扱うのが難しいライブラリではないということです。

ただ、使いこなせるようになるためにはいくつか知っておくべきことがあります。


本コースではReactを使うにあたって知っておいてほしい基礎の部分を体系的、かつ網羅的に説明しています。



■ 知っておくべきこと1 | JavaScriptの挙動

JavaScriptの挙動自体が曖昧(あいまい)な場合、Reactを使いこなすことは難しいでしょう。

ReactはJavaScriptのライブラリですので、当然JavaScriptで記述することになります。


そのため、Reactに感じる複雑性の多くはJavaScript言語自体の独特の記法からくるものです。

また、Reactのコードを記述する際は分割代入やスプレッド演算子、配列の高階関数、await/asyncなどの比較的最新の記法を多用します。


そのため、十分なJavaScriptへの理解がない状態でReactを使うと、Reactが分かっていないのか、JavaScriptが分かっていないのかが切り分けられず、問題の解決が困難になります。


これがReactが難しいと思われる大きな原因の一つであると私は感じています。


本コースではReactの書き方だけではなくJavaScriptの記述で複雑に感じるであろう部分についても適宜説明しています。

これによって、JavaScriptへの十分な理解がなくてもコースを受講していただけるようにしています。



■ 知っておくべきこと2 | Reactが持つ独特の記述ポリシー

また、Reactを使いこなすためにはReactのポリシー(書き方)についても知る必要があります。

プログラミング入門者はプログラミング経験自体が浅いため、新しい言語やライブラリに出会った際に過去の経験に当てはめて最適な記述方法を考察することができません。


そのようなことを教えてくれる先輩がいればラッキーですが、多くの人はそのような恵まれた環境ではないと思います。そのため、「これで合ってるのかな?」と何となくモヤモヤした気持ちで学習をしていることと思います。


繰り返しになりますが、Reactのコードを記述する際は独特のポリシーが存在します。

そのため、そのポリシーを学べば、どのようにしてReactを記述すればよいかが自(おの)ずとわかってきます。


一つ例を見てみましょう。


例えば、本コースでは関数型プログラミングというプログラミング手法からみたReactについて触れています。関数型プログラミングというのはクラスを使わず、関数によってプログラムの保守性、拡張性、再利用性、テスト性を高めようというプログラミング言語の書き方です。


React 16.8のReact Hooksの導入からReactのポリシーはクラスを用いたオブジェクト指向型プログラミングから関数型プログラミングに完全に移行しました。そのため、関数型プログラミングがどういったプログラミング手法なのかを知ることはReactを知る上で大変重要な事になってきます。


本コースではそういったReactの背景にある思想なども交えながら、体系的にReactというライブラリについて学んでいきます。



■ 知っておくべきこと3 | Reactを取り巻く周辺知識

上で挙げた2つを学べばReact単体については使いこなせるようになるでしょう。しかし、Reactを実際のアプリで使用しようとするとReactだけを学べばよいということではないことがわかってきます。


実際にはどのようにしてサーバーとの通信をすればよいのか、どのようにReact上でデータを管理すればよいのか、どのようにしてページ管理をしていけばいいのかといった問題にぶち当たることになります。


そういった問題を解決するために本コースではReactのみに留(とど)まらず様々なRest API、Redux、Next.jsなどの周辺知識についても学んでいくことになります。ここで、それらについて全て挙げることはできませんので、興味のある方はレクチャー一覧を一度見てみてください。



■ なぜ本コースなのか?

既存の動画教材では、一本でReactとその周辺知識について体系的に、かつ網羅的に学べる教材がないように感じています。


ただ、初心者の頃は自分自身で断片的な知識をつなぎ合わせることは困難です。(そもそも、どの情報を学ぶべきで、どの情報は必要ないのかを取捨選択することも困難でしょう。)そのため、体系的、かつ網羅的に学べる教材は初心者の方にとってきっと大きな力になってくれると思います。


本コースではReactにおける確固たる基礎とその周辺の学ぶ必要のある知識にフォーカスし、Reactを最短で習得することを目的としています。


最短でReactについての基礎を固めたい方は是非本コースを試してみてください。



■ 最後に

私は「なぜこのように書くのか?」「なぜそのような挙動になるのか?」を知ることがプログラミングの上達には極めて重要だと感じています。プログラミング言語やライブラリは日々進化し続けます。そのため、暗記した知識は時代とともに使い物にならなくなってしまいます。


また、プログラムの書き方はグーグルで検索すればいくらでも確認する事ができますが、それを自分の状況に合わせて使うためには動作を理解する必要があります。そのため、プログラミングの上達においては「覚えること」よりも「理解すること」が大切になってきます。


これは本コースで学ぶReactにおいても変わりません。ただ書き方を暗記するのではなく、「なぜそのように書くのか?」「なぜそのような挙動となるのか?」それを知ることによって応用の効く技術を習得することができます。


本コースを終えた方が「Reactってそんな難しくないじゃん!」と思っていただければ、大変嬉しく思います。



■ 各種バージョン情報

React: 18.1.0

Redux: 4.2.0

Next.js: 12.1.6

TypeScript: 4.6.4

Node.js: 16


  1. はじめに
  2. なぜReactなのか?
  3. コース概要
  4. コースの進め方
  5. Udemyでの学習の進め方
  6. ★重要★資材のダウンロード & 受講準備
  7. ★重要★コースで使用するVSCodeの拡張機能を準備しよう
  8. VSCodeのショートカットの使い方について学ぼう
  9. 【スキップ可】Reactで頻出のJavaScriptの記法
  10. セクション紹介
  11. npmコマンドの使い方
  12. 本セクションのコードの実行方法
  13. アロー関数の記法について学ぼう
  14. ESModuleのExport/Importについて学ぼう
  15. コールバック関数の挙動について学ぼう
  16. DOMとイベントリスナについて学ぼう
  17. 配列のmap、filterメソッドについて学ぼう
  18. 分割代入について学ぼう
  19. スプレッド演算子と残余引数について学ぼう
  20. 三項演算子について学ぼう
  21. truthyな値、falsyな値について学ぼう
  22. Promiseについて学ぼう
  23. await/asyncの使い方について学ぼう
  24. まずはReactに触れてみよう
  25. Reactを動かしてみよう
  26. Reactコンポーネントって何?コンポーネントを定義してみよう
  27. Reactのプロジェクトの作成方法(create-react-appの使い方)
  28. ★重要★本コースで使用するプロジェクトの使い方
  29. コンポーネントにスタイルを当ててみよう
  30. コンポーネントの分割方法
  31. 【練習】コンポーネントの分割方法
  32. 不要なタグを出力しないFragmentの使い方
  33. JSX内でJSコードを実行してみよう
  34. 【TIPS】式と文の違い
  35. 【練習】JSX内で式を使ってみよう
  36. propsでコンポーネントに値を渡してみよう
  37. propsに色々な値を渡してみよう
  38. 【練習&解答】propsで値を渡してみよう
  39. 特別なプロパティ ~ props.children
  40. propsの重要なルール
  41. JSXの正体
  42. React要素ツリーとコンポーネントツリー
  43. セクションまとめ
  44. イベントリスナと状態管理(State)
  45. セクション紹介
  46. イベントに合わせて関数を実行してみよう
  47. 開発でよく利用するイベントタイプ
  48. イベントに合わせて画面表示を更新してみよう
  49. 【重要】ステートとは?
  50. 【重要】ステートとレンダリングの仕組み
  51. 【複数のステート】ステート使用時の注意点!
  52. 【更新は即時ではない】ステート使用上の注意点!
  53. 【練習】ステートの処理を自分で記述してみよう
  54. オブジェクト型のステートを使う際の注意点!
  55. 【重要】オブジェクトのステートは新しいオブジェクトを設定する!
  56. 【練習】オブジェクトのステートを更新
  57. 配列のステートを使う際の注意点!
  58. ステートとコンポーネントの関係
  59. ステートを複数のコンポーネントで管理しよう!
  60. 【練習】ステートの受け渡し
  61. セクションまとめ
  62. 制御構文とフォームの制御
  63. セクション紹介
  64. 配列をリスト表示
  65. 【重要】リストには必ずキーを設定
  66. 【練習】リストにキーを設定してみよう
  67. 配列のフィルターメソッドの使い方
  68. 【練習】フィルターメソッドの使い方を練習してみよう
  69. 条件分岐を設ける方法まとめ
  70. コンポーネントのリファクタリング
  71. 【Form】inputとtextareaの作成方法
  72. 【Form】ラジオボタンの作成方法
  73. 【Form】チェックボックスの作成方法
  74. 【Form】複数選択チェックボックスの作成方法
  75. 【Form】プルダウンの作成方法
  76. Todoアプリを作ってみよう
  77. スタイリング
  78. セクション紹介
  79. インラインスタイルの使い方!
  80. インラインスタイルの注意点!
  81. 外部CSSのimportを使ったスタイリング
  82. CSS Modulesを使ったスタイリング
  83. 【styled-components】CSS-in-JSを使ったスタイリング
  84. 【styled-components】【発展】CSS-in-JSを使ったスタイリング
  85. 【練習&解答】styled-components
  86. 【まとめ】Reactでのスタイルの適用方法
  87. 【付録】ReactでのCSSフレームワーク【Part.1】
  88. 【付録】ChakraUIを使ってみよう【Part.2】
  89. 【付録】ChakraUIを使ってみよう【Part.3】
  90. ReactでDOM操作を行う方法
  91. セクション紹介
  92. 【createPortal】モーダルの作り方
  93. 【Bubbling】Portalを使う際の注意点!
  94. 【練習&解答】createPortalでトーストを作成してみよう
  95. 【useRef】refでDOMを直接操作してみよう
  96. 【useRef】refで動画プレイヤーを作成してみよう
  97. 【useRef】refとは?refとstateの違い
  98. 【forwardRef】他のコンポーネントのDOMにアクセスする方法
  99. 【useImperativeHandle】refへのアクセスを限定する方法
  100. 【練習&解答】refの使い方
  101. セクションまとめ
  102. 【スキップ可】問題への対処法
  103. セクション紹介
  104. エラーの解消方法
  105. デバッガーを使ってみよう
  106. React Developer Toolsの使い方
  107. Google検索の仕方
  108. 【発展】関数型プログラミング
  109. セクション紹介
  110. 関数型プログラミングとは?
  111. 状態と処理の分離
  112. 純粋関数
  113. 不変性(immutability)【Part.1】
  114. 不変性(immutability)【Part.2】
  115. Reactと純粋関数
  116. Reactにおける状態と処理の分離
  117. Reactにおける不変性
  118. 【まとめ】関数型プログラミング
  119. JavaScriptコードと見比べてみよう
  120. 【React Hooks】様々な状態管理の方法
  121. セクション紹介
  122. useReducerを使ってみよう
  123. useReducerとuseStateの違い
  124. useReducerとuseStateの違い(関数型プログラミング視点)
  125. 【練習&解答】useReducer
  126. useContextでグローバルな値を管理しよう
  127. useContextでstateを管理してみよう
  128. useContextのリファクタリングをしてみよう
  129. useContextを使う際の注意点!
  130. useContextとuseReducerを組み合わせて使ってみよう
  131. 【練習&解答】useContextとuseReducer
  132. 【練習】useContextとuseReducer
  133. 【解答】useContextとuseReducer
  134. 【解答続き】useContextとuseReducer
  135. 【React Hooks】useEffectとカスタムフック
  136. セクション紹介
  137. useEffectとは?タイマーを作りながら学んでみよう
  138. useEffectの依存配列の使い方
  139. 【練習&解答】useEffect
  140. useEffectのクリーンアップ処理の使い方
  141. useEffectの実行タイミングをおさらいしよう
  142. useLayoutEffectって何?useEffectとの違いについて学ぼう
  143. useEffectの実行順を意識して実装してみよう
  144. 独自のフックを作成してみよう
  145. 【練習&解答】Custom Hook
  146. 【発展】関数型プログラミングから見たuseEffectの使用ケース
  147. 【発展】ReduxとRedux Toolkit
  148. セクション紹介
  149. Reduxとグローバルな状態管理
  150. ★本セクションのサンプルコードの実行方法
  151. Reduxを使ってみよう
  152. Reduxの状態管理方法について学ぼう
  153. 複数のReducerを使う方法
  154. Action CreatorでActionを定義してみよう
  155. Redux ToolkitでReduxを書き換えてみよう
  156. Redux Toolkitにおけるミュータブルな値の変更
  157. Immerを使ったミュータブルな値の変更
  158. Redux Thunkとは?Redux Middlewareとの関係
  159. Redux Thunkで非同期処理を記述してみよう
  160. 非同期処理のステータスを画面に表示してみよう
  161. Redux Middlewareを作成してみよう
  162. セクションまとめ
  163. 【スキップ可】クラスコンポーネント
  164. セクション紹介
  165. クラスコンポーネントとは?
  166. クラスコンポーネントを定義してみよう
  167. クラスコンポーネントでの状態管理
  168. ライフサイクルメソッドとは?
  169. Error Boundaryの実装方法
  170. 【発展】パフォーマンスの最適化
  171. セクション紹介
  172. 【レンダリング】画面が更新されるまで
  173. Stateの比較処理(Object.is)
  174. 【TIPS】StrictModeとは?
  175. 子コンポーネントの不要なレンダリング
  176. React.memoを使った不要なレンダリングの防止
  177. useCallbackを使った関数のメモ化
  178. useCallbackの依存配列の使い方
  179. useMemoを使った値のメモ化
  180. セクションまとめ
  181. 【React18】useTransitionでUIのパフォーマンス改善
  182. 【React18】useDeferredValueでUIのパフォーマンス改善
  183. Rest APIを使ったサーバーとの通信
  184. セクション紹介
  185. REST APIとは?
  186. JSONとは?
  187. JSON ServerでモックアップAPIを作成
  188. Axiosを使ってサーバーからデータを取得しよう
  189. 取得したデータを画面に反映してみよう
  190. GUIでリクエストの状態を確認しよう
  191. 更新リクエストをサーバーに送信してみよう
  192. リクエストと画面処理を統合しよう
  193. 【発展】ダイナミックインポートとは?
  194. 【発展】コンポーネントのダイナミックインポート
  195. Next.js(Part.1)基本的な使い方
  196. セクション紹介
  197. Next.jsとは?なぜNext.jsを使うのか?
  198. Next.jsをインストールしてみよう
  199. 書きながら学びたい人はこちらを受講ください
  200. ルーティングとは?基本的な書き方について学ぼう
Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版

「React何となく分かったけど次どうしたら良いか分からない」という人がステップアップするために知っておくべきことを順序立ててハンズオン形式で詰め込みました。本コースを終える頃にはもっとReactのことを好きになっていると思います。

thumbnail
平均評価
4.61
総購入者数
12,100
先月の購入者数
(2023年2月)
-
コースレベル
中級
コース時間
8 時間 7 分
作成日
2021年2月8日
更新日
2023年2月27日
料金
¥4,800

React力を更に高めたい全ての人におくるステップアップコース完全版!


「stateやprops、useStateやuseEffectの使い方は何となく分かったけど次どうしたら良いか分からない」

「もっと実務で必要となるレベルの解説を知りたい」


といったReactでもっとステップアップしていきたい人のために本コースを作成しました。


■本コースでは以下の内容を取り扱います

  1. 再レンダリングの仕組みを知りレンダリングを最適化する

    どんな時に再レンダリングは起きるのか、またそれを最適化する方法を知ることで規模が大きくなってもサクサク動く快適なアプリケーションを作ることができるようになります。

  2. 様々なCSSのあてかたに触れる

    いざ自分でアプリケーション作ろうと思うとCSSについては絶対迷うと思います。

    選択肢を増やすために主要なCSSライブラリについて使い方を紹介します。

  3. ルーティングのテクニックを学ぶ(React Router)

    Reactで画面遷移を伴うアプリケーションを作る場合ルーティング周り知識は不可欠です。

    ReactRouterの使い方や具体的なテクニックを知ることでアプリケーション開発に生かせるかと思います。

  4. コンポーネントの分割方法を学ぶ(Atomic Design)

    コンポーネント分割として有名なAtomic Designというデザインシステムを紹介します。

    概念の部分や、Reactでの使い方を知ることでコンポーネント分割への意識が変わります。

  5. グローバルなstate管理を知る

    実際のアプリケーションではコンポーネントを横断して使用できるグローバルなstateの知識は必須です。

    React標準のContextの使い方やテクニックと、Recoilというライブラリについても軽く紹介しています。

  6. React × TypeScriptで開発できるようになる

    これからReactで開発していく場合、TypeScriptの使用はほぼ必須と言っても過言ではありません。

    基礎、応用と順番にTypeScriptについて解説していくので、今後はTypeScriptを用いたReact開発に取り組んでいけるようになるかと思います。

  7. カスタムフックを使えるようになる

    コンポーネントとロジックを分離するカスタムフック について実際に使い方を学ぶことで更にステップアップしたReactのコードを書けるようになります。

  8. Chakra UIを使った実践アプリ作成

    これまでの内容を全て取り込んで実際にCSSフレームワークを使いながらアプリケーションを作っていく流れを体験することで、より学習した内容の生かし方がイメージできるようにしています。


■それ以外の本コースの特徴

  • 私自身、複数プロジェクトでReactを使用し仕事をしているエンジニアです(フリーランス→会社設立)

  • コード入力時は画面を拡大する等、編集も工夫しているためスマホでもストレスなく閲覧できます

  • 収録音声にも気をつかっているのでイヤホン等で視聴しても不快ではないです(声の好みは分かりませんが...)


  1. はじめに
  2. 講師挨拶
  3. 本コース受講の前提条件
  4. コース全体像
  5. CodeSandboxについて
  6. CodeSandboxについて
  7. 再レンダリングの仕組みを知りレンダリングを最適化する
  8. 注意事項(Reactのバージョン)
  9. 理解度の確認
  10. レンダリング確認用のコーディング
  11. 模擬的にレンダリングコストの高いコンポーネントを作成
  12. 再レンダリングが起きる条件
  13. レンダリング最適化1(memo)
  14. レンダリング最適化2(useCallback)
  15. おまけ(useMemo)
  16. 様々なCSSのあてかたに触れる
  17. Inline Styles
  18. CSS Modules
  19. Styled JSX
  20. styled components
  21. Emotion
  22. ルーティングの基礎(React Router)
  23. React Routerバージョンの注意点
  24. React最新バージョンでの注意点
  25. React Router導入&事前準備
  26. 基本的なページ遷移
  27. ネストされたページ遷移
  28. ルート定義の分割
  29. URLパラメータを扱う
  30. クエリパラメータを扱う
  31. stateを渡すページ遷移
  32. Linkを使わないページ遷移
  33. 404ページを用意する
  34. コンポーネントの分割方法(Atomic Design)
  35. Atomic Design概要
  36. Atomの作成
  37. Moleculeの作成
  38. Organismの作成1
  39. Organismの作成2
  40. Templateの作成
  41. Pageの作成
  42. Atomic Designに取り組む上でのポイント
  43. グローバルなstate管理を知る
  44. グローバルなstate管理がなぜ必要か
  45. ツラい例を実装してみる
  46. Contextでのstate管理(基本的な使い方)
  47. Contextでのstate管理(ユーザー情報の設定と参照)
  48. Contextでのstate管理(再レンダリングの最適化)
  49. Recoilでのstate管理(Recoilの紹介)
  50. Recoilでのstate管理実践
  51. JSONPlaceholderでのデータ取得解説
  52. JSONPlaceholderとは
  53. JSONPlaceholderからaxiosでデータを取得してみる
  54. React × TypeScript(基礎編)
  55. TypeScriptとは
  56. 基本的な型
  57. 引数の型指定
  58. 返却値の型指定
  59. 変数の型指定
  60. 設定ファイル(tsconfig)をいじってみる
  61. React × TypeScript(実践編)
  62. React × TypeScriptの準備
  63. 型がないせいでバグっているアプリの例
  64. 取得データの型を定義しバグを防ぐ
  65. propsに型を定義しよう
  66. 型定義を効率的に管理しよう
  67. コンポーネント自体の型定義
  68. オプショナルチェイニングでnull安全なコードを書く
  69. 補足(ライブラリの型定義について)
  70. カスタムフック
  71. カスタムフックとは
  72. カスタムフックを使わないデータ取得例
  73. カスタムフック作成
  74. カスタムフックを呼び出す
  75. 実践アプリ作成(Chakra UI)
  76. ソースコードのリポジトリ
  77. 注意事項
  78. 総まとめとして作成するアプリ
  79. Chakra UIバージョンの注意点
  80. Chakra UIの紹介
  81. Globalなスタイルを設定する
  82. ルーティングの作成
  83. ヘッダーの作成
  84. ヘッダーの作成(コンポーネント分割)
  85. ヘッダーの作成(ルーティング機能実装)
  86. ログイン画面の作成
  87. ログイン画面の作成(コンポーネント分割)
  88. ログイン機能の実装
  89. メッセージ表示機能の実装
  90. ユーザー一覧画面の作成
  91. ユーザー一覧取得機能の実装
  92. ユーザー詳細モーダル画面の作成
  93. ユーザー詳細モーダル機能の実装
  94. ログインユーザー情報をContextに保持してみる
  95. 管理者ユーザーを想定してフラグをcontextに保持してみる
  96. 管理者ユーザーのみユーザー情報を編集できる導線の作成
  97. さいごにとこれから
  98. さいごにとこれからのアドバイスと小話
  99. ボーナスレクチャー
【Next.js入門】ReactフレームワークのNext.jsでマイクロブログを構築しながら基礎と本質を学ぶ講座

Next.jsフレームワークでマイクロブログを実際に構築しながら、Webアプリ読み込み速度やWebパフォーマンスを最大化するSSG/SSRプリレンダリング手法が学べる講座。モダンなフロントエンド技術をキャッチアップしてみよう。

thumbnail
平均評価
4.52
総購入者数
2,738
先月の購入者数
(2023年2月)
190
コースレベル
初級
コース時間
3 時間 22 分
作成日
2022年2月22日
更新日
2022年7月17日
料金
¥21,800

Reactフレームワークの「Next.js」を初めて触る人に向けたコース構成になっています。


■ 本コースの対象者

・Reactは一通り学んだから次のステップとしてNext.jsを学びたい方

・Next.js完全初心者の方

・Next.jsを学んでReactの違いを明確に理解しておきたい方

・Next.jsの公式ドキュメントを読んでもイマイチ理解が深まらない方

・公式ドキュメントよりも動画でサクッと理解したい方

・CSRではない最新のレンダリング手法のSSG・SSRを学んでみたい方


Reactよりも最適化されたアプリやサイトを構築できます。

Next.jsフレームワークを学べば高速化されたWeb開発が可能に。

モダンなフロントエンド技術に乗り遅れたくない方は必見の内容です。


■ 本コースを受講する際の注意点

・HTML/CSS/JavaScriptの基本的な文法とルールは教えていません。

・Next.jsの公式ドキュメントに沿った内容で講座を構成しています。

・すでにNext.jsの公式ドキュメントを読み終えて理解済みの方は、

この講座では新しい学びがないので受講しないようにしてください。

・ISRについては取り扱っておりません。

  1. 本講座を受講する流れ
  2. 本講座で学ぶこと・デモ
  3. 本講座の学習の流れ
  4. Next.jsの基礎を学ぼう
  5. Next.jsって何?なぜ必要なの?
  6. プリレンダリングって何?
  7. SSGとSSRって何?
  8. 【追加教材】SSGのより分かりやすい説明
  9. Next.jsの開発環境を構築しよう
  10. VSCodeをインストールしよう
  11. Node.jsをインストールしよう
  12. 開発用フォルダを作ってNext.jsのひな型を作成しよう
  13. Next.jsファイル群の中身の説明
  14. Next.jsの開発効率が上がるプラグインをインストールしよう
  15. ①Next.jsでマイクロブログを構築(ページ遷移、スタイリング編)
  16. はじめに:完成品デモ
  17. Next.jsにおけるホットリローディングを体感しよう
  18. pagesフォルダでルーティング設定をしてみよう
  19. Linkコンポーネントでページ遷移をしてみよう
  20. 静的な画像ファイルの取り扱いについて(publicディレクトリ)
  21. Headコンポーネントを使ってメタデータを追記しよう
  22. 複数ページに共通して使えるレイアウトコンポーネントを作成してみよう
  23. Next.jsにおけるcssスタイリング適用方法を学ぼう
  24. タイポグラフィに関するCSSモジュールを用意しよう
  25. _app.jsにグローバルスタイリングを適用させてみよう
  26. トップページのレイアウトを更新しよう
  27. トップページのスタイリングを調整しよう
  28. ②Next.jsでマイクロブログを構築(プリレンダリング編)
  29. はじめに
  30. Next.jsでプリレンダリングを実感してみよう
  31. ブログ投稿用データを準備しよう
  32. マークダウン解析のためのライブラリを作成しよう
  33. getStaticPropsでSSGを実装してみよう
  34. propsで受け取った静的データをmap関数で出力して表示しよう
  35. getServerSidePropsの書き方も知っておこう
  36. ③Next.jsでマイクロブログ構築(動的ルーティング編)
  37. はじめに
  38. Next.jsにおける任意のURLを動的ルーティングとして設定する方法
  39. 各ブログファイル名(id)のオブジェクトを返す関数を作成しよう
  40. getStaticPathsを実際に使ってみよう
  41. 外部から一度だけデータを取得するSSGを実装しよう
  42. ブログIDに応じた記事内容を返す関数を用意しよう
  43. 実際にgetStaticPathsとgetStaticPropsを実感してみよう
  44. ブログ記事のレイアウトを訂正しよう
  45. フォールバックについて補足
  46. 404 Not Foundページをカスタマイズしてみよう
  47. ブログの細かい訂正をしよう(その1)
  48. ブログの細かい訂正をしよう(その2)
  49. ④Next.jsでマイクロブログ構築(デプロイ編)
  50. buildコマンドを実行して本番前にプレビューしてみよう
  51. デプロイするためにGitHubアカウントを作成しよう
  52. Vercel社が開発したデプロイサービスを利用しよう
  53. DPSワークフローを体験してみよう(その1)
  54. DPSワークフローを体験してみよう(その2)
  55. Next.jsが本当にページを高速にレンダリングしているか確認してみよう
  56. ボーナスレクチャー
  57. 最後まで受講していただいた方へ
  58. ボーナスレクチャー
【Twitterクローン】React×Firebaseでツイッターアプリをハンズオン形式で自作してみよう!

「ReactとFirebaseを連携させてSNSアプリを自作してみたい!データベース管理もしてみたい!」そんなあなたに向けたReact中級者向けの動画です。いつも使っているツイッターを1から自作できるようになります。

thumbnail
平均評価
4.69
総購入者数
1,281
先月の購入者数
(2023年2月)
77
コースレベル
中級
コース時間
3 時間 27 分
作成日
2021年12月29日
更新日
2022年7月17日
料金
¥21,800

ある程度React基礎を学んだ人向けに作成した講義ビデオになります。


「Twitterアプリってどんな仕組みで作られているの ?」

「Reactは少し理解したけど作りたいものが見つからない・・・」

「Firebaseのデータベース連携でテキストや画像情報を保存してブラウザに表示したい!」

「クローンアプリを作りながらもっとReactの理解を深めたい! 」


モダンなReactライブラリを使ってSNSアプリで有名な「Twitter」クローンをハンズオン形式でレクチャーします。


■本コースでは教えないこと

・HTML/CSS/JavaScriptの基本的な文法・ルール

・削除機能

・ログイン機能

・いいねやリツイート機能等

・完璧なTwitterクローンではないのでご了承ください。

・Twitterの見た目と、ツイート・画像投稿機能(データベースに保存)とタイムライン表示まで実装しています。

  1. はじめに
  2. 本講座で学ぶこと・デモ
  3. 本講座の学習の流れ
  4. Reactの開発環境を構築しよう
  5. VSCodeをインストールしよう
  6. Node.jsをインストールしよう
  7. React開発環境構築
  8. Reactプロジェクト内部の説明/整理
  9. コーディングに便利なプラグインをインストールしよう
  10. 【基礎】Javascript 関数講座
  11. はじめに
  12. Array.map()
  13. 三項演算子の使い方
  14. 【実践】Twitterクローンの完成品デモ
  15. ツイッター完成品のデモ
  16. ツイッター完成品のソースコード
  17. 【実践】Twitterアプリを実装しよう(フロントエンド編)
  18. TwitterのHTML構成を図解で確認してみよう
  19. サイドバーを作成しよう
  20. MaterialUIを導入・インストールしてみよう
  21. SidebarOption.jsを実装してみよう
  22. Material Iconコピペ用テキスト
  23. Material Iconを探す練習をしてみよう
  24. サイドバーにツイートボタンを追加しよう
  25. Sidebar.cssでスタイリングを適用しよう
  26. SidebarOption.cssでスタイリングを適用しよう
  27. App.cssでアプリ全体のレイアウトを変更しておこう
  28. タイムラインを作成しよう
  29. タイムラインのCSSを適用させよう
  30. TweetBox.jsを作成しよう
  31. TweetBox.cssでスタイリングを適用しよう
  32. Post.jsを作成しよう
  33. Post.cssでスタイリングを適用しよう
  34. タイムラインをスクロールできるように修正しよう
  35. ウィジェットを作成しよう
  36. ツイッタータイムライン貼り付けのライブラリを導入してみよう
  37. Wiget.cssでスタイリングを適用しよう
  38. 最後にアプリ全体のCSSの修正をしよう
  39. 【追加】CSSの最終修正
  40. 【実践】Twitterアプリを実装しよう(バッグエンド編)
  41. はじめに図解で全体像を確認しよう
  42. Post.jsコンポーネントにプロップスを渡してみよう
  43. Firebaseを使ってみよう
  44. Firebaseの初期化設定
  45. CloudFirestoreデータベースを使ってみよう
  46. データベースを初期化(連携)してみよう
  47. データベースからデータを取り出してみよう
  48. 取り出したデータをPost.jsに渡して出力してみよう
  49. マウント時だけデータを取得するように変更してみよう
  50. ツイート投稿できるようにしよう:その1
  51. ツイート投稿できるようにしよう:その2
  52. 最新のツイート順にデータを出力してみよう
  53. リアルタイムでデータを出力してみよう
  54. 滑らかにツイートを表示してみよう
  55. 最初からサイドバーが選択された状態にしてみよう
  56. 作ったTwitterをデプロイしてみよう
  57. Firebaseでデプロイしてみよう
  58. ボーナスレクチャー
  59. 最後までご受講いただいた方へ
  60. ボーナスレクチャー

3. YouTubeおすすめ講座3選

Outlectureで厳選したおすすめのYouTube講座3選はこちらです。

動画名 総視聴数 先月の視聴数
(2023年2月)
いいね数 公開日

【React入門】完全初心者OK!1から簡単なTodoアプリを作ってReactの1歩を踏み出してみよう ~Reactチュートリアル~

thumbnail

チャンネル名:プログラミングチュートリアル

50,136 5,677 1,078 2022年5月20日

【React Hooks入門】完全初心者OK!8種類のHooksを学んでReactの理解を深めよう

thumbnail

チャンネル名:プログラミングチュートリアル

21,706 - 710 2022年6月24日

Material UI crash course with Next.js 2023 | React UI Framework | V5

thumbnail

チャンネル名:Cules Coding

1,538 1,281 44 2023年1月28日

YouTubeは、広告がつくものの無料で視聴でき、日常生活でもお馴染みとなっています。
最近では、良質な教材も増えており、学びたいけどお金をかけるほどでもない方や、概要をさらっと理解したい方には、YouTubeで学ぶことをおすすめします。

こんな方におすすめ

  • お金をかけずに学びたい
  • Reactの概要だけさらっと理解したい

各講座の詳細は以下に記載します。

【React入門】完全初心者OK!1から簡単なTodoアプリを作ってReactの1歩を踏み出してみよう ~Reactチュートリアル~

プログラミングチュートリアル

総視聴数
50,136
先月の視聴数
(2023年2月)
5,677
いいね数
1,078
公開日
2022年5月20日
#入門 #React #Javascript #初心者 #プログラミング #ライブラリ #開発

【ReactでTrelloやTwiiterを作ってみたい方はこちらから】
http://shincode.info/2021/12/31/udemy-discount-coupon/

\ShinCode_Campでプログラミングを楽しもう/
幅広いプログラミングの知識を得るための動画プラットフォーム
🚀【7日間無料体験キャンペーン実施中】🚀
🎁僕が作成したUdemy講座が見放題
🎁分からない箇所は質問し放題
🎁フルスタック技術が学べる
🎁いつでも解約可能
↓↓↓↓↓
https://code-s-school-5bc2.thinkific.com/bundles/shincode-camp
-----------------------------------------------------------------------------------------------------------------------------
【募集】Web開発/Webサイト制作を頼みたい方はこちらのリンクからお問い合わせください
↓↓↓↓↓
https://worldhacks.co.jp/

\Webスキルが付いたらWebエンジニアに挑戦してみよう/
私が実際にWebのお仕事を頂いている会社で働いてみよう🚀
応募は下記リンクから
↓
https://www.wantedly.com/projects/1020833
✅Webエンジニア未経験でもOK
✅フルリモートだから自由な場所で働ける
✅ポテンシャル採用
✅モダンな技術スタックで開発できる
✅面接で不合格でも「なぜダメだったのか」の理由がきちんと聞ける
✅会社公式HPはこちら → https://worldhacks.co.jp/
上記記載のWebベンチャー社長と繋がってみたい方はTwitterを載せておきます。
WorlsHacks社長ツイッター : https://twitter.com/kairi_morishita
WorldHacks公式ツイッター : https://twitter.com/WorldHacks_Inc

-----------------------------------------------------------------------------------------------------------------------------

【この動画を視聴するメリット】
・React初心者がReactの1歩を踏み出すことができる
・JavascriptのライブラリであるReactが簡単に学べる
・Reactを使って簡単なTodoアプリが自作できる(React18)
・簡単なコンポーネント管理が学べる
・useState等のHooksが学べる
・Jsx記法が学べる

【信頼性】
・Udemy講師
・講師レビュー評価94.6%
・Udemy受講生延べ300人突破
・Webアプリ/サイト開発数:200以上

★チャンネル登録はこちらから★
https://www.youtube.com/channel/UCNTxclE0N4qsUuirssL_D8w?sub_confirmation=1

★今回のソースコード★
https://github.com/Shin-sibainu/react-tutorial-with-todoapp

★運営者SNS★
Twitter:https://twitter.com/Shin_Engineer

★この動画で使用している機材★
キーボード(Keychron K6 赤軸):https://amzn.to/3F4zca5
マウス(Logicool G ロジクール G ゲーミングマウス):https://amzn.to/3DZaaYB
マイク(サンワダイレクト USBマイク PCマイク):https://amzn.to/30AVwJF
マイクスタンド(Luling Arts マイクスタンド マイクアーム スタンド):
https://amzn.to/3se5onZ
※アフィリエイトリンクになります。
【React Hooks入門】完全初心者OK!8種類のHooksを学んでReactの理解を深めよう

プログラミングチュートリアル

総視聴数
21,706
先月の視聴数
(2023年2月)
-
いいね数
710
公開日
2022年6月24日
#入門 #react #reacthooks #hooks #javascript #プログラミング #webアプリ開発 #web

【ReactでTrelloやツイッタークローンを作ってみたい方はこちら🚀】
http://shincode.info/2021/12/31/udemy-discount-coupon/

\ShinCode_Campでプログラミングを楽しもう/
幅広いプログラミングの知識を得るための動画プラットフォーム
🚀【7日間無料体験キャンペーン実施中】🚀
🎁僕が作成したUdemy講座が見放題
🎁分からない箇所は質問し放題
🎁フルスタック技術が学べる
🎁いつでも解約可能
↓↓↓↓↓
https://code-s-school-5bc2.thinkific.com/bundles/shincode-camp

-----------------------------------------------------------------------------------------------------------------------------
【募集】Web開発/Webサイト制作を頼みたい方はこちらのリンクからお問い合わせください
↓↓↓↓↓
https://worldhacks.co.jp/

\Webスキルが付いたらWebエンジニアに挑戦してみよう/
私が実際にWebのお仕事を頂いている会社で働いてみよう🚀
応募は下記リンクから
↓
https://www.wantedly.com/projects/1020833
✅Webエンジニア未経験でもOK
✅フルリモートだから自由な場所で働ける
✅ポテンシャル採用
✅モダンな技術スタックで開発できる
✅面接で不合格でも「なぜダメだったのか」の理由がきちんと聞ける
✅会社公式HPはこちら → https://worldhacks.co.jp/
上記記載のWebベンチャー社長と繋がってみたい方はTwitterを載せておきます。
WorlsHacks社長ツイッター : https://twitter.com/kairi_morishita
WorldHacks公式ツイッター : https://twitter.com/WorldHacks_Inc
-----------------------------------------------------------------------------------------------------------------------------

【この動画を視聴するメリット】
・Reactの基礎が理解できる
・React Hooks8種類が学べる
・useState/useEffect/useContext/useRef/useReducer/useMemo
/useCallback/Custom Hooks(カスタムフック)
・Reactのパフォーマンスチューニングが学べる

【信頼性】
・Udemy講師
・講師レビュー評価94.6%
・Udemy受講生延べ2500人突破
・Webアプリ/サイト開発数:200以上
・生きがい:プログラミングでサイトやアプリを作ること

useState: 3:01
useEffect: 9:18
useContext: 14:18
useRef: 21:13
useReducer: 24:27
useMemo: 31:36
useCallback: 45:25
カスタムhook: 50:42

★チャンネル登録はこちらから★
https://www.youtube.com/channel/UCNTxclE0N4qsUuirssL_D8w?sub_confirmation=1

★今回のソースコード★
https://github.com/Shin-sibainu/react-hooks-tutorial

★運営者SNS★
Twitter:https://twitter.com/Shin_Engineer

★この動画で使用している機材★
キーボード(Keychron K6 赤軸):https://amzn.to/3F4zca5
マウス(Logicool G ロジクール G ゲーミングマウス):https://amzn.to/3DZaaYB
マイク(サンワダイレクト USBマイク PCマイク):https://amzn.to/30AVwJF
マイクスタンド(Luling Arts マイクスタンド マイクアーム スタンド):
https://amzn.to/3se5onZ
※アフィリエイトリンクになります。
Material UI crash course with Next.js 2023 | React UI Framework | V5

Cules Coding

総視聴数
1,538
先月の視聴数
(2023年2月)
1,281
いいね数
44
公開日
2023年1月28日
This video will teach you all the basics of Material UI with Nextjs.

Contacts:
Email: thatanjan@gmail.com
Portfolio: https://thatanjan.vercel.app/
Blog: https://cules-coding.vercel.app/
Linkedin: https://linkedin.com/in/thatanjan/
Github: https://github.com/thatanjan/
Twitter: https://twitter.com/thatAnjan

Blogs you might want to read:
Eslint, prettier setup with TypeScript and react: https://www.culescoding.vercel.app/blog/setup-eslint-prettier-with-typescript-and-react
What is Client-Side Rendering?: https://www.culescoding.vercel.app/blog/what-is-client-side-rendering
What is Server Side Rendering?: https://www.culescoding.vercel.app/blog/what-is-server-side-rendering
Everything you need to know about tree data structure: https://www.culescoding.vercel.app/blog/everything-you-need-to-know-about-tree-data-structure
13 reasons why you should use Nextjs: https://www.culescoding.vercel.app/blog/13-reasons-why-you-should-use-Nextjs

Videos you might want to watch:
Setup Eslint Prettier with Typescript and React -Nextjs, Create React App: http://youtu.be/T-n0mrssDiw
Setup and deploy fullstack application on Vercel and Render: https://youtu.be/ME3tMy5Q2qo
Auth0 basics with Next.JS: https://youtu.be/FqxtDabMUEQ
Upload images from React and Node: https://youtu.be/hHCabCNLmPk
Chakra-UI crash course: https://youtu.be/hJ873mLhmFQ
Next auth crash course: https://youtu.be/tgrvKGPmI04
Build a small search engine with MongoDB: https://youtu.be/C6VytdSDNSk

Playlists you might like:
Next.Js tutorials: https://youtube.com/playlist?list=PLEr-WXao6eSPCSujdESIOcDePkTL91FfQ
Build a blog using JAMstack: https://www.youtube.com/watch?v=KYLBb1W1ZBA&list=PLEr-WXao6eSPQzQAlkYpNLfcSm6pTiTpd
Quick tricks: https://www.youtube.com/watch?v=RECwLOZdiR4&list=PLEr-WXao6eSPspqYqDd0ISbLdDbBAIPNR
Crash course: https://www.youtube.com/watch?v=rSa8sUC8m_4&list=PLEr-WXao6eSNuG2mQyV_48RQoj5p8WM_q
How-to videos: https://www.youtube.com/watch?v=T-n0mrssDiw&list=PLEr-WXao6eSOVI5LSBn23tsqCp-pCAwiu
Clone Blue Origin Landing Page: https://youtube.com/playlist?list=PLEr-WXao6eSNuEn9uP_BYinHKcukMbX8L

Stay safe and good bye.

4. Progateおすすめ講座1選

Reactは、Progate(プロゲート)でも学ぶことができます。

Progateは、世界100カ国以上に提供され、280万人以上に利用されているプログラミング学習サービスです。特徴は

  • Progateのサービス上でコードを書くことができるため、ローカルの開発環境構築が不要
  • 直感的に理解しやすいイラスト中心のスライドを使用
  • 月額1,078円という低価格で、講座ごとの課金がないため、React以外の講座も受講可能

が挙げられます。IT初学者の方にとって、ローカルの開発環境構築でつまずくことはよくあることですが、Progateはそれを不要にする点が大きなアドバンテージとなります。
また、Progateは買い切りではなく、月額制のサブスクリプション料金体系を採用しているため、React以外にも受講したい講座がある方は特にコストパフォーマンスが高いと言えます。

こんな方におすすめ

  • IT基礎知識に自信がない
  • React以外も受講したい講座がたくさんある
ProgateのReact学習コース

5. まとめ

Reactのおすすめ講座を紹介しました。他の関連講座を学びたい方は、下記をご参考ください。

Next.js
Vue.js
HTML CSS
Next.js
Vue.js
HTML CSS

「自ら機会を創り出し、機会によって自らを変えよ」

株式会社リクルート創業者 江副浩正氏の有名な言葉です。自分の知識やスキルを高めることは、機会を作り出すことに役に立ちます。自らを変えようとしている方にとって、本ページの情報が少しでもお役に立てれば幸いです。

今回紹介したいずれかの講座を受講した後にさらに深掘りして学びたい方は、公式サイトやコミュニティサイトに行くことを、最新の情報をキャッチアップしていきたい方場合は、公式twitterアカウントをフォローすることをおすすめします。

一覧に戻る
Home About Share
Home
About
Privacy policy
Disclaimer
Contact
Official
© 2023 outlecture.com All Rights Reserved.