Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
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

こんにちは
です。

24,569

受講生

1,353

受講レビュー

629

回答

4.9

講座評価

17

講座

안녕하세요.
코딩 교육 크리에이터 짐코딩 입니다 🙂

유튜브에서 코딩 교육 "짐코딩 GYM CODING"채널을 운영하고 있으며,
인프런 교육 플랫폼에서 프로그래밍 지식을 공유하고 있습니다.

제 강의의 특징은 이제 막 시작하시는 분들을 위하여
설명하고자 할 때는 최대한 쉽게,
알려드리고자 할 때는 최대한 알차게 설명드립니다.

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

📨 이메일 bruce.lean17@gmail.com
🏋️‍♀️ 헬스타그램 @helinlee.gram
🧑‍💻 코딩스타그램 @gymcoding

カリキュラム

全体

93件 ∙ (17時間 34分)

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

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

受講レビュー

全体

75件

4.9

75件の受講レビュー

  • nathomme님의 프로필 이미지
    nathomme

    受講レビュー 1

    平均評価 5.0

    5

    31% 受講後に作成

    이제 막 개발자로 성장하고 있는 사람입니다. 실무에서 vue를 사용해야했고, 공부하기 위해 인프런을 찾아보는 과정에서 우연하게 짐코딩님의 강의를 듣게 되었습니다. 다른 강의(유튜브,인프런 등)도 들었지만, 짐코딩님은 깔끔한 딕션으로 공식문서 기반한 탄탄한 지식을 꼼꼼하게 알려주셔서 너무너무 만족해서 리액트까지 짐코딩님의 거의 모든 강의를 수강하는 사람이 되었습니다. ㅎㅎ 프론트엔드 개발자는 아니지만 덕분에 정말 많은 성장을 한 것 같아 기분이 좋아 수강평을 남깁니다. 이번 리액트 강의도 너무너무 좋다고 느끼고 있으며, 앞으로 런칭하시는 강의들도 다 들어볼 예정입니다. 양질의 강의 만들어 주셔서 감사드립니다. 다른분들도 이 강의뿐아니라 짐코딩 님의 다른 강의들도 수강하시며 함께 성장하시면 좋겠습니다. 감사합니다.

    • 짐코딩
      知識共有者

      안녕하세요! 소중한 수강평 감사드립니다! 🥹 Vue부터 React까지 제 강의들을 꾸준히 수강해주시고, 성장하셨다니 정말 기쁩니다. 공식 문서 기반의 접근방식과 설명 스타일이 도움되었다는 말씀에 큰 보람을 느껴요~! 🎉 앞으로도 실무에 바로 적용할 수 있는 양질의 강의로 보답하겠습니다. 계속해서 응원하겠습니다! 감사합니다! 💪

  • 상은쓰님의 프로필 이미지
    상은쓰

    受講レビュー 7

    平均評価 5.0

    5

    100% 受講後に作成

    웹 개발 입문부터 리액트 완벽 마스터 과정까지 들은 수강생입니다! 한 줄 요약: 다른 강의가 그냥 커피라면 이 강의는 T.O.P다. 😎 강사님께서는 복잡한 개념도 쉽게 설명해 주시고, 혼자 공부하는 인강의 단점인 '스스로 집중하기 어려움'을 중간중간 직접 실습하도록 유도해 주셔서 해결해 주십니다. 강의 중간에 "잠시 멈추고 먼저 해보세요"라는 말씀을 들을 때마다 느슨해졌던 긴장감이 다시 생기며, 주도적으로 문제를 해결하는 데 큰 도움이 되었습니다. 또한, 강의 교안과 깃헙 저장소에 코드가 체계적으로 잘 정리되어 있어 실습 중 에러가 발생하거나 나중에 다시 복습할 때도 따라가기 매우 수월했습니다. (이렇게 일일이 정리하시기 힘드셨을 텐데 덕분에 내용에 집중할 수 있었습니다. 😁) 특히, 강의 내용에 그치지 않고, 혼자서도 꾸준히 학습을 이어나갈 수 있도록 다양한 인사이트를 제공해 주시는 점과 추가 및 참고 영상들을 보면 최대한 많이 알려주시려고 하는 것이 느껴져서 감동받았습니다🤗🤗

    • 짐코딩
      知識共有者

      이번 강의에서 수강생분들이 실습을 스스로 할 수 있도록 호흡을 최대한 조절했는데요. 알아주시니 감개무량합니다! 리액트 강의는 앞으로도 수강생분들에게 제공하고자 하는 인사이트가 있다면 추가 영상을 업로드할 계획입니다 💪 감사합니다 ☺️

  • 타겟토님의 프로필 이미지
    타겟토

    受講レビュー 12

    平均評価 5.0

    5

    31% 受講後に作成

    쉽게 가르친다고해서 절대 얕게 가르치지 않아서 고민하지말고 저점매수하세요. 정말 입문자들이나 한번 공부했는데 방향성 못잡으시는 분들 그냥 과감하게 투자하셔도 될 것 같습니다. Spring boot로 졸작하다가 화면에 나오는게 너무 터무니 없어서 듣기 시작해서 화면도 예쁘게 나오고 즉각적으로 시각적인 결과물이 나오니까 너무 재밌어요!! 연휴에 빡세게 들어서 욕심내서 nest도 한 번 들어보고 싶다는 욕심이 들정도로 너무 강의 퀄에 만족하고 있습니다. ((그리고 예전에 다른 강의 들을땐 공식문서 읽으라고 해도 양도 너무많고 읽기도 귀찮아서 잘 안읽었는데 밑에 참고할 만한 링크들 싹 다 달아두셔서 진짜 신경 많이 쓴게 느껴질 정도 .ㅎ..ㅎ))

    • 짐코딩
      知識共有者

      안녕하세요, 타겟토님! 소중한 수강평 감사합니다~! 쉽지만 깊이 있게 가르치려는 노력을 알아봐 주셔서 감개무량합니다 🥹 Spring Boot에서 React로 넘어오시면서 화면에 바로 결과물이 나타나는 재미를 느끼신다니 다행이에요~! 수강생 분들이 학습하기 편하도록 관련 링크들을 기재했었는데요 유용하게 쓰고 계시다니 다행입니다. "Next.js 완벽 마스터" 강의에서도 좋은 인사이트과 결과물을 얻을 수 있을거예요~! 💪 계속해서 도움 되는 강의 만들도록 노력하겠습니다. 감사합니다!

  • 곰코드님의 프로필 이미지
    곰코드

    受講レビュー 5

    平均評価 5.0

    修正済み

    5

    41% 受講後に作成

    사람마다 다르겠지만 개인적으로 강의 스타일이 잘 맞아서 선생님 강의 다 듣고 있습니다 다른 React 강의보다 깊고 넓게 자세하게 설명해주셔서 재미있게 공부하고 있습니다! 특히 스냅샷 처럼 동작하는 State 편에서 감동 받았고 자바스크립트 지식과 React 지식을 분별해서 알려주셔서 어떤 지식이 부족한지 알 수 있어서 만족하고 있습니다. 추후에 타입스크립트를 활용한 강의나 AI랑 결합한 컨텐츠도 있으면 좋겠네요. 앞으로도 계속 성장하셔서 좋은 강의 많이 출시 해주세요~! (개인적으로 노드 강의가 국내에는 많이 없어서 출시 해주시면...조심스럽게 말씀드려봅니다!) 감사합니다! 유튜브도 잘 보고 있어요~

    • 짐코딩
      知識共有者

      소중한 수강평 감사드립니다! 강의 스타일이 잘 맞으셨다니 정말 기쁩니다. 리액트의 깊이 있는 내용까지 함께 공부하시는 모습이 보람차네요. 특히 State의 스냅샷 개념에서 저도 힘을 많이 썼는데요 감동을 받으셨다니 감개무량합니다~! Node.js 강의는 조심스럽게 고민해볼게요 🙂 그리고 현재 Next.js + Notion CMS 를 활용한 블로그 만들기 강의(with Cursor AI)를 준비 중이니 조만간 좋은 소식 전해드릴게요. 기대해주세요! 💪 유튜브도 계속 봐주셔서 감사합니다! 💪

  • 조성국님의 프로필 이미지
    조성국

    受講レビュー 1

    平均評価 5.0

    5

    90% 受講後に作成

    꼼꼼하고 깔끔한 강의 ! 타입스크립트, nextjs 강의도 만들어주세요

    • 짐코딩
      知識共有者

      소중한 수강평 감사드립니다! 꼼꼼하고 깔끔하게 강의를 준비한 보람이 있네요. 정말 기쁩니다. 타입스크립트와 Next.js 강의 요청 감사합니다! 그리고 현재 Next.js + Notion CMS 를 활용한 블로그 만들기 강의(with Cursor AI)를 준비 중이니 조만간 좋은 소식 전해드릴게요. 기대해주세요! 💪

¥11,794

gymcodingの他の講座

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

似ている講座

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