강의

멘토링

커뮤니티

BEST
Programming

/

Front-end

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

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

  • gymcoding
이론 실습 모두
프론트엔드개발자
React
react-query
react-router
React Context
TailwindCSS

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

受講後に得られること

  • 「公式ドキュメントに基づく」最新の 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

こんにちは
です。

26,232

受講生

1,576

受講レビュー

663

回答

4.9

講座評価

18

講座

안녕하세요.

코딩 교육 크리에이터 짐코딩 입니다 🙂

유튜브에서 코딩 교육 "짐코딩 GYM CODING"채널을 운영하고 있으며,

인프런 교육 플랫폼에서 프로그래밍 지식을 공유하고 있습니다.

제 강의의 특징은 이제 막 시작하시는 분들을 위하여

설명하고자 할 때는 최대한 쉽게,

알려드리고자 할 때는 최대한 알차게 설명드립니다.

항상 수강생 입장에서 생각하는 코딩 교육 크리에이터가 되겠습니다.

감사합니다.

📹짐코딩 유튜브 채널 운영 | 구독자 25,000+

💻 짐코딩 클럽 | gymcoding.co

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

🧑‍💻 인스타그램 @gymcoding

📨 이메일 bruce.lean17@gmail.com

カリキュラム

全体

93件 ∙ (17時間 34分)

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

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

受講レビュー

全体

107件

4.8

107件の受講レビュー

  • nathomme9758님의 프로필 이미지
    nathomme9758

    受講レビュー 1

    平均評価 5.0

    5

    31% 受講後に作成

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

    • gymcoding
      知識共有者

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

  • sanggusseu2599님의 프로필 이미지
    sanggusseu2599

    受講レビュー 7

    平均評価 5.0

    5

    100% 受講後に作成

    Web開発入門からリアクト完璧マスターコースまで聞いた受講生です! 一行の要約:他の講義がただのコーヒーであれば、この講義はT.O.Pだ。 😎 講師は複雑な概念も簡単に説明してくださり、一人で勉強する人講の欠点である「自分で集中しにくい」を中途半端に直接練習するよう誘導してくださって解決してくださります。講義の途中で「しばらく止めて最初にやってみましょう」という言葉を聞くたびに緩んだ緊張感が再び起こり、主導的に問題を解決するのに大きな助けとなりました。 また、講義の教案と羽毛のリポジトリにコードが体系的に整理されており、実習中にエラーが発生したり、後で再復習するときにも追いつくことは非常に簡単です。 (こんなに一日が整理するのが大変だったのにおかげで内容に集中できました。😁) 特に、講義の内容にとどまらず、一人でも着実に学習を続けていけるように様々なインサイトを提供していただく点と追加および参考映像を見れば、できるだけ多く教えていただきたいと感じて感動しました🤗🤗

    • gymcoding
      知識共有者

      今回の講義で受講生の方々が実習を自らできるように呼吸を最大限調節しました。知っていただくと感慨無量です! リアクト講義は今後も受講生の方々に提供したいインサイトがあれば追加映像をアップロードする予定です💪 ありがとうございます☺️

  • 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

      受講レビュー 12

      平均評価 5.0

      5

      31% 受講後に作成

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

      • gymcoding
        知識共有者

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

    ¥12,336

    gymcodingの他の講座

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

    似ている講座

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