강의

멘토링

로드맵

Inflearn brand logo image
BEST
Programming

/

Front-end

Learning React by Building: Component Design and Refactoring

Learn the React framework, which is the most widely used in practice, in an easy, fast, and fun way! While creating a to-do list app, you will learn how React works, how to design components, and how to refactor.

(4.9) 34 reviews

404 learners

  • captain
3시간 만에 완강할 수 있는 강의 ⏰
장기효
프론트엔드
신입프론트엔드
실습 중심
React
JavaScript
Refactoring

Reviews from Early Learners

What you will learn!

  • React

  • JavaScript

  • React

  • Vite

  • NPM

  • Node.js

  • Netlify

The most widely used React framework in practice,
Learn easily, quickly, and fun!

From the concept step by step,
Easy and simple

We'll select an easy, beginner-friendly material and create it together. As we work together, I'll explain each concept in a simple and concise manner. Trust in the teaching skills of a professional instructor with eight years of teaching experience.

Senior developer's know-how
Right next to me

With over 80% hands-on practice, this lecture is never boring. We'll share coding tips and valuable FE knowledge from senior front-end developers.

Recommended for these people! 👨‍💻

I 'm preparing for a job and am curious about how React is used in the workplace. How can I develop my practical skills?

I understand the basic React syntax, but what should I build? I'm curious about how practitioners learn.

I have a project coming up at work, but I've never used React before. I've read a book about it, but I'm not quite getting the hang of it.

After class

  • We'll see how React works together, by deliberately generating errors and fixing them together.

  • You will learn firsthand why components should be made in multiple parts and what the advantages are when components are divided.

  • How do experienced developers code? Let's steal all the secret tips on how to code effectively and efficiently.

  • I can distribute the results I create and show them off to others.


Learn about these things

Section (1) Tips for Configuring Your Development Environment

We'll set up the development environment required for the course. We'll cover code editing tools, frequently used React-related VSCode plugins, React developer tools, GitHub, Prettier, and more.

Section (2) Creating a Project - Guide to Folders, File Structure, and Settings Files

Learn how to create a React project and generate a project with Vite, a modern front-end build tool.

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

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

Quickly implement the key features of a to-do app using React's basic syntax, such as state and event handlers.

We'll teach you how to write code accurately and quickly while implementing it. We'll also teach you productivity-boosting code shortcuts and other techniques for both Mac and Windows users.

Section (4) Learning component design and state definition through refactoring

We'll explore the challenges that arise when separating components by UI role. We'll also explore how to pass data between multiple components. We'll also explore how to define props and state, and how to organically connect components.

Let's learn how it works by seeing errors with our own eyes and solving them together.

Section (5) Application Deployment

It's a simple and cute application, but I'll deploy it on my site to show off what I've created. Learn how to automate deployment and simple build commands.

Who created this course 👨‍💻

Jang Gi-hyo (Captain Pangyo)

Interview with "People Met by Inflearn"

Do you have any questions?

Q. I'm new to front-end development. Can I take this course?

If you know the basics of HTML and JavaScript , you can jump right into this course. If you want to delve deeper into React, we recommend starting with "Learning React by Building: Basics," as outlined in the learning roadmap below .

Q. Is this course for beginners or intermediate learners? The title contains some difficult terms, so I'm concerned it might be too difficult.

This course is aimed at beginner-intermediate learners. If you're familiar with React's useState() declaration and JavaScript array declaration, you should be able to follow along without much trouble. The application we'll create in this course is designed to be easily implemented with minimal features, from a beginner's perspective.

As you follow the class, you will naturally learn a lot of thinking from a practitioner's perspective :)

Q. What would be good to listen to after taking this lecture?

After taking this course, I recommend following the roadmap below to take subsequent courses . 🙂 Additional courses, including practical React courses, React + TypeScript courses, and Next.js courses, will be produced in the future. I'll be back soon with great content.

Things to note before taking the course

Practice environment

  • Operating System and Version (OS): I will be using a Mac in this course, but I will also cover all Windows-related shortcuts.

  • Tools used: VSCode


Learning Materials

  • Completed source code is provided on GitHub.

  • We provide a number of educational materials and videos (many of which I created ^^) that you can use to learn additionally for each lecture video.


Wiz Ribbon Banner Collection
Dora Ribbon Banner Collection (3)

Recommended for
these people

Who is this course right for?

  • React Beginner

  • Front-end developer

  • job seeker

Need to know before starting?

  • javascript

  • React Basics

Hello
This is

48,096

Learners

4,668

Reviews

3,812

Answers

4.9

Rating

17

Courses

인프런에서 8년째 지식을 공유하고 있습니다. 🏠 기술블로그, 📣 트위터, 💻 깃헙

📗 Do it! Vue.js 입문, 쉽게 시작하는 타입스크립트, 나는 네이버 프런트엔드 개발자입니다. 책 3권 집필
📖 Cracking Vue.js, 타입스크립트 핸드북, 웹팩 핸드북. 온라인 무료 가이드북 3권 집필
👨‍💻 캡틴판교의 프론트엔드 개발 유튜브 채널 운영 - 취준생, 주니어 개발자들의 고민을 들을 수 있는 곳
🥤 캡틴판교의 카카오톡 오픈 채팅방 운영 - 프런트엔드 개발 최신 정보와 업계 동료들의 생각과 고민을 들을 수 있는 곳

Curriculum

All

33 lectures ∙ (3hr 20min)

Published: 
Last updated: 

Reviews

All

34 reviews

4.9

34 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 7

    Average Rating 4.4

    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 3

      Average Rating 4.0

      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!