강의

멘토링

커뮤니티

BEST
Programming

/

Front-end

React を完全にマスター: 基本概念から Lean Canvas プロジェクトまで

React を初めて学習しますか? この講座で React の基礎を学び、LinCanvas プロジェクトを通じて実務経験を積んでください。そうすれば、自信を持ってフロントエンド開発者として就職できます!

難易度 初級

受講期間 無制限

  • gymcoding
React
React
react-query
react-query
react-router
react-router
React Context
React Context
TailwindCSS
TailwindCSS
React
React
react-query
react-query
react-router
react-router
React Context
React Context
TailwindCSS
TailwindCSS

学習した受講者のレビュー

学習した受講者のレビュー

4.8

5.0

Rach

37% 受講後に作成

✅ ジムコーディングReact講義のメリット 1. 公式文書ベースの学習 体系的に学ぶことができ、Reactの概念を深く理解するのに役立ちます。 2. 基礎しっかりと細くする 単にReactを使うのではなく、原理を知って理解し、自分でコードを完成できるようになります。 3. 最適化学習を含む 通常、別途講義で提供される最適化内容をここでは一緒に学ぶことができ、便利です。 4. Vite環境の構成と展開の学習 最新の開発環境で、環境変数の設定と展開プロセスを学ぶことができます。 5. 足りない部分を客観的にチェック可能 講義中、自分のJavaScriptとReactのどちらが不足しているかを確認できます。 5. 追加学習リソースの提供 必要な概念を明確に理解するために、追加のレッスンリンクを共有します。 Tip. 講義を止めて自分でしなければならない部分をぜひ!してみてください! 一度にわかりにくい部分は繰り返し説明してくれるから信じて、従ってすべての過程に沿ってくださるならBESTです! Vue講義を聞いて公式文書基盤なので、現業に役立っています。 Reactの講義からのニュースにすぐに走ってきました〜 もしNext.js講義の計画もあるのだろうか? 😊

5.0

HanKyul Kim

31% 受講後に作成

会社でバックエンド業務を担当しており、近年では様々な機会がますます生じ、フロントエンド業務も担当するようになりました。 そのため、リアクトを学ばなければならないという考えに、複数のプラットフォーム、複数の講義を探してみ、その中で該当の講義カリキュラムと受講評が一番気に入ったので悩みなく決済して受講中です。 正直難しいです。途中で何の音なのか分からない部分も多いですね。 しかし、インストラクターは"この概念は最初にXXXという概念を知っておく必要があります!これはJavaScriptでXXXという文法です!"等をお知らせいただきながら、関連授業資料を添付しておいてガイドをしてください。だからいくら知らない概念が出ても心配する必要はありませんでした。 講師が本当に親切にすべてを教えてください。 特にこの講義はリアクト公式文書をもとに実習と例を適切に混ぜて進めるため、信頼99.999%講義といえます。 (開発者にとって公式文書がどれほど重要かは皆知っていると思います!) イチオシ

5.0

지니

30% 受講後に作成

新しくなった講義だから悩んでいた ジムコーディング様のビュー講義を既存に聞いた知人の強力推薦でリアクト講義を聞くようになりました。 初心者でもわかりやすく説明も詳細にしてくれて また、何度も何度も何度も何度も何度も何度も教えてくれるので、講義を振り返らなくても概念に慣れることができます。 授業しながら一緒に見られる教案がよく整理されて提供されるのも便利です。 眠らないようにするテンションで講義を繰り広げていきます。 たまに必要な部分があり、他のジムコーディング様のYouTubeを見れば、全く違って快適でスッキリとした感じなので少し好みが分かれそうです。 Windows ユーザー + VS Code 英語で使用して、たまにショートカットや画面に探して入らなければならないメニューが異なるときに少し迷います。一緒に映像にご案内いただいたらもう少し良かったと思います。 これは私がまだ超初心者なので、コードを修正するときに修正する部分に言及してほしいのですが、いつでもコードを削除したり、すばやく修正をするので、映像を見ながらコードを入力するのは難しいです。削除になる部分があるかどうか目で正確に確認後、したがって実習しなければなりませんでした。 それでも授業の準備に気を使い、体系的に概念をつかむための真心が感じられる講義であることがずっと感じられ、全体的に非常に満足です。良い講義ありがとうございます😍

受講後に得られること

  • 「公式ドキュメントに基づく」最新の React 文法 🚀

  • スタイル方法 - CSS モジュール、Styled Component、TailwindCSS、MUI 🎨

  • Reducer、Context API、高度なスキルなど、最新の React 仕様 🆙

  • React のパフォーマンスを最適化する方法 🏎️

  • Axios モジュールを使用して API ネットワーク通信を行う方法 🛜

  • React の必須ライブラリ React Router 🚀

  • 最新の React Query ライブラリ、基本から上級スキルまで 📦

  • Vite 環境変数を設定して配布する 🏠

Inflearn受講後のイベント開催中🎉

こんにちは! 🙂
React講義を受講し、特別な特典も受けてください!現在受講後期イベントを進行中です。 🎉
講義を受講した後、率直で丁寧に満ちた後期を作成していただければ講義クーポン1個をプレゼントします!
(先着順20名様にのみ差し上げる限定特典ですので、お早めにご参加ください!)
詳細やイベント参加方法は講義カリキュラムで確認できます! 🔥

React基礎から本番プロジェクト:リンキャンバスで学ぶ完璧なリアクト開発

この講義はリアクトに初めて接する入門者から実務で活用できる高級スキルまで幅広く扱う完璧なリアクト開発過程です。最新のリアクト仕様を公式文書ベースで、コンポーネント設計、状態管理、性能最適化などのコアコンセプトを体系的に習得できます。さらに、単純な文法学習にとどまらず、実際のWebサービスのリンキャンバスプロジェクトを通じて、実務に直接適用できるプロジェクト経験を積むことができます。

公式文書ベース
最新リアクト仕様

リンキャンバスプロジェクト
実戦活用法

合計16時間分の
深い講義!

この講義はリアクトを初めて接する方も簡単に理解できるように簡単かつ明確に説明することが大きな特徴です。また、 16時間以上のしっかりとした分量を誇り、単に基礎を学ぶことにとどまらず、実戦ですぐに活用できる深い知識とスキルを提供する講義です。

公式文書に基づいて最新のリアクトスペックを学習

リアクトで様々なCSSスタイリング方法

Axiosを利用したサーバAPI通信方法

React Routerを使用したクライアントルーティング

メモとReact-Queryでパフォーマンスが最適化されたリアクトWebを構築

Vite環境でReact Webの環境変数を設定およびデプロイする方法

学習内容 - リアクトの基礎

リアクトの基本概念から、JSX文法コンポーネント構造、およびレンダリング方法を学習します。また、 State管理リレンダリングプロセスを理解し、 propsを介したデータ配信、イベント処理方法などを学ぶことができます。 Strictモードなどの必須事項もカバーしています。

セクション1.始める前に

リアクトの基本概念開発環境の構成を学習し、講義のロードマップと必要な教案とソースコードを提供します。

セクション2.プロジェクトを理解する

プロジェクトの作成構造の理解CSRSPAなどのリアクトの重要な概念を学びます。

セクション 3. コンポーネントの理解

コンポーネントの概念、分離基準、および実践を通じてコンポーネントを効果的に管理する方法を学びます。

セクション4. JSX学習

JSX文法JavaScriptの活用法を学習し、リアクトの基本構造を理解します。

セクション 5. コンポーネントの基礎

props 渡し条件付き/リストレンダリングイベント処理などの基本的なコンポーネント機能を習得します。

セクション 6. State 基礎

Stateの概念とリレンダリングステップStrict モードなどの基本的な状態管理手法を学習します。

学習内容 - リアクトの深化

高度な状態管理技術であるReducerImmerを活用したオブジェクトや配列更新useState深化機能を学習します。 useMemouseCallbackによるパフォーマンス最適化イベント処理useRefを使ったコンポーネント参照などを深化学習します。

セクション 7. State 高度なスキル

Immerオブジェクト/配列の更新useStateの高度な活用法を学びます。

セクション8. Reducerによるロジックの統合

Reducer状態管理ロジックを統合し、 Immerを適用してコードの簡潔化を学びます。

セクション 9. イベントの深化

リアクトイベントオブジェクトハングル問題処理など、深化したイベント処理方法を学習します。

セクション10. Context APIの基礎と深化

Context APIを使用してステータスを共有する方法を学び、 Reducerと組み合わせてアプリ拡張テクノロジを学びます。

セクション 11. ライフサイクル & Effect Hook

HooksライフサイクルuseEffectで非同期タスクを処理する方法を学びます。

セクション 12. useRef Hook

useRefの基本的および高度な活用法により、コンポーネント参照状態管理を習得します。

セクション13.パフォーマンスの最適化

useMemouseCallbackを使用して、メモ化パフォーマンスを最適化する方法を学びます。

学習内容 - リンキャンバスプロジェクト

リンキャンバスプロジェクトに基づいて実践的なWeb開発を学びます。 CSS スタイリングReact Routerによるクライアントルーティングの実装、 API 通信React Queryによるデータ管理Vite デプロイなど、実務プロジェクトの全プロセスを習得します。

セクション14. Webプロジェクトを始める

リンキャンバスプロジェクトを作成し、 ESLintPrettierの設定でコードスタイルを整理します。

セクション15.リアクトCSSスタイリング

CSS ModulesStyled ComponentTailwindCSS(tailwind-css)など、さまざまなCSSスタイリング手法を学習します。

セクション 16. [リンキャンバス] React Router

React Router(react-router)クライアントルーティングを実装する方法を学びます。

セクション 17. UI の作成 (with Tailwind CSS)

UIコンポーネントの分離TailwindCSS効率的なUIを構築する方法を学びます。

セクション18. API Server通信

json-serverAxiosAPI通信サーバーとの対話を実装します

セクション 19. Custom Hooks

カスタムフックを自分で作成して活用する方法を学びます。

セクション 20. React Query ライブラリ

React Query(react-query)を使用してデータキャッシュ状態管理を実装する方法を学びます。

セクション21.環境変数の設定とデプロイ

Vercelを使用したデプロイVite環境変数の設定でリアクトアプリを実際にデプロイする方法を学びます。

差別化された選手の知識を参照してください💪

HTMLCSS2

1. HTML&CSS Web開発入門 [無料]

HTMLとCSSを学ぶことで、ウェブサイトの制作に必要な基本的な知識を学ぶことができます。コーディングに初めて触れる際に恐れがないように、本当に分かりやすく説明した講義です。

JavaScript、

2. ES6+最新のJavaScript入門 [無料/有料]

JavaScriptが簡単だが、初めて触れる方は難しく感じるしかありません。だから今回の講義はコーディングに入門される王初歩の方々のために簡単!ちょっと!内容を用意しました。

無料 - YouTube 、有料 - Inflearn(プロジェクトを含む)

ポートフォリオの作成1

3. ポートフォリオサイトを作成し、配布まで!

HTML&CSS、JavaScriptを学んだら、それを活用して直接ポートフォリオサイトを作成して配布してみてください。実際に書くことは私たちのスキルを向上させるのに大きな助けになります。

フロントエンドウィング

フロントエンドウイング[無料]

このレッスンは、モジュールシステム、Webpack、NPMなどのフロントエンド開発者になる前に必ず知っておくべき知識をしっかりと固めることができます。

予想される質問 Q&A

Q)選手知識はどうなるのでしょうか?

HTML、CSS、JavaScriptの基礎だけを知っていても、無難に受講できます。さらに、React、Vueなどのフロントエンドフレームワークを学ぶためには、npm、モジュールシステムなどのフロントエンドエコシステム技術の理解が必要ですが、講義中にこれらの技術を十分に学習できるように言及するので心配しなくてもよく、講義を通じて十分に追いつくことができます。

ちなみに、こういう理由でローンチされた講義がまさに「フロントエンドウィング(無料)」講義です!詳しくはロードマップをご覧ください💪

Q)ソースコードは提供されていますか?

はい!ソースコードを説明する回車でフェッヘットアドレスを提供し、フェッヘットでソースコードを効果的に確認して活用する方法も詳しくご案内いたします。

Q)講義教案は提供されますか?

はい!講義教案が提供されます!

こんな方に
おすすめです

学習対象は
誰でしょう?

  • フロントエンド開発者の就職を準備している人!

  • 公式文書を基に基礎からしっかり学びたい方!

  • React を初めて学ぶ初心者開発者!

  • 実務プロジェクト経験を積みたいReact初心者!

前提知識、
必要でしょうか?

  • HTML&CSS

  • JavaScript

こんにちは
です。

27,871

受講生

1,752

受講レビュー

788

回答

4.9

講座評価

18

講座

こんにちは。

コーディング教育クリエイターのジムコーディングです 🙂

YouTubeでコーディング教育「ジムコーディング GYM CODING」チャンネルを運営しており、

Inflearn(インフラン)教育プラットフォームでプログラミングの知識を共有しています。

私の講義の特徴は、これから始めようとする方々のために、

説明するときは、できるだけ分かりやすく、

お伝えする時は、最大限内容の詰まった説明を心がけています。

常に受講生の立場に立って考えるコーディング教育クリエイターになります。

ありがとうございます。

📹ジムコーディング YouTube チャンネル運営 | 登録者 3万人+

💻 ジムコーディングクラブ | gymcoding.co

🔗 GitHub: https://github.com/gymcoding

🧑‍💻 インスタグラム @gymcoding

📨 メール bruce.lean17@gmail.com

カリキュラム

全体

93件 ∙ (17時間 34分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

120件

4.8

120件の受講レビュー

  • nathomme9758님의 프로필 이미지
    nathomme9758

    受講レビュー 2

    平均評価 5.0

    5

    31% 受講後に作成

    今まさに開発者として成長している者です。 実務でVueを使う必要があり、勉強のためにInflearnを探していたところ、偶然ジムコーディングさんの講義を聴くことになりました。 他の講義(YouTube、Inflearnなど)も聴きましたが、ジムコーディングさんは、滑舌の良い発音で公式ドキュメントに基づいたしっかりとした知識を丁寧に教えてくださるので、とても満足し、Reactまでジムコーディングさんのほぼすべての講義を受講するようになりました。😊😊 フロントエンドの開発者ではありませんが、おかげで本当に多くの成長ができたような気がして、気持ちよく受講レビューを書いています。 今回のReactの講義もとても良いと感じており、今後ローンチされる講義もすべて受講する予定です。 質の高い講義を作成していただきありがとうございます。 他の方々も、この講義だけでなくジムコーディングさんの他の講義も受講して、一緒に成長できればと思います。 ありがとうございます。

    • gymcoding
      知識共有者

      こんにちは!貴重な受講レビューありがとうございます!🥹 VueからReactまで私の講義を着実に受講してくださり、成長されたとのこと、本当に嬉しいです。公式ドキュメントに基づいたアプローチと説明スタイルが役に立ったというお言葉に、大きなやりがいを感じます~!🎉 今後も実務にすぐに適用できる質の高い講義でお返しいたします。引き続き応援しています! ありがとうございます!💪

  • hyejo님의 프로필 이미지
    hyejo

    受講レビュー 1

    平均評価 5.0

    修正済み

    5

    31% 受講後に作成

    ジムコーディングさんのReact完璧マスター講義、本当に楽しく受講しています! 何よりも明るくエネルギー溢れる声のおかげで退屈する暇がなく、退勤後に疲れた状態で聞いても集中し続けられるんです。理解しにくい部分も初心者の視点で丁寧に、目線を合わせて説明してくださるのが本当に大きな助けになりました。ああ、これはこういう流れだったんだ!とすぐに理解できる瞬間がたくさんありました。 React講義がこんなに良いので、自然とNext.js完璧マスター講義も続けて受講する予定です。ジムコーディングさんの講義なら最後まで完走できそうな信頼が生まれました! これからも良い講義をたくさん作ってください!受講する立場として本当に大きな力になっています🙌

    • gymcoding
      知識共有者

      このような貴重な受講レビューを残していただき、本当にありがとうございます! 退勤後の疲れた状態でも集中して聞いてくださっているなんて、本当にやりがいを感じます。講義をする時、いつも「どうすれば退屈せずに、分かりやすく伝えられるだろうか」と悩んでいるのですが、その気持ちが伝わったようで安心しました! React講義に続いてNext.js完璧マスターも受講予定とのこと、本当にありがとうございます。Next.js講義も入門される方のために分かりやすく、そして公式ドキュメントをベースに深く準備しました! これからも良い講義でお応えしていきます。ファイティン!👍

  • spdhsrnvl123님의 프로필 이미지
    spdhsrnvl123

    受講レビュー 7

    平均評価 5.0

    5

    31% 受講後に作成

    フロントエンド開発者に再挑戦しようと退勤後に公式ドキュメントだけ読んでいたのですが、とても退屈でした....でもジムコーディング先生に出会って、難しかった部分もとてもよく理解できるようになり、本当に最高の講義だと思います😢😢 React終了後にNextJSも受講予定です!!! ジムコーディング先生ありがとうございます!!😊

    • kjk12348067144님의 프로필 이미지
      kjk12348067144

      受講レビュー 13

      平均評価 5.0

      5

      31% 受講後に作成

      簡単に教えていると言っても、決して内容が薄いわけではないので、悩まずに始めることをお勧めします。本当に初心者の方や、一度勉強したけど方向性を見失っている方には、ぜひ思い切って受講されると良いかと思います。 Spring bootで卒業制作をしていた時に、画面に表示されるものがどうにもならなくて受講し始めて、画面もきれいに表示されて、すぐに視覚的な結果が出てくるのでとても楽しいです!!連休にしっかり受講して、意欲が出てnestも一度受講してみたいという気持ちになるほど、とても講義の質に満足しています。 (そして、以前他の講義を受けた時は、公式ドキュメントを読むように言われても、量も多すぎて読むのも面倒で、あまり読まなかったのですが、下に参考になるリンクを全て付けてくださっていて、本当に丁寧に準備されているのが感じられるほどです。😊..😊)

      • gymcoding
        知識共有者

        こんにちは、タゲットさん!貴重なレビューありがとうございます〜! 簡単だけど奥深く教えようとする努力を評価していただき、感無量です 🥹 Spring BootからReactに移行されて、画面にすぐ結果が表示される面白さを感じていらっしゃるそうで、何よりです〜! 受講生の皆さんが学習しやすいように関連リンクを記載しましたが、お役に立っているそうで何よりです。 「Next.js 徹底マスター」講座でも良いインサイトと結果を得られると思いますよ〜! 💪 引き続きお役に立てる講座を作成するよう努力します。ありがとうございます!

    • winzzone2님의 프로필 이미지
      winzzone2

      受講レビュー 5

      平均評価 5.0

      修正済み

      5

      41% 受講後に作成

      人それぞれだと思いますが、個人的には講義スタイルがとても合っているので、先生の講義を全部聞いています。 他のReactの講義より深く広く、詳しく説明してくださるので、楽しく勉強しています! 特にスナップショットのように動作するStateの回では感動しましたし、JavaScriptの知識とReactの知識を区別して教えてくださるので、どんな知識が不足しているのか分かるのが満足です。 今後、TypeScriptを活用した講義やAIと結合したコンテンツがあれば嬉しいです。 これからも成長を続けられて、良い講義をたくさんリリースしてくださいね~! (個人的にはNodeの講義が国内にはあまりないので、リリースしていただけると…遠慮がちに言ってみます!) ありがとうございます!YouTubeもよく見ています~

      • gymcoding
        知識共有者

        貴重な受講評ありがとうございます!講義スタイルが合っていたとのこと、本当に嬉しいです。 Reactの深い内容まで一緒に勉強されている姿がやりがいを感じさせますね。特にStateのスナップショット概念で私も力を入れたので、感動していただけたのは感無量です! Node.jsの講義は慎重に検討してみますね 🙂 そして現在、Next.js + Notion CMSを活用したブログ作成講座(with Cursor AI)を準備中ですので、近いうちに良いお知らせができると思います。ご期待ください! 💪 YouTubeも引き続き見ていただきありがとうございます! 💪

    ¥12,200

    gymcodingの他の講座

    知識共有者の他の講座を見てみましょう!

    似ている講座

    同じ分野の他の講座を見てみましょう!