강의

멘토링

커뮤니티

BEST
Programming

/

Front-end

Learning React by Building: Component Design and Refactoring

Learn the most widely used React framework in practice - easily, quickly, and enjoyably! Build a to-do management app while learning React's operating principles, component design, and refactoring methods.

(4.9) 41 reviews

431 learners

Level Basic

Course period Unlimited

  • captain
React
React
JavaScript
JavaScript
Refactoring
Refactoring
React
React
JavaScript
JavaScript
Refactoring
Refactoring

Reviews from Early Learners

Reviews from Early Learners

4.9

5.0

장 서운

61% enrolled

Captain Pangyo Fighting!

5.0

곰코드

100% enrolled

This is my first time listening to Captain Pangyo's lecture. I liked the content so much that I finished it in 2 days. ㅎㅎ Each lecture is short and thick, but I was grateful to see that he explained it with consideration for beginners. I have basic React knowledge, but I listened to it because I wanted to learn the content mentioned in the lecture and Pangyo's tips. As a result, I am very satisfied. I sincerely hope that intermediate and advanced lectures come out soon. ㅎㅎㅎ For now, I will go listen to the teacher's next lecture.

5.0

송수지

100% enrolled

Thank you for explaining the basic principles of React in a simple and clear way. It was a great help in my studies!

What you will gain after the course

  • React

  • JavaScript

  • React

  • Vite

  • NPM

  • Node.js

  • Netlify

The most widely used React framework in practice,
learn it easily, quickly, and enjoyably!

Step by step from the basics,
easy and simple

We'll select an easy topic at a beginner's level and build it together. As we build together, I'll explain each concept easily and briefly. Trust the teaching skills of a professional instructor with 8 years of teaching experience.

Senior developer's know-how
right next to you

A course with over 80% hands-on practice that keeps you engaged throughout. I'll share tons of coding tips from a senior frontend developer and useful FE knowledge worth knowing.

We recommend this for! 👨‍💻

I'm preparing for job hunting and curious about how React is used in actual work. How can I develop practical skills?

I understand the basics of React syntax, but... then what should I build? I'm curious how professionals learn.

I need to start a project at work right away, but I've never worked with React before. I've read one book, but... I still don't quite get it.

After taking the course

  • We visually confirm together how React works. That's because I deliberately create errors and we fix them together.

  • You'll see with your own eyes and experience firsthand why components should be split into multiple pieces and what advantages come from dividing components.

  • How do developers with lots of practical experience code? You'll get to steal all the tips and tricks on how to code effectively and efficiently.

  • You can deploy what you've created and show it off to others.


Here's what you'll learn

Section (1) Development Environment Setup Tips

We'll set up the development environment needed for the course. We'll guide you through code editing tools and frequently used React-related VSCode plugins in practice, React Developer Tools, GitHub, Prettier, and more.

Section (2) Project Creation - Folder, File Structure, and Configuration File Guide

Learn how to create a React project and generate a project using Vite, the latest frontend build tool.

Learn about NPM, ESLint, project library management methods, and custom commands to improve your overall understanding of project structure.

Section (3) Quickly Building a To-Do Management App

Quickly implement the main features of a to-do management app using React basics such as state and event handlers.

Learn how to write code accurately and quickly while implementing, including code shortcuts that boost productivity for both Mac and Windows users.

Section (4) Learning Component Design and State Definition through Refactoring

We'll examine the issues that arise when separating components by UI role. How to pass data between multiple components. We'll look at how to define props and state, and how components can be organically connected with each other.

Let's see the errors with our own eyes and solve them together while understanding how things work.

Section (5) Application Deployment

Although it's a simple and cute application, we'll deploy it to a site so you can show off what you've made. You'll learn automatic deployment methods and simple build commands.

The person who created this course 👨‍💻

Captain Pangyo

"People Met by Inflearn" Interview

Do you have any questions?

Q. I'm a beginner in frontend development. Can I take this course?

If you know the basic syntax of HTML and JavaScript, you can take this course right away. If you want to understand React more deeply, it would be good to first take Learn React by Building: Basics as guided in the learning roadmap below 🙂

Q. Is this course beginner or intermediate level? I'm worried it might be too difficult because there are complex terms in the title.

This course is aimed at beginner to intermediate level. As long as you know how to declare React's useState() and JavaScript arrays, you should be able to follow along without much difficulty. The application we build in the course has also been prepared with minimal features so that beginners can easily implement it.

As you follow along with the class, you'll naturally learn a lot about thinking from a professional's perspective :)

Q. What should I take after completing this course?

After taking this course, I recommend following the roadmap below for your next courses 🙂 Various courses such as practical React courses, React + TypeScript courses, and Next.js courses will be additionally produced in the future. I'll see you soon with great content ❤

Things to Note Before Taking the Course

Development Environment

  • Operating System and Version (OS): The course uses Mac, but all Windows-related shortcuts are also explained.

  • Tools used: VSCode


Learning Materials

  • The completed source code is provided via GitHub.

  • For each lecture video, I provide numerous additional learning materials and educational videos (many of which I created myself ^^).


위즈 띠배너 모음
도라 띠배너 모음 (3)

Recommended for
these people

Who is this course right for?

  • React beginner

  • Frontend Developer

  • Job seeker

Need to know before starting?

  • JavaScript

  • React Basics

Hello
This is

49,267

Learners

4,853

Reviews

3,816

Answers

4.9

Rating

19

Courses

I have been sharing knowledge on Inflearn for 8 years. 🏠 Tech Blog, 📣 Twitter, 💻 GitHub

📗 Do it! Vue.js Introduction, Easy TypeScript and 3 other books authored
📖 Cracking Vue.js, TypeScript Handbook, Webpack Handbook. 3 online free guidebooks authored
👨‍💻 Operating Captain Pangyo's Frontend Development YouTube Channel - A place to hear the concerns of job seekers and junior developers
🥤 Operating Captain Pangyo's KakaoTalk Open Chat Room - A place to get the latest frontend development information and hear the thoughts and concerns of industry peers

Curriculum

All

33 lectures ∙ (3hr 20min)

Published: 
Last updated: 

Reviews

All

41 reviews

4.9

41 reviews

  • yjh0155님의 프로필 이미지
    yjh0155

    Reviews 2

    Average Rating 4.5

    4

    100% enrolled

    Hello. I listened to the React lecture by Captain Pangyo well. 1. Recommended for those who are serious about the lecture - I tried React, but I have basic concerns about component separation - I don't know the meaning of files like packages in React. 2. Good points - First of all, the lecture was very well prepared, so it was easy to listen. - It was helpful that there were links to the lecture materials. - Parts that could be easily overlooked, such as extension settings, were included in the beginning lectures, so I think it would be a good tip for those who didn't know. - Substantial content in an appropriate lecture time (I finished the lecture in one day) 3. Disappointing points - Rather than saying that the lecture itself was disappointing... I think I wanted a slightly intermediate lecture. It was disappointing because there were too many easy contents by my standards. Overall: I felt that the lecture was well-prepared. I wish I had taken this lecture when I was a beginner who was just starting out with React. I definitely want to take the intermediate lecture in the future. [I'm the only one who got 4 points, so if I have to add an additional comment] 1. Capang's teaching ability is good 2. If you learned React but didn't know what was going on and just followed along, please listen unconditionally 3. In some ways, it could be my mistake for thinking the lecture difficulty was too high and taking the class.

    • captain
      Instructor

      Hello yjh, thank you for leaving an honest review :) I also had a hard time finding the right level of difficulty when designing this course, but as you said, it doesn't seem to be an intermediate level course. As the course introduction page says, it would be better to think of it as a beginner level, or a beginner-level intermediate level. The content covered in the course is listed as Intermediate in the official React documentation, so it's hard to define exactly what level it is :) https://react.dev/learn/managing-state But as you said, I've just released my first React course. I'll prepare more difficult courses in the future. Please look forward to it. Thank you :)

    • [I'm the only one who got 4 points, so if I have to add an additional comment] 1. Capang's teaching ability is good 2. If you learned React but didn't know what was going on and just followed along, please listen unconditionally 3. In some ways, it could be my mistake for thinking the lecture difficulty was too high and taking the class.

  • seeeun님의 프로필 이미지
    seeeun

    Reviews 10

    Average Rating 4.5

    5

    61% enrolled

    Captain Pangyo Fighting!

    • winzzone2님의 프로필 이미지
      winzzone2

      Reviews 5

      Average Rating 5.0

      5

      100% enrolled

      This is my first time listening to Captain Pangyo's lecture. I liked the content so much that I finished it in 2 days. ㅎㅎ Each lecture is short and thick, but I was grateful to see that he explained it with consideration for beginners. I have basic React knowledge, but I listened to it because I wanted to learn the content mentioned in the lecture and Pangyo's tips. As a result, I am very satisfied. I sincerely hope that intermediate and advanced lectures come out soon. ㅎㅎㅎ For now, I will go listen to the teacher's next lecture.

      • captain
        Instructor

        I'm glad you liked the tips. Thank you for pointing out the points that are good for beginners :) I hope you enjoy the next lecture! 😁

    • namdong98978492님의 프로필 이미지
      namdong98978492

      Reviews 4

      Average Rating 4.3

      4

      12% enrolled

      • mily921558님의 프로필 이미지
        mily921558

        Reviews 1

        Average Rating 5.0

        5

        100% enrolled

        Thank you for explaining the basic principles of React in a simple and clear way. It was a great help in my studies!

        • captain
          Instructor

          Thank you Suji :)

      $34.10

      captain's other courses

      Check out other courses by the instructor!

      Similar courses

      Explore other courses in the same field!