강의

멘토링

로드맵

Programming

/

Front-end

First Encounter with React

You can build a solid foundation in React, along with the basics of JavaScript and CSS syntax.

(4.8) 456 reviews

19,908 learners

  • soaple
React
HTML/CSS
JavaScript

Reviews from Early Learners

What you will learn!

  • JavaScript Basic Syntax

  • Basic CSS Syntax

  • Solidifying the Fundamentals of React

  • Web application development through mini-projects

🚨 Notice of suspension of lecture provision 🚨

Hello, this is Sopl.
Over 20,000 people have loved it so far
Inflearn's offering of the course ' First Encounter with React ' has been discontinued.
From now on, you can take the course through the link below 😀

With neat lecture materials and detailed explanations
This is an easy-to-learn React course. 👨‍🏫

Into the world of React
You are invited 💫

React is an open source JavaScript UI library created by Meta.
It is currently the most widely used in web application development.
It has many advantages, such as fast updates, rendering speed, and component-based structure.


Features of the lecture

Let me tell you 🔎

  • Learn basic JavaScript grammar.
  • Learn CSS concepts and frequently used properties.
  • Build a foundation of React concepts and learn how to use it.
  • Develop real-world React applications through mini-projects.
  • For beginners, it includes basics of HTML, CSS, and JS.


The lecture is also available as a book
You can meet me! 📖

So that you can also view the lectures in book form
The lecture content is included in its entirety in the book.
Reading the book along with the video lectures
Dive into the world of React!

🌟 Famous lecture 🌟

Sopl's First Encounter with React [2nd Edition]
- From basic React concepts to practical training


Even after the lecture is over
Questions & Answers Provided 💬

We will answer any questions you may have while developing with React even after taking all the lectures.
Feel free to ask questions at any time on FrontOverflow, the front-end knowledge portal created by knowledge sharer Sopl!

🔗 Visit FrontOverflow


Changes in students after attending the lecture 🙋‍♂️

About JS basic grammar
I can understand!

Frequently used CSS
I can understand!

The basics of React
You can chop it well!

Experience in real-world projects
You can stack them.


A sneak peek of what you'll learn 📚

Section 0 [Getting Ready]

  • Learn about HTML, CSS concepts and basic JavaScript grammar, and set up an environment for practice.

Section 1, 2 [Introduction to React, Getting Started]

  • Learn about React, its pros and cons.
  • Learn how to integrate React directly and about create-react-app.

Section 3 [JSX]

  • Learn about what JSX is, what it does, and how to use it.

Section 4 [Rendering Elements]

  • Learn about the definition, features, and rendering methods of React elements.

Section 5 [Components and Props]

  • Learn about the definition and usage of React components and Props.

Section 6 [State and Lifecycle]

  • Learn about the concept of State and the component Lifecycle.

Section 7 [Hooks]

  • Learn about the concept of React hooks, representative hooks, and custom hooks.

Section 8 [Handling Events]

  • Learn how to handle events in React.

Section 9 [Conditional Rendering]

  • Learn about the concept of conditional rendering and how to implement it.

Section 10 [Lists and Keys]

  • Learn about the concept of lists and keys, and how to actually render them.

Section 11 [Forms]

  • Learn about various Forms and control components.

Section 12 [Lifting State Up]

  • Learn about Shared State and how to share state between components.

Section 13 [Composition vs Inheritance]

  • Learn about different ways to compose components and the implications of inheritance.

Section 14 [Context]

  • Learn about the concept of Context and the Context API.

Section 15 [Styling]

  • Learn about representative CSS properties and styled-components.

Section 16 [Mini Project]

  • Let's create a mini blog by summarizing what we've learned so far.

Expected Questions Q&A 💬

Q. Is this a lecture that I can take even if I don't know much about JavaScript ?

Yes! Even if you don't know much about JavaScript, you can still listen to the lecture because it explains the basic grammar.

Q. Is this a lecture that I can take even if I don't know much about CSS?

Yes, you can take the course even if you don't know much about it, because it covers the representative properties of CSS.

Q. What are the benefits of learning React?

React lets me develop web applications the way I want.


Learning Materials 💡

Lessons 3 - 15. Practice source code

React v17 source code
https://github.com/soaple/first-met-react-practice

React v18 source code
https://github.com/soaple/first-met-react-practice-v18

Round of 16. Mini blog source code

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

Recommended for
these people

Who is this course right for?

  • Anyone interested in web application development

  • For those who are new to React

Hello
This is

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

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

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

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

Curriculum

All

0 lectures

Published: 
Last updated: 

Reviews

All

456 reviews

4.8

456 reviews

  • chayuna917584님의 프로필 이미지
    chayuna917584

    Reviews 1

    Average Rating 5.0

    5

    100% enrolled

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

    • soaple
      Instructor

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

  • yuri04152449님의 프로필 이미지
    yuri04152449

    Reviews 1

    Average Rating 5.0

    5

    100% enrolled

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

    • soaple
      Instructor

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

  • rjh71000066님의 프로필 이미지
    rjh71000066

    Reviews 1

    Average Rating 5.0

    5

    50% enrolled

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

    • soaple
      Instructor

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

  • hek33kr4899님의 프로필 이미지
    hek33kr4899

    Reviews 1

    Average Rating 5.0

    5

    100% enrolled

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

    • soaple
      Instructor

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

  • yongwchoi261087님의 프로필 이미지
    yongwchoi261087

    Reviews 17

    Average Rating 4.8

    5

    31% enrolled

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

    • soaple
      Instructor

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

Access is restricted to non-public courses.
Private Course

Similar courses

Explore other courses in the same field!