강의

멘토링

로드맵

Inflearn brand logo image
BEST
Programming

/

Front-end

React を作成しながら学ぶ: コンポーネントの設計とリファクタリング

実務で最も多く使用されている React フレームワークを、簡単に、素早く、楽しく学んでみましょう。タスク管理アプリを作成しながら、React の動作原理、コンポーネントの設計、リファクタリングの方法を学びます。

  • captain
3시간 만에 완강할 수 있는 강의 ⏰
장기효
프론트엔드
신입프론트엔드
실습 중심
React
JavaScript
Refactoring

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

こんなことが学べます

  • リアクト

  • JavaScript

  • React

  • ヴィテ

  • NPM

  • Node.js

  • Netlify

実務で最もよく使われているリアクトフレームワーク、
簡単、迅速かつ楽しく学びましょう!

コンセプトからじっくりと、
簡単かつ簡単に

入門者の目の高さから簡単な素材を一つ選び、一緒に作ってみます。一緒に作りながら、概念を一つ一つ簡単かつ短く説明します。講義歴8年に輝く専門講師の講義スキルを信じてみてください。

シニア開発者のノウハウ
すぐそばで

実習比重80%以上退屈する隙がない講義。シニアフロントエンド開発者のコードを書く蜂蜜のヒントと知っておくと、良いFEの知識を真剣に共有します。

こんな方におすすめです! 👨‍💻

就職準備中ですが、実務でリアクトをどう使うのか気になります。実務能力はどのように育てることができますか?

リアクトの基礎文法はわかりますが、それでは何を作るべきですか?実務家たちはどのように学ぶのか気になります。

会社ですぐにプロジェクトを行う必要がありますが、リアクトをしたことはありません。本は一つ見たのに..感がよくないです。

受講後は

  • リアクトの動作原理を一緒に目で確認します。なぜならわざとエラーを出して一緒に直します。

  • コンポーネントをなぜ複数にする必要があるのか、コンポーネントが分かれた時のメリットが何なのか直接目で見て体得します。

  • 実務経験のある開発者はどのようにコーディングしませんか?効果的に効率的にコーディングする方法についてのすべての蜂蜜のヒントを盗みます。

  • 私が作った結果は配布して他人に自慢できます。


このようなことを学びます。

セクション (1) 開発環境の構成ハニーチップ

クラスに必要な開発環境を設定します。コード編集ツールや実務でよく使われるリアクト関連のVSCodeプラグイン、リアクト開発者ツール、GitHub、Prettierなどをご案内します。

セクション (2) プロジェクトの作成 - フォルダ、ファイル構造、設定ファイルガイド

リアクトプロジェクトを作成する方法を学び、最新のフロントエンドビルドツールであるViteでプロジェクトを作成します。

NPM、ESLint、プロジェクトライブラリの管理方法、カスタムコマンドについて学び、全体的なプロジェクト構成の理解度を高めます。

セクション(3) ToDo管理アプリをすばやく作成

リアクトの状態、イベントハンドラなどの基本的な文法で、仕事管理アプリの主な機能を素早く実装します。

実装しながらコードを正確かつ迅速に書くことができるコードを書く方法。生産性を高めるコードショートカットなどをMac、Windowsユーザーの皆様にお知らせします。

セクション (4) リファクタリングで学ぶコンポーネントの設計と状態の定義

コンポーネントをUIの役割ごとに分けながら発生する問題を見てください。複数のコンポーネント間でデータを渡す方法。プロップスと状態をどのように定義し、コンポーネント間で有機的に接続できるかを調べます。

エラーを目で見て、直接一緒に解決しながら動作原理を一緒に調べてください。

セクション(5) アプリケーションのデプロイ

シンプルでかわいいアプリケーションですが、私が作ったことを自慢できるようにサイトに配布してみます。自動展開方法と簡単なビルド命令を学びます。

この講義を作った人👨‍💻

チャン・ギヒョ(キャプテン板橋)

「Inflearnが出会った人」インタビュー

質問がありますか?

Q. フロントエンド開発入門者です。この講義を聞くことができますか?

HTML、JavaScriptの基本的な文法を知っている人なら、すぐに聞いても大丈夫です。もう少しリアクトを深く理解したいなら、以下の学習ロードマップに案内された作りながら学ぶリアクト:基礎を先に聞いて来ればいいですよ🙂

Q. この講義のレベルは初級ですか?中級ですか?タイトルに難しい用語があるので難易度が高いかと心配です。

この講義は中級を狙った講義です。リアクトのuseState()宣言方法とJavaScriptの配列宣言方法だけを知っていれば、大きく問題なく聞くことができます。講義で作成したアプリケーションも、入門者の観点から最小限の機能で簡単に実装できるように準備しました。

授業をたどってみると、自然に実務者視点の思考をたくさん学ぶことができるでしょう:)

Q. この講義を聞いたら、どんなことを聞くのが良いでしょうか?

この講義を聞いたら、以下のロードマップに沿って以降の講義を受講してみることをお勧めします🙂今後リアクト実戦講義、リアクト+タイプスクリプト講義、Next.js講義など様々な講義が追加で制作される予定です。素敵なコンテンツですぐに探してみましょう

受講前の注意

練習環境

  • オペレーティングシステムとバージョン(OS):レッスンでMacを書きますが、Windows関連のショートカットもすべて説明します。

  • 使用ツール:VSCode


学習資料

  • 羽毛で完成したソースコードが提供されています。

  • 講義映像別に追加で学習できる教育資料と教育映像(私が作った映像が多いです^^)を多数提供します。


ウィズバンドバナーコレクション
ドラティバナーコレクション (3)

こんな方に
おすすめです

学習対象は
誰でしょう?

  • リアクト入門者

  • フロントエンド開発者

  • 就職準備生

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

  • JavaScript

  • React の基礎

こんにちは
です。

48,094

受講生

4,668

受講レビュー

3,812

回答

4.9

講座評価

17

講座

인프런에서 8년째 지식을 공유하고 있습니다. 🏠 기술블로그, 📣 트위터, 💻 깃헙

📗 Do it! Vue.js 입문, 쉽게 시작하는 타입스크립트, 나는 네이버 프런트엔드 개발자입니다. 책 3권 집필
📖 Cracking Vue.js, 타입스크립트 핸드북, 웹팩 핸드북. 온라인 무료 가이드북 3권 집필
👨‍💻 캡틴판교의 프론트엔드 개발 유튜브 채널 운영 - 취준생, 주니어 개발자들의 고민을 들을 수 있는 곳
🥤 캡틴판교의 카카오톡 오픈 채팅방 운영 - 프런트엔드 개발 최신 정보와 업계 동료들의 생각과 고민을 들을 수 있는 곳

カリキュラム

全体

33件 ∙ (3時間 20分)

講座掲載日: 
最終更新日: 

受講レビュー

全体

34件

4.9

34件の受講レビュー

  • yjh님의 프로필 이미지
    yjh

    受講レビュー 2

    平均評価 4.5

    4

    100% 受講後に作成

    안녕하세요. 캠틴판교님 리액트 강의 잘 들었습니다. 1. 강의 완강한 입장에서 추천 대상 - 리액트를 해보긴 했는데, 컴포넌트 분리에 대해 기초적인 고민 - 리액트에 있는 package 같은 파일들의 의미를 모른다. 2. 좋았던 점 - 일단 강의 준비를 너무 잘해주셔서 듣기 편했습니다. - 강의 자료에 대한 링크들이 첨부되어 있어서 도움이 됐습니다. - 자칫 그냥 넘어갈 만한, 익스텐션 셋팅 같은 부분도 초반 강의에 들어 있어서 모르던 사람에게는 꿀팁이 될 거 같습니다. - 적당한 강의 시간에 알찬 내용들 (하루만에 완강했습니다) 3. 아쉬운 점 - 강의 자체에 아쉽다기 보단...저는 조금 중급 강의를 원했던 것 같습니다. 제 기준에서는 쉬운 내용이 너무 많아서 아쉬웠습니다. 전체 : 준비가 잘된 강의라고 느꼈습니다. 이제 막 리액트 시작하는 초보였을 때 제가 이 강의를 들었으면 너무 좋았을 것 같습니다. 추후에 중급 강의가 나오면 꼭 수강하고 싶은 마음이 있습니다. [저만 4점이라서 추가적으로 코멘트 달자면] 1. 캡팡님의 강의력 Good 2. 리액트 배웠는데, 뭐가 뭔진 모르고 따라만 쳤다면 무조건 들어주세요 제발 3. 어떻게 보면 강의 난이도를 혼자 높게 생각하고 수강한 저의 실수일 수도 있습니다

    • 장기효(캡틴판교)
      知識共有者

      안녕하세요 yjh님, 진솔한 수강평 남겨주셔서 감사해요 :) 저도 사실 요 강의 설계할 때 적절한 난이도 찾기가 좀 어려웠었는데 말씀하신 것처럼 중급 레벨의 강의는 아닌 것 같아요. 강의 소개 페이지에 안내된 것처럼 초급, 그리고 초급에 가까운 초중급으로 봐주시는게 좋을 것 같습니다. 강의에서 다루는 내용이 리액트 공식 문서에는 Intermediate(중급)으로 나와 있어서 딱 무슨 레벨이다라고 정의하긴 어려운 것 같아요 :) https://react.dev/learn/managing-state 그래도 말씀해 주신 것처럼 저도 이제서야 첫 리액트 강의를 낸거니까요. 이후에 좀 더 난이도 높은 강의들을 준비해 볼게요. 기대 많이해 주세요 감사합니다 :)

    • [저만 4점이라서 추가적으로 코멘트 달자면] 1. 캡팡님의 강의력 Good 2. 리액트 배웠는데, 뭐가 뭔진 모르고 따라만 쳤다면 무조건 들어주세요 제발 3. 어떻게 보면 강의 난이도를 혼자 높게 생각하고 수강한 저의 실수일 수도 있습니다

  • 장 서운님의 프로필 이미지
    장 서운

    受講レビュー 7

    平均評価 4.4

    5

    61% 受講後に作成

    캡틴판교 화이팅

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

      受講レビュー 5

      平均評価 5.0

      5

      100% 受講後に作成

      캡틴판교님 강의는 처음 들어봤습니다 내용이 좋아서 2일만에 완강했네요 ㅎㅎ 강의마다 짧고 굵지만 초보들을 배려하셔서 설명하시는거 보고 감사했습니다. 저는 기본적인 리액트 지식을 가지고 있지만 강의에서 말한 내용과 판교님의 꿀팁을 배워보고 싶어서 들었네요 결과적으로 아주 만족합니다. 빨리 중고급 강의가 나오기를 간절하게 바랍니다 ㅎㅎㅎ 이만 저는 선생님의 Next 강의를 들으러 가볼게요

      • 꿀팁이 마음에 드셨다니 다행이네요. 입문자를 배려한 포인트도 잘 짚어주셔서 감사합니다 :) Next 강의도 재밌게 들으시길! 😁

    • 부드러운 족제비님의 프로필 이미지
      부드러운 족제비

      受講レビュー 3

      平均評価 4.0

      4

      12% 受講後に作成

      • 송수지님의 프로필 이미지
        송수지

        受講レビュー 1

        平均評価 5.0

        5

        100% 受講後に作成

        리액트 기본원리를 간단 명료하게 설명해주셔서 공부에 많은 도움이 돼었습니다 감사합니다!

      ¥5,187

      captainの他の講座

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

      似ている講座

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