강의

멘토링

로드맵

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

410 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,595

Learners

4,731

Reviews

3,815

Answers

4.9

Rating

19

Courses

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

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

Curriculum

All

33 lectures ∙ (3hr 20min)

Published: 
Last updated: 

Reviews

All

36 reviews

4.9

36 reviews

  • yjh님의 프로필 이미지
    yjh

    Reviews 2

    Average Rating 4.5

    4

    100% enrolled

    안녕하세요. 캠틴판교님 리액트 강의 잘 들었습니다. 1. 강의 완강한 입장에서 추천 대상 - 리액트를 해보긴 했는데, 컴포넌트 분리에 대해 기초적인 고민 - 리액트에 있는 package 같은 파일들의 의미를 모른다. 2. 좋았던 점 - 일단 강의 준비를 너무 잘해주셔서 듣기 편했습니다. - 강의 자료에 대한 링크들이 첨부되어 있어서 도움이 됐습니다. - 자칫 그냥 넘어갈 만한, 익스텐션 셋팅 같은 부분도 초반 강의에 들어 있어서 모르던 사람에게는 꿀팁이 될 거 같습니다. - 적당한 강의 시간에 알찬 내용들 (하루만에 완강했습니다) 3. 아쉬운 점 - 강의 자체에 아쉽다기 보단...저는 조금 중급 강의를 원했던 것 같습니다. 제 기준에서는 쉬운 내용이 너무 많아서 아쉬웠습니다. 전체 : 준비가 잘된 강의라고 느꼈습니다. 이제 막 리액트 시작하는 초보였을 때 제가 이 강의를 들었으면 너무 좋았을 것 같습니다. 추후에 중급 강의가 나오면 꼭 수강하고 싶은 마음이 있습니다. [저만 4점이라서 추가적으로 코멘트 달자면] 1. 캡팡님의 강의력 Good 2. 리액트 배웠는데, 뭐가 뭔진 모르고 따라만 쳤다면 무조건 들어주세요 제발 3. 어떻게 보면 강의 난이도를 혼자 높게 생각하고 수강한 저의 실수일 수도 있습니다

    • 장기효(캡틴판교)
      Instructor

      안녕하세요 yjh님, 진솔한 수강평 남겨주셔서 감사해요 :) 저도 사실 요 강의 설계할 때 적절한 난이도 찾기가 좀 어려웠었는데 말씀하신 것처럼 중급 레벨의 강의는 아닌 것 같아요. 강의 소개 페이지에 안내된 것처럼 초급, 그리고 초급에 가까운 초중급으로 봐주시는게 좋을 것 같습니다. 강의에서 다루는 내용이 리액트 공식 문서에는 Intermediate(중급)으로 나와 있어서 딱 무슨 레벨이다라고 정의하긴 어려운 것 같아요 :) https://react.dev/learn/managing-state 그래도 말씀해 주신 것처럼 저도 이제서야 첫 리액트 강의를 낸거니까요. 이후에 좀 더 난이도 높은 강의들을 준비해 볼게요. 기대 많이해 주세요 감사합니다 :)

    • [저만 4점이라서 추가적으로 코멘트 달자면] 1. 캡팡님의 강의력 Good 2. 리액트 배웠는데, 뭐가 뭔진 모르고 따라만 쳤다면 무조건 들어주세요 제발 3. 어떻게 보면 강의 난이도를 혼자 높게 생각하고 수강한 저의 실수일 수도 있습니다

  • 장 서운님의 프로필 이미지
    장 서운

    Reviews 7

    Average Rating 4.4

    5

    61% enrolled

    캡틴판교 화이팅

    • 곰코드님의 프로필 이미지
      곰코드

      Reviews 5

      Average Rating 5.0

      5

      100% enrolled

      캡틴판교님 강의는 처음 들어봤습니다 내용이 좋아서 2일만에 완강했네요 ㅎㅎ 강의마다 짧고 굵지만 초보들을 배려하셔서 설명하시는거 보고 감사했습니다. 저는 기본적인 리액트 지식을 가지고 있지만 강의에서 말한 내용과 판교님의 꿀팁을 배워보고 싶어서 들었네요 결과적으로 아주 만족합니다. 빨리 중고급 강의가 나오기를 간절하게 바랍니다 ㅎㅎㅎ 이만 저는 선생님의 Next 강의를 들으러 가볼게요

      • 꿀팁이 마음에 드셨다니 다행이네요. 입문자를 배려한 포인트도 잘 짚어주셔서 감사합니다 :) Next 강의도 재밌게 들으시길! 😁

    • 부드러운 족제비님의 프로필 이미지
      부드러운 족제비

      Reviews 3

      Average Rating 4.0

      4

      12% enrolled

      • 송수지님의 프로필 이미지
        송수지

        Reviews 1

        Average Rating 5.0

        5

        100% enrolled

        리액트 기본원리를 간단 명료하게 설명해주셔서 공부에 많은 도움이 돼었습니다 감사합니다!

      Limited time deal ends in 1 days

      $33,000.00

      25%

      $34.10

      captain's other courses

      Check out other courses by the instructor!

      Similar courses

      Explore other courses in the same field!