inflearn logo
inflearn logo

[React Part 1] Learning React by Building and Comparing

Master React now. Easiest course to grasp React's features & roles, comparing to pure JS!

(4.8) 수강평 120개

강의소개.상단개요.수강생.short

난이도 초급

수강기한 무제한

React
React
MVC
MVC
JavaScript
JavaScript
Web Application
Web Application
React
React
MVC
MVC
JavaScript
JavaScript
Web Application
Web Application

먼저 경험한 수강생들의 후기

먼저 경험한 수강생들의 후기

4.8

5.0

mosara999

100% 수강 후 작성

I enjoyed the excellent lecture. As a development beginner, I couldn't fully digest all the content embedded in the lecture with just one complete viewing. Nevertheless, the overall flow of the lecture was good, so I was able to follow the content without boredom. I will also listen well to the React Part 2 that you provided. Thank you once again for providing such a good lecture.

5.0

jaeu choi

100% 수강 후 작성

I can feel that this is a lecture that has been really thought through. At first, I felt that the MVC-Vanilla JavaScript part was better. This is because React is easy to learn how to use and can be used right away, so it was hard to find examples that implemented the MVC pattern with only JavaScript. So, I was impressed by the fact that they gradually converted the same UI to React by setting up a comparison group, and I felt that this part was a good lecture. However, I personally liked the MVC pattern and OOP more than React, and that was the reason I was attracted to it.

5.0

장승요

100% 수강 후 작성

I think this is the best front-end lecture I've ever seen. I really sympathize with the instructor's detailed explanation of potential problems and the emphasis on the importance of 'basics' and 'vanilla', which are hard to find in existing React instructors.

강의상세_배울수있는것_타이틀

  • Understanding React.js core concepts through hands-on web application development

  • Comparison of Pure JavaScript Development and React Development

  • Benefits of Applying Design Patterns Through Practical Exercises

The most popular front-end practice, React,
Get it for sure with just one lecture! 🚩

If you are having these concerns, pay attention! 💡

Case 1
React is said to be the most popular, but I don't know where to start!

"React, the most popular tool in the front-end hiring market,
But when it comes to actually getting started, I have no idea where to start or what to do."

Case 2
I'm not sure about my React development process.

"I somehow managed to develop it using React,
I have no idea how effective this method is .


We will teach you everything from React basics to practical use 🎯

Oh, that story. Sounds like my story? Then you should join this lecture!
The objectives of this lecture are as follows:

  • By creating the results in JS and React versions , you can understand the role and advantages of React at a glance.
  • You can learn the theory with your body and mind through coding practical applications and 12 assignments.

People like this will love hearing this! 🧑‍🎓

  • Even after reading the official React documentation, I am still at a loss as to where to start.
  • A practitioner type who prefers to start with Hello World rather than theory.
  • I tried using React, but it's a bit confusing and hard to explain exactly what's good about it.

Unique features of my lecture 😎

  • You can clearly understand the features of React.js!
    • Compare pure JavaScript and React development to gain a clearer understanding of React's features.
  • A dense course based on the official React documentation!
    • This is a "React Core Course" based on the main concepts mentioned in the official React documentation.
  • This is a lecture focused on thorough practice!
    • You can learn it firsthand by creating a shopping mall search screen through direct coding and solving 12 practical tasks.
  • I prepared a Git Branch for each video.
    • For those who have difficulty following along during the practical training or are taking the class without the practical training, I have prepared a Git branch for each video.
    • You can easily see the code used in each video by moving to a branch.
  • Lecture notes provided so you can view them right after reviewing!
    • All lecture notes used in class are available on the blog. (Link: 🖋Kim Jeong-hwan's Blog )
    • It's a good idea to read the entire text lightly before class. Preview👍
    • It's even better if you read it after class. Review👍👍

Learn about these things 📖

  1. Preparation
    • Let's take a look at the design and requirements analysis documents to get a sneak peek of the deliverables we'll be creating in class.
    • As I was creating my results with pure JavaScript and the MVC design pattern, I realized the need for a UI library.
  2. Introduction
    • You can learn about the concepts of React's reactive and virtual DOM and why to use React.
    • Learn the roles and usage of some tools used in React development and prepare for practice.
  3. User Guide 1
    • You can learn the basic concepts of React by implementing the result from scratch using React.
    • You can understand the core principles of React, such as State, event handling, conditional rendering, forms, lists, and keys.
  4. User Guide 2 (Component)
    • We introduce React components and improve the results we created in the previous part into React components.
    • You can learn about issues you encounter when working with components, such as class/function components, state lifting, inheritance, and composition.

Home screen

Search results screen

Recent searches screen

Next lecture


[React Part 2] Advanced Topics and Hooks

Introducing myself 🧑‍🏫

Kim Jung-hwan

A working developer who loves learning and organizing web technologies.
I run a technology blog about web technologies and my thoughts as a developer.

We also share the skills we have learned and the know-how we have learned in practice in the form of presentations or lectures.

I work as a front-end developer at Elegant Brothers.

I also wrote content related to React technology.


Q&A for students 🙋

Q. Is this a lecture that non-majors can also take?

No, you need to have some experience in web development to take this course.

Q. Why should I learn React?

The current job market is looking for developers with knowledge of modern web frameworks.

If you have the most popular React skills, you will be in demand by many companies.

Q. What are the benefits of learning React?

React solves many common problems in user interface development.

Developers can focus more on developing business logic and gain the power to create products faster.

Q. Is there anything I need to prepare before attending the lecture?

If you have any experience with web development, it's worth taking this class.

This is because the class is conducted on the assumption that you are familiar with HTML and JavaScript grammar.

For those who are still lacking in web basics, I recommend learning first and then taking the course.

Q. What level of content is covered in the class?

This content is based on the main concepts and some advanced guides from the official React documentation.

It covers the core parts of React.

Q. Are there any notes regarding course registration?

There are four tools we will use in class: Node.js, a development editor, a web browser, and Git.

You can also check it out in the preview class. (Link: 🎥 Class Preview )

강의소개.콘텐츠.추천문구

학습 대상은 누구일까요?

  • Those who've read the React official docs, but are still unsure where to begin.

  • Those who prefer to start with "Hello world" (hands-on practice) rather than theory

  • React users who can't pinpoint its exact benefits.

선수 지식, 필요할까요?

  • Basic knowledge of web development

강의소개.지공자소개

14,098

수강생

891

수강평

595

답변

4.8

강의 평점

9

강의_other

Please post any questions you have during class in the Q&A section.
I will check and respond to them once a day.

커리큘럼

전체

96개 ∙ (강의상세_런타임_시간 강의상세_런타임_분)

해당 강의에서 제공: [object Object]
강의 게시일: 
마지막 업데이트일: 

수강평

전체

120개

4.8

120개의 수강평

  • 9ma님의 프로필 이미지
    9ma

    수강평 3

    평균 평점 5.0

    5

    100% 수강 후 작성

    I had a hard time figuring out how to start studying React for the first time, but I got a lot of help thanks to the concise lecture structure. Since each lecture and the entire lecture structure are not long, I think I can watch it over and over again, which is also an advantage :) On the other hand, since you also covered vanilla JavaScript, it was easy to understand what kind of problems React was a framework that appeared to solve. However, both are still difficult.. ㅎ_ㅎ From now on, I will watch it over and implement it several times to solidify the basics of front-end development. Thank you for the great lecture.

    • pyw82061918님의 프로필 이미지
      pyw82061918

      수강평 8

      평균 평점 5.0

      5

      100% 수강 후 작성

      I already have development experience participating in a React project, but it's been a while, and taking the lecture again helped me a lot in studying the basics. Thank you.

      • kkhkim20027309님의 프로필 이미지
        kkhkim20027309

        수강평 2

        평균 평점 5.0

        5

        100% 수강 후 작성

        It's a good lecture, but... it's a bit difficult... I guess I'll have to repeat it... Fighting!

        • jeonghwan
          지식공유자

          thank you

      • 04209904047님의 프로필 이미지
        04209904047

        수강평 9

        평균 평점 4.8

        4

        100% 수강 후 작성

        - Pros!!! 1. The lecture covers all the contents covered in the "Main Concepts" of the React official documentation. Rather than simply learning from the official documentation, I was able to deeply understand the necessity of each concept by learning while creating. 2. I was able to learn why this method is less recommended by using even the contents that were not mentioned in the official documentation because they were judged to be less important. 3. I was able to learn about the necessity of abstraction beyond the simple concept of React. - Not a con.. but something that was difficult during the lecture!!! 1. As someone who has a weak understanding of the MVC pattern and abstraction, when I first heard the vanilla JS part, I was shocked by the code. => The code was too difficult for me. ㅠ.ㅠ However, if you endure it and write the logic on paper and make the code your own, you will find yourself growing little by little. If you are a student who is having the same difficulties as me, if you look at the React part first and then approach the Vanilla JS part, you will be able to understand the code more easily. At least I did. - Overall!!! Honestly, I used React, but my skills were shallow, like floating on a bubble, but through this lecture, I was able to understand React more deeply. I recommend it to everyone who is starting React.

        • jeonghwan
          지식공유자

          I was also worried that the first half would be difficult while preparing for the class. It really is difficult. Thank you for listening to the end though.

      • wepungsan님의 프로필 이미지
        wepungsan

        수강평 36

        평균 평점 5.0

        5

        100% 수강 후 작성

        I recommend it. This is a comprehensive lecture on React concepts. It does not cover React hooks very much. React hooks are covered in Part 2, so please refer to it.

        • jeonghwan
          지식공유자

          Backend developer, thank you for your feedback. Have a nice day.

      jeonghwan님의 다른 강의

      지식공유자님의 다른 강의를 만나보세요!

      비슷한 강의

      같은 분야의 다른 강의를 만나보세요!

      강의상세.할인문구

      $30.80

      28%

      $42.90