강의

멘토링

로드맵

Programming

/

Front-end

初めて出会うReact

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

  • soaple
React
HTML/CSS
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件

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

受講レビュー

全体

454件

4.8

454件の受講レビュー

  • chayuna917584님의 프로필 이미지
    chayuna917584

    受講レビュー 1

    平均評価 5.0

    5

    100% 受講後に作成

    In the f-mode lecture, I was listening to a lecture that read the official documentation, but it was too long, I didn't understand it, and it was too difficult, so I gave up and looked through the React lectures, and I found a gem of a lecture. This is free... This is free...! I was amazed at the teaching ability that it was so easy and friendly to approach. The component bungeoppang is so cute. Jjangjangman He doesn't look away and just gets to the core. Thank you for saving me time. This lecture is a living practice version of the official documentation. Even at double speed, the pronunciation is so accurate that it doesn't get muffled and is easy to hear.

    • soaple
      知識共有者

      Thank you chayuna91 for leaving a review. I tried to explain it as easily as possible, and I am happy and grateful that you understood it. I tried to remove as much difficult content as possible and focused only on building a solid foundation of React, so if you listen to the lecture diligently, you will be able to get closer to React! Thank you for liking the bungeoppang picture that I drew one by one~ I hope you have fun learning!

  • yuri04152449님의 프로필 이미지
    yuri04152449

    受講レビュー 1

    平均評価 5.0

    5

    100% 受講後に作成

    I happened to hear about this lecture, but it was so good! I think it would be great for people who are new to React and have a basic understanding of HTML, CSS, and JavaScript to take this course. There are many advantages, but the best ones are 1) clean and concise explanations, 2) practice-based review of course content, and 3) teaching skills! I've tried to take many courses... but this is the first time I've seen a lecture this thorough! I think it would be good to have React, which I've been exposed to for a long time...ㅎㅎ Thank you so much for the great lecture, and I'll definitely take any new courses you open in the future! I highly recommend it to anyone who hasn't taken it yet.

    • soaple
      知識共有者

      Thank you yrrrrrrrr for leaving a review. I'm so happy that my lecture was a good fit for you~ I don't know when it will be, but please look forward to the next lectureㅎㅎ I hope you continue to have fun developing React!

  • rjh71000066님의 프로필 이미지
    rjh71000066

    受講レビュー 1

    平均評価 5.0

    5

    50% 受講後に作成

    I am currently a student who has completed about 20% of the course! When I did a web project with React in the past, I studied on my own as if I was heading to the bare ground. It was too difficult, and there were many things I didn't understand. Then, when I joined a company, I was going to be in charge of the web, so I studied again and came across the lecture. The lecturer's ability is so great that I even said, "This is a free lecture..?" I don't know why I only saw it now, it's such a good lecture!

    • soaple
      知識共有者

      Thank you, Gibbonmonkey, for leaving a review. I'm so happy that you were able to understand React, which you had found difficult, a little more easily through my lecture. I hope you will complete the remaining lectures, and if you have any questions while taking the class, please leave a question at any time!

  • hek33kr4899님의 프로필 이미지
    hek33kr4899

    受講レビュー 1

    平均評価 5.0

    5

    100% 受講後に作成

    I am a developer working in the field with Swift. I started studying from scratch without knowing anything, and now I am studying React. I don't know much about JS and I don't know much about the web, so I thought it would be good to learn from the basics, so I took the course. It is well organized with the necessary content, and it is interesting to see the code that is different from my coding style. I listened to the course well. Thank you!

    • soaple
      知識共有者

      Thank you, hek33kr, for leaving a review. I'm glad that my lecture was helpful to you~ I hope you continue to have fun developing React!

  • yongwchoi261087님의 프로필 이미지
    yongwchoi261087

    受講レビュー 17

    平均評価 4.8

    5

    31% 受講後に作成

    Q&A Communication is not smooth.

    • soaple
      知識共有者

      Thank you for leaving a review, Yong-won Choi. I haven't left any unanswered questions, but if you could provide the link to the question, I'll check it out and answer it!

公開していない講座のため、受講が制限されます。
非公開講座

似ている講座

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