강의

멘토링

커뮤니티

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 の基礎

こんにちは
です。

49,000

受講生

4,799

受講レビュー

3,815

回答

4.9

講座評価

19

講座

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

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

カリキュラム

全体

33件 ∙ (3時間 20分)

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

受講レビュー

全体

39件

4.9

39件の受講レビュー

  • yjh0155님의 프로필 이미지
    yjh0155

    受講レビュー 2

    平均評価 4.5

    4

    100% 受講後に作成

    こんにちは。カムテン板橋様リアクト川のよく聞きました。 1. 講義頑強な立場でおすすめ対象 -リアクトをやってみたところ、コンポーネントの分離について基本的な悩み - リアクトにあるpackageのようなファイルの意味を知らない。 2. 良かった点 - 一度講義の準備をとてもよくしてくれて聞きやすかった。 - 講義資料へのリンクが添付されていて役に立ちました。 - ややもちょうど進むだけの、エクステンションセッティングのような部分も序盤講義に入っていて知らなかった人には蜂蜜チップになるようです。 - 適度な講義の時間に充実した内容(一日で頑張りました) 3. 残念な点 - 講義自体に残念だというより…私は少し中級講義をしたかったようです。私の基準では、簡単な内容が多すぎて残念でした。 全体:準備が整った講義だと感じました。今、リアクトを始める初心者だったとき、私がこのレッスンを聞いたらとても良かったようです。 今後中級講義が出たらぜひ受講したい気持ちがあります。 [私だけ4点なので追加的にコメントするなら] 1. キャプパン様の講義力 Good 2.リアクトを学びましたが、何が何なのかわからず、ついてだけ打ったら無条件に聞いてください 3. どうやって見ると、講義の難易度を一人で高く考え、受講した私の間違いかもしれません。

    • captain
      知識共有者

      こんにちはyjhさん、率直な受講評を残していただきありがとうございます :) 私も実は要講の設計時に適切な難易度探しがちょっと難しかったのにおっしゃったように中級レベルの講義ではないようです。 講義紹介ページに案内されたように初級、そして初級に近い小中級で見ていただきたいと思います。 ) https://react.dev/learn/managing-state それでも教えてくれたように、私ももう初めてリアクト講義を出したんですから。

    • [私だけ4点なので追加的にコメントするなら] 1. キャプパン様の講義力 Good 2.リアクトを学びましたが、何が何なのか分からなくてただ打ったら無条件に聞いてください 3. どうやって見ると、講義の難易度を一人で高く考え、受講した私の間違いかもしれません。

  • seeeun님의 프로필 이미지
    seeeun

    受講レビュー 8

    平均評価 4.4

    5

    61% 受講後に作成

    キャプテン板橋ファイティング

    • winzzone2님의 프로필 이미지
      winzzone2

      受講レビュー 5

      平均評価 5.0

      5

      100% 受講後に作成

      キャプテン板橋の講義は初めて聞いた内容が好きで2日で頑張りましたㅎㅎ 講義ごとに短くて太いですが、初心者に気をつけて説明してくれてありがとう。 私は基本的なリアクトの知識を持っていますが、講義で言った内容と板教様の蜂蜜のヒントを学びたいと聞きましたが、結果的に非常に満足しています。 早く中高級講義が出てくることを切に願っていますㅎㅎㅎ これだけ私は先生の次の講義を聞きに行きます。

      • captain
        知識共有者

        蜂蜜のヒントが気に入ったのは幸いですね。入門者に配慮したポイントもよくお会いいただきありがとうございます:) Next 講義も楽しく聞いてください! 😁

    • namdong98978492님의 프로필 이미지
      namdong98978492

      受講レビュー 3

      平均評価 4.0

      4

      12% 受講後に作成

      • mily921558님의 프로필 이미지
        mily921558

        受講レビュー 1

        平均評価 5.0

        5

        100% 受講後に作成

        リアクトの基本原理を簡単明瞭に説明していただき、勉強に多くのお役に立ちましたありがとうございます!

        • captain
          知識共有者

          ありがとう、スジ様:)

      ¥5,474

      captainの他の講座

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

      似ている講座

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