강의

멘토링

로드맵

Inflearn brand logo image
BEST
Programming

/

Front-end

[React 第1部] 作って比較しながら学習するReact

今こそReactをしっかり学びましょう。純粋なJavaScript方式と比較しながら、Reactの特徴と役割を最も簡単に理解できる講座!

  • jeonghwan
실습 중심
실무
핵심원리
React
MVC
JavaScript
Web Application

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

こんなことが学べます

  • ウェブアプリケーション開発演習を通してReact.jsのコア理解

  • 純粋JS開発とReact開発の比較

  • 実習を通したデザインパターン適用の利点

フロント実務最高人気リアクト(React)、
川のひとつでしっかりつかみましょう! 🚩

もし、こんな悩み中なら注目!

ケース1
リアクトが一番人気なんですけど、どこから始めるのかわかりません!

「フロントエンド採用市場で最も人気の高いツールであるリアクト、
しかし、いざ始まろうとしたら、どこからどうすればいいのか感が出ません。」

ケース2
私のリアクト開発プロセスについては確信がありません。

「リアクトを活用してとにかく開発を行ったが、
この方法が果たして効率的であるかどうか感はありません。


リアクト基礎から本番まで、しっかりお知らせします🎯

あの話。私の話みたいなんですか?
この講義の目標は次のとおりです。

  • 結果をJSとリアクトバージョンにし、リアクトの役割と利点を一目でわかります。
  • 実習アプリケーションコーディングと12回の課題を通じて理論を体と頭に身につけることができます。

こんな方が聞くといいですね! 🧑‍🎓

  • リアクトの公式文書を読んだら、まだどこから始めるべきかはっきりとした乱感のタイプ
  • 理論ではなくハローワールドで始まることを好む実行の種類
  • リアクトを使ってみましたが、一体どんな点がいいのか、必ずわかって説明しにくいアルソクダルソットタイプ

私の講義だけの特徴😎

  • React.jsの特徴を明確に理解できます!
    • 純粋なJavaScriptとリアクトの開発を比較しながら、リアクトの特徴をより確実に理解してください。
  • リアクト公式文書を元にした密度のある授業!
    • リアクト公式文書が語る主な概念に基づいて構成された「リアクトコアクラス」です。
  • 徹底した実習中心の講義です!
    • ショッピングモールの検索画面を直接コーディングしながら作成し、12の実習課題を解決しながら身につけることができます。
  • 各映像ごとにGit Branchを用意しました。
    • 実習中に追いつきにくくなったり、実習なしで授業される方のために映像ごとに羽枝を用意しました。
    • 映像ごとに使ったコードをブランチ移動で簡単に見ることができますよ。
  • 復習後すぐに見ることができる講義ノートを提供!
    • 授業で使った講義ノートは全部ブログで入手できますよ。
    • 授業前に全文を軽く読んで始めるといいですね。
    • 授業後も読めばもっといいですよ。

こんな内容を学びます📖

  1. 準備編
    • デザインと要件分析文書を見ながら、授業で作る成果物のあらかじめ紹介します。
    • 純粋なJavaScriptとMVCデザインパターンで結果を作成し、UIライブラリの必要性に気づきます。
  2. 紹介編
    • リアクトのリアクティブと仮想ドームの概念を紹介し、リアクトを使う理由を知っています。
    • リアクト開発に使用されるいくつかのツールの役割と使い方を習得し、実習を準備します。
  3. 使い方1
    • リアクトを利用して結果物を再び最初から実装しながらリアクトの基本概念を習得できます。
    • State、イベント処理、条件付きレンダリング、フォーム、リストとキーなど、リアクトのコア原理を理解できます。
  4. 使用編2(コンポーネント)
    • リアクトコンポーネントを紹介し、前編で作った結果物をリアクトコンポーネントに改善します。
    • クラス/関数コンポーネント、Stateプルアップ、継承、組み合わせなどのコンポーネントを扱いながら遭遇する問題を学ぶことができます。

基本画面

検索結果画面

最近のクエリ画面

次の講義


[リアクト2部]高度なテーマとフック

私を紹介します🧑‍🏫

キム・ジョンファン

ウェブ技術を学び整理するのが好きな実務開発者
Web技術や開発者としての考えを込めた技術ブログを運営しています。

学習した技術と実務で学んだノウハウを集めて発表や講義形式で共有する活動もしています。

優雅な兄弟たちでフロントエンド開発者として働いています。

リアクト技術に関するコンテンツも作成しました。


受講生の方のためのQ&A 🙋

Q. 非専攻者も聞ける講義ですか?

いいえ。Web開発の経験は少し必要です。

Q. なぜリアクトを学ぶべきですか?

最近の採用市場では、モダンなWebフレームワークの知識を持つ開発者を探しています。

最も人気のあるリアクト技術の能力を備えているなら、多くの企業が探している人材になることができるでしょう。

Q.リアクトを学ぶと何がいいですか?

ユーザーインターフェース開発に関する共通の問題をリアクトがかなり部分解決してくれます。

開発者は、もう少しビジネスロジック開発に集中でき、迅速に製品を作り出す力を得ることができます。

Q. 講義を聞く前に、準備すべきことはありますか?

一度でもWeb開発の経験がなければ授業を聞く意味があります。

HTML、JavaScript文法を熟知しているという前提で授業を進めるからです。

まだウェブ基礎が不足している方は、まず学習してから受講していただくことをお勧めします。

Q. 授業内容をどのレベルまで扱いますか?

リアクト公式文書の主な概念と上級ガイドの一部をもとに準備した内容です。

リアクトの中核と言えるところを扱っています。

Q. 受講に関する注意事項はありますか?

クラスで使用できるツールは4つあります。Node.js、開発エディタ、Webブラウザ、Git。

プレビュークラスでも確認できます。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • React公式ドキュメントを読んだものの、未だにどこから始めれば良いか分からない方々

  • 理論よりも「Hello world」(実習)から始めるのを好む方々

  • Reactを使ったことはあるけれど、一体何が良いのか具体的に説明するのが難しい方々

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

  • ウェブ開発に関する基礎知識

こんにちは
です。

13,787

受講生

858

受講レビュー

585

回答

4.8

講座評価

9

講座

👋🏼 안녕하세요 인프런에서 강의하는 김정환입니다.

수업 중 궁금한 사항은 질문 사항에 올려주세요.
매일 한 번씩 확인하고 답변 드리겠습니다.

カリキュラム

全体

96件 ∙ (8時間 44分)

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

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

受講レビュー

全体

114件

4.8

114件の受講レビュー

  • arcturus님의 프로필 이미지
    arcturus

    受講レビュー 8

    平均評価 5.0

    5

    100% 受講後に作成

    이미 react 프로젝트에 참여한 개발 경험이 있는데, 조금 시간이 지나기도 했고, 다시 한번 강의를 들으면서 기초 공부를 하는데에 많은 도움이 되었습니다. 감사합니다.

    • Go9님의 프로필 이미지
      Go9

      受講レビュー 3

      平均評価 5.0

      5

      100% 受講後に作成

      리액트를 처음 공부하며 어떻게 시작해야 할지 어려움이 있었는데, 간결하게 강의를 구성해주신 덕분에 많은 도움을 받고 있습니다. 한 강의 당, 그리고 전체 강의 구성이 길지 않은 덕에 여러 번 반복해서 볼 수 있을 것 같다는 점도 장점입니다 :) 한편, 바닐라 자바스크립트도 다뤄주심으로 리액트가 어떤 문제점을 해결하기 위해 나타난 프레임워크인지 파악하기에 수월했습니다. 하지만 아직 둘 다 어려운 건 마찬가지네요.. ㅎ_ㅎ 이후로도 여러 번 보고 구현해가며 프론트엔드 개발 기초를 잘 다지도록 해야겠습니다. 좋은 강의 감사합니다.

      • 짱구님의 프로필 이미지
        짱구

        受講レビュー 9

        平均評価 4.8

        4

        100% 受講後に作成

        - 장점!!! 1. 강의에서 React 공식 문서의 "주요 개념"에서 다루는 모든 내용들을 다룬다. 단순히, 공식문서로 학습하는 것보다 만들면서 학습하다보니, 각 개념들의 필요성들에 대해서 깊게 이해할 수있었다. 2. 공식문서에는 중요성이 떨어진다고 판단했던지 크게 언급하지 않고 넘어가는 내용들까지 사용해보면서 왜 이런 방식이 덜 권장되는지에 대해서도 알 수있었다. 3. 단순히, 리엑트라는 개념을 넘어서 추상화의 필요성에 대해서도 학습할 수 있었다. - 단점은 아니고.. 강의 중 어려웠던 점!!! 1. MVC 패턴과 추상화 대한 이해도가 약한 필자는 바닐라 JS 파트 처음 들을 때, 코드 보고 심한 현타가 왔다. => 내 수준에서는 코드가 너무 어려웠다 ㅠ.ㅠ 하지만, 꾸역꾸역 참아가면서, 종이로 로직을 써가면서 코드를 내 것으로 만들어가면, 점점 성장해가는 자신의 모습을 발견할 수 있다. 만약, 필자와 같은 어려움을 겪는 수강생이라면, 리엑트 편을 먼저 보고, 바닐라 JS 편을 접근해본다면, 더 쉽게 코드가 이해될 수 있다. 적어도 필자는 그랬다. - 총평!!! 솔직히, 리엑트를 사용하기는 했지만, 내 실력은 거품 위에 떠있는 것같이 깊이가 없었는데, 이 강의를 통해서, 리엑트를 더 깊게 이해할 수있었다. 리엑트를 시작하는 모든 사람들에게 추천한다.

        • 김정환
          知識共有者

          저도 수업준비하면서 초반부가 어려우실것 같다는 우려를 했는데요. 어려운게 맞습니다 ㅜㅜ 그래도 끝까지 들어주셔서 고맙습니다.

      • 금융권개발자님의 프로필 이미지
        금융권개발자

        受講レビュー 36

        平均評価 5.0

        5

        100% 受講後に作成

        추천합니다. 리액트 개념에 대해서 종합적으로 다루는 강의입니다. 리액트 훅까지는 많이 다루지 않습니다. 리액트 훅은 2부에서 다루니 참고하시길 바랍니다.

        • 김정환
          知識共有者

          백엔드개발님 피드백 남겨 주셔서 고맙습니다. 좋은 하루 보내세요.

      • 김경한님의 프로필 이미지
        김경한

        受講レビュー 2

        平均評価 5.0

        5

        100% 受講後に作成

        좋은 강의지만.. 좀 어렵습니다.. 역시 반복해야겠지요.. 화이팅!

      ¥6,526

      jeonghwanの他の講座

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

      似ている講座

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