강의

멘토링

커뮤니티

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,862 learners

  • soaple
React
HTML/CSS
JavaScript

Reviews from Early Learners

What you will gain after the course

  • 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

    Tôi đang nghe một bài giảng đọc tài liệu chính thống trong một bài giảng f-mo, nhưng nó quá dài, quá khó hiểu và tôi đã bỏ cuộc. Khi xem qua các bài giảng về React, tôi thấy một bài giảng giống như một viên ngọc quý. . Cái này miễn phí... Cái này miễn phí...! Tôi rất ấn tượng bởi khả năng giảng dạy có thể tiếp cận nó một cách dễ dàng và thân thiện như vậy. Thành phần bungeoppang dễ thương quá Jjangjjangman Nó không cần quá nhiều sự chú ý và chỉ đánh vào những điểm chính. Cảm ơn bạn đã tiết kiệm thời gian cho tôi. Bài giảng này là một phiên bản thực hành sống động của tài liệu chính thức. Ngay cả khi nói trong bụng, cách phát âm vẫn chính xác đến mức bạn có thể nghe rõ mà không bị bóp nghẹt.

    • soaple
      Instructor

      Chayuna91, cảm ơn bạn đã để lại đánh giá. Tôi đã cố gắng hết sức để giải thích nó một cách đơn giản nhất có thể, và tôi tự hào và biết ơn vì bạn đã nhận ra điều đó. Chúng tôi đã loại bỏ càng nhiều nội dung khó càng tốt và chỉ tập trung vào việc củng cố những kiến ​​​​thức cơ bản về React, vì vậy nếu bạn nghe kỹ bài giảng, bạn sẽ có thể tiến gần hơn đến React! Cảm ơn bạn đã thích hình minh họa Bungeoppan được vẽ từng bước một~ Chúc bạn học tập vui vẻ!

  • yuri04152449님의 프로필 이미지
    yuri04152449

    Reviews 1

    Average Rating 5.0

    5

    100% enrolled

    Đây là một bài giảng tôi tình cờ học được và tôi yêu thích nó! Nếu bạn chưa quen với React, sẽ rất tuyệt nếu bạn tham gia khóa học với kiến ​​thức cơ bản về HTML, CSS và JavaScript. Có nhiều ưu điểm, nhưng trong số đó, 1) giải thích rõ ràng và rõ ràng, 2) xem xét nội dung khóa học dựa trên thực hành và 3) khả năng giảng dạy. Tôi đã thử tham gia một số khóa học, nhưng đây là khóa học đầu tiên tôi thực hiện một cách nghiêm túc như vậy! Tôi nghĩ sẽ thật tuyệt nếu có React, thứ mà tôi đã thấy từ lâu rồi... Haha. Cảm ơn bạn rất nhiều vì bài giảng tuyệt vời. Tôi chắc chắn sẽ nghe nó nếu bạn mở một bài giảng mới trong tương lai. ! Nếu bạn chưa nghe nó, tôi thực sự khuyên bạn nên nghe nó.

    • soaple
      Instructor

      yrrrrrrrr, cảm ơn bạn đã để lại đánh giá. Tôi rất tự hào vì bạn thấy bài giảng của tôi rất phù hợp. Tôi không biết khi nào nó sẽ diễn ra, nhưng xin hãy chờ đợi bài giảng tiếp theo. Chúng tôi hy vọng bạn tiếp tục vui vẻ khi phát triển React!

  • monkey2님의 프로필 이미지
    monkey2

    Reviews 1

    Average Rating 5.0

    5

    50% enrolled

    Hiện tại đã có khoảng 20% ​​học sinh đăng ký! Trước đây, khi làm một dự án web với React, tôi học một mình, cảm giác như đang bắt đầu lại từ đầu. Điều đó thật khó khăn và có rất nhiều điều tôi không hiểu. Sau đó, khi tôi định đảm nhận mảng web khi gia nhập công ty, tôi bắt đầu học lại và tình cờ xem được các bài giảng. Kỹ năng giảng dạy của anh ấy tuyệt vời đến mức mọi người nói: "Đây là khóa học miễn phí..?" Bài giảng hay quá không hiểu sao bây giờ tôi mới xem!

    • soaple
      Instructor

      Gibbon, cảm ơn bạn đã để lại đánh giá. Tôi rất tự hào vì bài giảng của tôi đã giúp bạn hiểu React, điều mà trước đây bạn thấy khó, giờ đã dễ dàng hơn một chút. Tôi hy vọng bạn hoàn thành các bài giảng còn lại và nếu có thắc mắc gì trong suốt khóa học, vui lòng để lại câu hỏi bất cứ lúc nào!

  • hek33kr4899님의 프로필 이미지
    hek33kr4899

    Reviews 1

    Average Rating 5.0

    5

    100% enrolled

    Tôi là một nhà phát triển làm việc trong Swift. Tôi bắt đầu học mà không biết gì cả, và bây giờ tôi đang học React. Vì tôi không biết nhiều về JS hoặc web nên tôi nghĩ sẽ rất tốt nếu bắt đầu từ những điều cơ bản, vì vậy tôi đã tham gia khóa học này. Khóa học này có cấu trúc tốt với nội dung cần thiết và thật thú vị khi thấy mã có sự khác biệt. từ phong cách mã hóa của tôi. Tôi rất thích bài giảng. Cảm ơn bạn!

    • soaple
      Instructor

      Cảm ơn hek33kr đã để lại đánh giá. Tôi rất vui vì bài giảng của tôi hữu ích! Chúng tôi hy vọng bạn tiếp tục vui vẻ khi phát triển React!

  • yongwchoi261087님의 프로필 이미지
    yongwchoi261087

    Reviews 27

    Average Rating 4.9

    5

    31% enrolled

    Giao tiếp giữa câu hỏi và câu trả lời không được suôn sẻ.

    • soaple
      Instructor

      Cảm ơn bạn, Yongwon Choi, đã để lại đánh giá. Cho đến nay, không có câu hỏi nào tôi chưa trả lời, vì vậy nếu bạn gửi cho tôi liên kết đến câu hỏi của bạn, tôi sẽ kiểm tra và trả lời nó!

Similar courses

Explore other courses in the same field!