강의

멘토링

커뮤니티

Programming

/

Front-end

初めて出会うReact

JavaScriptとCSSの基礎文法とともに、Reactの基礎を着実に身につけることができます。

難易度 入門

受講期間 無制限

  • soaple
React
React
HTML/CSS
HTML/CSS
JavaScript
JavaScript
React
React
HTML/CSS
HTML/CSS
JavaScript
JavaScript

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

受講後に得られること

  • JavaScriptの基本文法

  • CSSの基本構文

  • Reactの基礎をしっかり固める

  • ミニプロジェクトを通じたウェブアプリケーション開発

🚨講義提供中止案内🚨

こんにちは、ソープルです。
これまで2万人を超える人が愛してくれました
「初めて会ったリアクト」講義の Inflearn 提供が中断されました。
今後は下のリンクから講義を受講していただけます😀

きちんとした講義資料、細かい説明で
簡単に学ぶリアクト講義です。 👨‍🏫

リアクトの世界へ
招待します💫

リアクトは、メタで作成されたオープンソースのJavaScript UIライブラリです。
現在、Webアプリケーションの開発に最も人気があり、
クイックアップデートとレンダリング速度、コンポーネントベースの構造など、多くの利点があります。


講義の特徴

お知らせします🔎

  • JavaScript 基礎文法を習得します。
  • CSSの概念とよく使われる属性を学びます。
  • リアクトの基礎概念を築き、使い方を学びます。
  • ミニプロジェクトを通じてリアルリアクトアプリケーションを開発します。
  • 入門者のためにHTML、CSS、JSの基礎内容が含まれています。


講義を本としても
会えますよ! 📖

講義を本でも見ることができるように
講義内容をそっくり本に収めました。
ビデオ講義で本を見ながら
リアクトの世界に陥りましょう!

🌟噂の名江の🌟

ソープルの初めて出会ったリアクト[2版]
-リアクト基礎概念整理から実習まで


講義が終わっても
質問&回答を提供💬

講義をすべて受講した後もリアクトで開発をしながら起こる気になることをすべて解決します。
知識共有者ソープルによって作成されたフロントエンドの知識ポータルFrontOverflowにいつでも質問を残してください!

🔗 FrontOverflowにアクセス


講義を聞いた後、受講生の変化🙋‍♂️

JS基礎文法について
わかります!

よく使用されるCSS
わかります!

リアクトの基礎
よく固めることができます!

本番プロジェクトの経験
積み重ねることができます。


学習内容を垣間見る 📚

セクション0 [準備]

  • HTML、CSSの概念とJavaScriptの基礎文法について学び、実習のための環境を設定します。

セクション1、2 [リアクトの紹介、はじめに]

  • リアクトの紹介、長所と短所について学びます。
  • リアクトを直接連動する方法とcreate-react-appについて学習します。

セクション3 [JSX]

  • JSXの定義と役割、そして使い方について学びます。

セクション 4 [Rendering Elements]

  • リアクト要素の定義、特徴、レンダリング方法を学びます。

セクション 5 [Components and Props]

  • リアクトコンポーネントとPropsの定義と使い方を学びます。

セクション 6 [State and Lifecycle]

  • Stateの概念とコンポーネントLifecycleについて学びます。

セクション7 [Hooks]

  • リアクトフックの概念と、代表的なフックとカスタムフックについて学びます。

セクション 8 [Handling Events]

  • リアクトでイベントを扱う方法を学びます。

セクション 9 [Conditional Rendering]

  • 条件付きレンダリングの概念と実装方法について学習します。

セクション10 [リストとキー]

  • リストとキーの概念と実際のレンダリング方法について学びます。

セクション 11 [Forms]

  • さまざまなフォームと制御コンポーネントについて学習します。

セクション 12 [Lifting State Up]

  • Shared Stateとコンポーネント間のStateを共有する方法を学びます。

セクション 13 [Composition vs Inheritance]

  • さまざまなコンポーネントの合成方法と継承の意味について学びます。

セクション 14 [Context]

  • Contextの概念とContext APIについて学びます。

セクション 15 [Styling]

  • 代表的なCSSの属性とstyled-componentsについて学びます。

セクション16 [ミニプロジェクト]

  • これまでに学んだ内容をまとめてミニブログをまとめてみましょう。

予想される質問 Q&A 💬

Q. JavaScriptをよく知らなくても聞ける講義ですか?

はい! JavaScriptについてよく知らない方でも、講義で基礎文法を含めて説明させていただくので、関係なく聞くことができます。

Q. CSSについてよく知らなくても聞ける講義ですか?

はい、CSSの代表的な属性を一緒に扱うので、よくわからなくても講義を受講できます。

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

リアクトを使用すると、必要に応じてWebアプリケーションを開発できます。


学習関連資料💡

3強~15強。練習ソースコード

リアクト v17 ソースコード
https://github.com/soaple/first-met-react-practice

リアクト v18 ソースコード
https://github.com/soaple/first-met-react-practice-v18

16強。ミニブログソースコード

https://github.com/soaple/mini-blog

こんな方に
おすすめです

学習対象は
誰でしょう?

  • ウェブアプリケーション開発に興味のある方

  • Reactを初めて触る方

こんにちは
です。

안녕하세요, 소플입니다.

2025년 3월부로 인프런에서의 지식공유자 활동을 마무리하고 새로운 출발을 합니다.

앞으로는 아래 사이트에서 제 강의와 컨텐츠들을 만나보실 수 있습니다.

소플이 만든 프론트엔드 지식 포털 - FrontOverflow

カリキュラム

全体

0件

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

受講レビュー

全体

457件

4.8

457件の受講レビュー

  • chayuna917584님의 프로필 이미지
    chayuna917584

    受講レビュー 1

    平均評価 5.0

    5

    100% 受講後に作成

    f母講義で公式文書読んでくれる講義を聞いて時間も長すぎて理解もできず、とても難しくて殴られてリアクト講義を後にした中に宝石のような講義を発見しました。これは無料です...これは無料です....! こんなに簡単に身近に接近できるなんて講義力に感心しました。コンポーネントのパンパンがとてもかわいいです。 一目で売ってコアだけを刺します。時間を節約していただきありがとうございます。この講義は生きている公式文書の練習版です。 倍速にしても発音があまりにも正確で、ムンギョジジなくよく聞こえます。

    • soaple
      知識共有者

      chayuna91さんの受講評をお寄せいただきありがとうございます。 それなりにできるだけ簡単に説明しようと努力しましたが、調べてくださると嬉しくも感謝しますね。 難しい内容はできるだけ軽減し、ただリアクトの基礎をしっかり固めることに焦点を当てたので、一生懸命講義を聞くとリアクトに近づくことができるでしょう! 一汗一汗グリーンパンパンの絵も好きになってくれてありがとう〜 楽しい学習になってください!

  • yuri04152449님의 프로필 이미지
    yuri04152449

    受講レビュー 1

    平均評価 5.0

    5

    100% 受講後に作成

    偶然に聞くことになった講義なのにとても良かったです!で受講した内容 復習 3) 講義力を長所に挙げることができるようです!講座を受講しようとしましたが、頑張った講義はこれが初めてです!強くお勧めします。

    • soaple
      知識共有者

      yrrrrrrrrさんの受講評を残していただきありがとうございます。 私の講義はうまくいきました、とても嬉しいです〜 いつになるかはわかりませんが、次の講義も楽しみにしてくださいㅎㅎ これからも楽しいリアクト開発になりますように!

  • monkey2님의 프로필 이미지
    monkey2

    受講レビュー 1

    平均評価 5.0

    5

    50% 受講後に作成

    現在20%程度受講した学生です!以前にリアクトでウェブプロジェクトをした時、一番地にヘディング感覚で一人で勉強しながらしました。とても難しかったし、わからないことが多かったです。だから今回会社に入りながらウェブを引き受ける予定だから、再び勉強をしながら講義に触れることになりました。 "これは無料の講義だと言われています。なぜこれを今見たのか分からないほど良い講義です!

    • soaple
      知識共有者

      長袖猿の受講評を残してくれてありがとう。 私の講義を通して、これまで難しく感じられたリアクトを少しもっと簡単に理解することになったなんてすごく嬉しいですね~ 今後残された講義もぜひ頑張ってほしい、受講中気になる点があれば、いつでも質問に残してください!

  • hek33kr4899님의 프로필 이미지
    hek33kr4899

    受講レビュー 1

    平均評価 5.0

    5

    100% 受講後に作成

    Swiftで現業で働いている開発者です。何も知らない状態で頭から押し込んで勉強し始め、今はリアクトを勉強するようになりました。 JSもよく分からないし、Webについてよく知らないので、基礎から聞くといいと思い、講義を受講することになったのに必要な内容でよく構成されていて、私のコーディングスタイルと違うコードを見ると不思議ですね。 講義よく聞いてくれてありがとう!

    • soaple
      知識共有者

      hek33krさんの受講評を残してくれてありがとう。 私の講義が役に立ったと思います。 これからも楽しいリアクト開発になりますように!

  • yongwchoi261087님의 프로필 이미지
    yongwchoi261087

    受講レビュー 32

    平均評価 4.9

    5

    31% 受講後に作成

    質問と回答のやり取りがスムーズにできません。

    • soaple
      知識共有者

      チェ・ヨンウォンのスカンピョンを残してくれてありがとう。 これまで私が回答しなかった質問はありませんが、質問リンクを教えてください。

似ている講座

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