강의

멘토링

커뮤니티

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

こんにちは
です。

25,819

受講生

1,540

受講レビュー

648

回答

4.9

講座評価

18

講座

안녕하세요.

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

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

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

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

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

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

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

감사합니다.

👨‍🏫인프런 지식 공유자 | 수강생 24,000+ | 강의평점 ️4.9

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

💻 짐코딩 클럽 | gymcoding.co

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

🧑‍💻 인스타그램 @gymcoding

📨 이메일 bruce.lean17@gmail.com

カリキュラム

全体

93件 ∙ (17時間 34分)

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

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

受講レビュー

全体

104件

4.8

104件の受講レビュー

  • nathomme9758님의 프로필 이미지
    nathomme9758

    受講レビュー 1

    平均評価 5.0

    5

    31% 受講後に作成

    I'm someone who is just starting to grow as a developer. I had to use Vue in practice, and in the process of looking for Inflearn to study, I happened to take Jim Coding's lecture. I've taken other lectures (YouTube, Inflearn, etc.) as well, but I was so satisfied with Jim Coding's neat diction and solid knowledge based on official documentation that I became a person who takes almost all of Jim Coding's lectures, even React. 😊😊 I'm not a front-end developer, but I feel like I've grown a lot thanks to you, so I'm leaving a review. I feel that this React lecture is also very, very good, and I plan to take all the lectures that you launch in the future. Thank you for creating high-quality lectures. I hope that others will also take Jim Coding's other lectures as well as this lecture and grow together. Thank you.

    • gymcoding
      知識共有者

      Hello! Thank you for your valuable feedback! 🥹 I'm so glad to hear that you've been consistently taking my courses, from Vue to React, and that you've grown as a result. It's very rewarding to hear that the official documentation-based approach and explanation style have been helpful! 🎉 I will continue to repay you with high-quality lectures that can be applied directly to practical work. I'll keep cheering you on! Thank you! 💪

  • sanggusseu2599님의 프로필 이미지
    sanggusseu2599

    受講レビュー 7

    平均評価 5.0

    5

    100% 受講後に作成

    I am a student who has taken the course from Introduction to Web Development to Mastering React! One-line summary: If other lectures are just coffee, this lecture is T.O.P. 😎 The instructor explains complex concepts easily, and solves the shortcoming of self-study lectures, 'difficulty concentrating on your own' by guiding you to practice directly in between. Every time I hear the words "Stop for a moment and try it first" in the middle of the lecture, the tension that had been loosened returns, and it was a great help in solving problems proactively. In addition, the lecture notes and the code in the GitHub repository are well organized, so it was very easy to follow when errors occurred during practice or when reviewing later. (It must have been hard to organize everything like this, but thanks to you, I was able to focus on the content. 😁) In particular, I was impressed by the fact that you provided various insights so that I could continue to study on my own, not just the lecture content, and that you tried to teach me as much as possible when I saw the additional and reference videos. 🤗🤗

    • gymcoding
      知識共有者

      In this lecture, I tried to control my breathing as much as possible so that students can practice on their own. I am so touched that you understand! I plan to upload additional videos for the React lecture in the future if I have any insights to provide to students. 💪 Thank you ☺️

  • spdhsrnvl123님의 프로필 이미지
    spdhsrnvl123

    受講レビュー 5

    平均評価 5.0

    5

    31% 受講後に作成

    I was trying to challenge myself to become a frontend developer again, so I only read official documentation after work, but it was so boring.... But after encountering Teacher Jim Coding, even the difficult parts became so easy to understand, and I think it's really the best lecture 😭😭 I'm planning to take NextJS after finishing React!!! Thank you, Teacher Jim Coding!! 😊

    • kjk12348067144님의 프로필 이미지
      kjk12348067144

      受講レビュー 12

      平均評価 5.0

      5

      31% 受講後に作成

      Just because it's taught easily doesn't mean it's taught shallowly, so don't hesitate and buy when the price is low. For beginners or those who have studied but can't find direction, I think you can just invest boldly. While working on a graduation project with Spring boot, what appeared on screen was too absurd, so I started listening (to the lecture), and since the screen looks good and I get immediate visual results, it's really fun!! I listened intensely during the holiday, so much so that I want to take the nest lecture too, out of ambition. I am very satisfied with the quality of the lecture. ((And in the past, when I took other lectures, even when told to read official documents, I didn't read them much because there was too much and it was bothersome, but here, they put all the helpful reference links below, so you can really feel how much effort was put in. 😊..😊))

      • gymcoding
        知識共有者

        Hello, Targetto! Thank you for your valuable course review~! I'm deeply touched that you recognized my effort to teach in a way that's easy yet deep 🥹 I'm glad you're enjoying the fun of seeing results appear immediately on the screen as you transitioned from Spring Boot to React~! I included related links to make it easier for students to learn, and I'm glad to hear you're finding them useful. You'll be able to gain good insights and results in the "Next.js Perfect Master" course as well~! 💪 I will continue to strive to create helpful lectures. Thank you!

    • winzzone2님의 프로필 이미지
      winzzone2

      受講レビュー 5

      平均評価 5.0

      修正済み

      5

      41% 受講後に作成

      It varies from person to person, but personally, the lecture style suits me well, so I'm listening to all of the teacher's lectures. Compared to other React lectures, it explains things in more depth and breadth, so I'm enjoying studying! I was especially impressed with the State section that works like a snapshot, and I'm satisfied that you distinguish between JavaScript knowledge and React knowledge, so I can know what knowledge I lack. In the future, it would be great to have lectures using TypeScript or content combined with AI. Please continue to grow and release many good lectures in the future~! (Personally, there aren't many Node lectures in Korea, so I'm cautiously asking if you could release one!) Thank you! I enjoy watching your YouTube channel too~

      • gymcoding
        知識共有者

        Thank you for your valuable feedback! I'm so glad to hear that you enjoyed my teaching style. It's rewarding to see you studying even the in-depth content of React. I put a lot of effort into the concept of State snapshots, so I'm deeply moved that you were touched by it! I will carefully consider creating a Node.js course 🙂 And I'm currently preparing a blog creation course using Next.js + Notion CMS (with Cursor AI), so I'll have good news for you soon. Please look forward to it! 💪 Thank you for continuing to watch my YouTube videos! 💪

    期間限定セール、あと1日日で終了

    ¥58

    24%

    ¥12,337

    gymcodingの他の講座

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

    似ている講座

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