강의

멘토링

로드맵

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) 454 reviews

19,913 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

454 reviews

4.8

454 reviews

  • chayuna91님의 프로필 이미지
    chayuna91

    Reviews 1

    Average Rating 5.0

    5

    100% enrolled

    f모 강의에서 공식문서 읽어주는 강의를 듣다가 시간도 너무 길고 이해도 안되고 너무 어려워서 때려치고 리액트 강의를 뒤적이던 중에 보석 같은 강의를 발견했습니다. 이게 무료라니.. 이게 무료라니잇....! 이렇게 쉽게 친근하게 접근할 수 있다니 강의력에 감탄했습니다. 컴포넌트 붕어빵이 너무 귀여워요 짱짱맨 한눈 안팔고 핵심만 찔러줍니다. 시간절약 시켜주셔서 감사합니다. 이 강의는 살아있는 공식문서 실습판입니다. 배속으로 해도 발음이 워낙 정확해서 뭉개지지않고 잘들립니다.

    • Inje Lee (소플)
      Instructor

      chayuna91님 수강평 남겨주셔서 감사합니다. 나름대로 최대한 쉽게 설명하려고 노력했는데, 알아봐주시니 뿌듯하기도 하고 감사하네요. 어려운 내용은 최대한 덜어내고 오직 리액트의 기초를 탄탄하게 다지는 것에 초점을 맞췄으니, 열심히 강의를 들으시면 리액트와 가까워질 수 있을 겁니다! 한 땀 한 땀 그린 붕어빵 그림도 좋아해 주셔서 감사합니다~ 즐거운 학습 되시기 바랍니다!

  • yrrrrrrrr님의 프로필 이미지
    yrrrrrrrr

    Reviews 1

    Average Rating 5.0

    5

    100% enrolled

    우연히 듣게 된 강의인데 너무 좋았습니다! 리액트 처음 접하시는 분들은 html, css, 자바스크립트 간단하게 아는 상태에서 수강하기 너무 좋을 것 같네요. 여러 장점이 있지만 그 중에서도 1) 깔끔하고 군더더기 없는 설명 2) 실습 기반으로 수강한 내용 복습 3) 강의력을 장점으로 꼽을 수 있을 것 같습니다! 여러 강좌를 수강하려고 시도..는 해봤지만 완강한 강의는 이게 처음이에요! 오래만난 리액트도 있으면 좋을거 같아요...ㅎㅎ 좋은 강의 너무 감사드리고 앞으로도 새로운 강좌 오픈하시면 꼭 들을게요! 아직 안들으신 분들은 적극 추천드려요.

    • yrrrrrrrr님 수강평 남겨주셔서 감사합니다. 제 강의가 잘 맞으셨다니 너무 뿌듯하네요~ 언제가 될지는 모르지만 다음 강의도 기대해주세요ㅎㅎ 앞으로도 즐거운 리액트 개발이 되시길 바랍니다!

  • 긴팔원숭이님의 프로필 이미지
    긴팔원숭이

    Reviews 1

    Average Rating 5.0

    5

    50% enrolled

    현재 20%정도 수강한 학생입니다! 예전에 리액트로 웹 프로젝트를 했을 때 맨땅에 헤딩 느낌으로 혼자 공부하면서 했습니다. 너무 어려웠고, 이해가 안가는게 많았습니다. 그러다 이번에 회사 들어가면서 웹을 맡을 예정이라 다시 공부를 하면서 강의를 접하게 되었습니다. "이게 무료 강의라고..?"라는 말이 나올 정도로 강의력이 대단하십니다. 왜 이걸 이제야 봤는지 모를정도로 너무 좋은 강의에요!

    • 긴팔원숭이님 수강평 남겨주셔서 감사합니다. 제 강의를 통해 그동안 어렵게 느껴졌던 리액트를 조금 더 쉽게 이해하게 되셨다니 굉장히 뿌듯하네요~ 앞으로 남은 강의도 꼭 완강하시길 바라고, 수강중 궁금한 점이 있다면 언제든지 질문에 남겨주시기 바랍니다!

  • hek33kr님의 프로필 이미지
    hek33kr

    Reviews 1

    Average Rating 5.0

    5

    100% enrolled

    Swift로 현업에서 일하고 있는 개발자입니다. 아무것도 모르는상태로 머리부터 들이밀고 공부하기 시작해서 이제는 리액트를 공부하게 되었습니다. JS도 잘 모르고 웹에대해 잘 아는게 없다보니 기초부터 들으면 좋을것 같아 강의를 수강하게 되었는데 필요한 내용으로 잘 구성되어 있고 제 코딩스타일과 다른 코드를 보니 신기하네요 강의 잘 들었습니다 감사합니다!

    • hek33kr님 수강평 남겨주셔서 감사합니다. 제 강의가 도움이 되셨다니 뿌듯하네요~ 앞으로도 즐거운 리액트 개발이 되시길 바랍니다!

  • 최용원님의 프로필 이미지
    최용원

    Reviews 17

    Average Rating 4.8

    5

    31% enrolled

    질문 답변 소통이 원활하지 않아요.

    • 최용원님 수강평 남겨주셔서 감사합니다. 그동안 제가 답변 안 한 질문은 없는데, 질문 링크를 알려주시면 확인해보고 답변드리도록 하겠습니다!

Access is restricted to non-public courses.
Private Course

Similar courses

Explore other courses in the same field!