강의

멘토링

로드맵

Inflearn brand logo image
BEST
Programming

/

Front-end

React học bằng cách thực hành: Thiết kế và tái cấu trúc thành phần

Tìm hiểu framework React được sử dụng rộng rãi nhất theo cách dễ dàng, nhanh chóng và thú vị! Tìm hiểu cách React hoạt động, thiết kế thành phần và các kỹ thuật tái cấu trúc trong khi xây dựng ứng dụng quản lý việc cần làm.

(4.9) 34 đánh giá

404 học viên

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

Đánh giá từ những học viên đầu tiên

Dịch cái này sang tiếng Việt

  • phản ứng

  • JavaScript

  • Phản ứng

  • Vite

  • NPM

  • Node.js

  • Mạng lưới

Khung React được sử dụng rộng rãi nhất trong thực tế,
Học dễ dàng, nhanh chóng và thú vị!

Từ khái niệm từng bước một,
Dễ dàng và đơn giản

Chúng ta sẽ chọn một tài liệu dễ hiểu, phù hợp với người mới bắt đầu và cùng nhau biên soạn. Khi cùng nhau làm việc, tôi sẽ giải thích từng khái niệm một cách đơn giản và súc tích. Hãy tin tưởng vào kỹ năng giảng dạy của một giảng viên chuyên nghiệp với tám năm kinh nghiệm giảng dạy.

Kiến thức chuyên môn của nhà phát triển cấp cao
Ngay bên cạnh tôi

Với hơn 80% thời lượng thực hành, bài giảng này không bao giờ nhàm chán. Chúng tôi sẽ chia sẻ các mẹo lập trình và kiến thức FE quý báu từ các nhà phát triển front-end giàu kinh nghiệm.

Khuyến nghị cho những người này! 👨‍💻

Tôi đang chuẩn bị xin việc và tò mò muốn biết React được sử dụng như thế nào tại nơi làm việc. Làm thế nào tôi có thể phát triển các kỹ năng thực tế của mình?

Tôi hiểu cú pháp React cơ bản, nhưng tôi nên xây dựng cái gì? Tôi tò mò muốn biết các học viên học như thế nào.

Tôi sắp có một dự án ở chỗ làm, nhưng tôi chưa bao giờ sử dụng React. Tôi đã đọc một cuốn sách về nó, nhưng tôi vẫn chưa thực sự hiểu rõ.

Sau giờ học

  • Chúng ta sẽ xem React hoạt động như thế nào khi cố tình tạo ra lỗi và cùng nhau sửa chúng.

  • Bạn sẽ được trực tiếp tìm hiểu lý do tại sao các thành phần nên được chế tạo thành nhiều phần và lợi ích khi chia các thành phần thành nhiều phần.

  • Các nhà phát triển giàu kinh nghiệm viết code như thế nào? Hãy cùng khám phá tất cả các mẹo bí mật về cách viết code hiệu quả.

  • Tôi có thể chia sẻ kết quả tôi tạo ra và chia sẻ với người khác.


Tìm hiểu về những điều này

Phần (1) Mẹo cấu hình môi trường phát triển của bạn

Chúng tôi sẽ thiết lập môi trường phát triển cần thiết cho khóa học. Chúng tôi sẽ giới thiệu các công cụ chỉnh sửa mã, các plugin VSCode liên quan đến React thường dùng, các công cụ dành cho nhà phát triển React, GitHub, Prettier, v.v.

Phần (2) Tạo dự án - Hướng dẫn về thư mục, cấu trúc tệp và tệp cài đặt

Tìm hiểu cách tạo dự án React và tạo dự án bằng Vite, một công cụ xây dựng giao diện người dùng hiện đại.

Tìm hiểu về NPM, ESLint, quản lý thư viện dự án, lệnh tùy chỉnh và cải thiện hiểu biết tổng thể của bạn về cấu trúc dự án.

Phần (3) Tạo nhanh ứng dụng quản lý việc cần làm

Nhanh chóng triển khai các tính năng chính của ứng dụng việc cần làm bằng cú pháp cơ bản của React, chẳng hạn như trình xử lý trạng thái và sự kiện.

Chúng tôi sẽ hướng dẫn bạn cách viết mã chính xác và nhanh chóng trong quá trình triển khai. Chúng tôi cũng sẽ hướng dẫn bạn các phím tắt mã hóa giúp tăng năng suất và các kỹ thuật khác dành cho cả người dùng Mac và Windows.

Phần (4) Học thiết kế thành phần và định nghĩa trạng thái thông qua tái cấu trúc

Chúng ta sẽ khám phá những thách thức phát sinh khi phân tách các thành phần theo vai trò UI. Chúng ta cũng sẽ tìm hiểu cách truyền dữ liệu giữa nhiều thành phần. Chúng ta cũng sẽ tìm hiểu cách định nghĩa props và state, và cách kết nối các thành phần một cách tự nhiên.

Chúng ta hãy cùng tìm hiểu cách thức hoạt động bằng cách tận mắt chứng kiến lỗi và cùng nhau giải quyết chúng.

Mục (5) Triển khai ứng dụng

Đây là một ứng dụng đơn giản và dễ thương, nhưng tôi sẽ triển khai nó trên trang web của mình để giới thiệu những gì tôi đã tạo ra. Tìm hiểu cách tự động triển khai và các lệnh build đơn giản.

Ai là người tạo ra khóa học này 👨‍💻

Jang Gi-hyo (Đội trưởng Pangyo)

Phỏng vấn với "People Met by Inflearn"

Bạn có thắc mắc nào không?

H. Tôi mới bắt đầu học lập trình front-end. Tôi có thể tham gia khóa học này không?

Nếu bạn đã nắm vững kiến thức cơ bản về HTML và JavaScript , bạn có thể tham gia ngay khóa học này . Nếu muốn tìm hiểu sâu hơn về React, chúng tôi khuyên bạn nên bắt đầu với khóa học "Học React bằng cách Xây dựng: Cơ bản", như được trình bày trong lộ trình học tập bên dưới .

H. Khóa học này dành cho người mới bắt đầu hay người học trung cấp? Tiêu đề có một số thuật ngữ khó, nên tôi lo là nó có thể quá khó.

Khóa học này dành cho người học ở trình độ sơ cấp đến trung cấp . Nếu bạn đã quen thuộc với khai báo useState() của React và khai báo mảng JavaScript, bạn sẽ có thể dễ dàng theo dõi. Ứng dụng chúng ta sẽ tạo trong khóa học này được thiết kế để dễ dàng triển khai với các tính năng tối thiểu, phù hợp với người mới bắt đầu.

Khi bạn tham gia lớp học, bạn sẽ tự nhiên học được nhiều điều từ góc nhìn của người thực hành :)

H. Sau khi nghe bài giảng này, bạn nên nghe gì?

Sau khi hoàn thành khóa học này, tôi khuyên bạn nên làm theo lộ trình bên dưới để tham gia các khóa học tiếp theo . 🙂 Các khóa học bổ sung, bao gồm các khóa học React thực hành, React + TypeScript và Next.js, sẽ được ra mắt trong tương lai. Tôi sẽ sớm quay lại với nội dung tuyệt vời.

Những điều cần lưu ý trước khi tham gia khóa học

Môi trường thực hành

  • Hệ điều hành và Phiên bản (OS): Tôi sẽ sử dụng máy Mac trong khóa học này, nhưng tôi cũng sẽ đề cập đến tất cả các phím tắt liên quan đến Windows.

  • Công cụ được sử dụng: VSCode


Tài liệu học tập

  • Mã nguồn hoàn chỉnh được cung cấp trên GitHub.

  • Chúng tôi cung cấp một số tài liệu và video giáo dục (nhiều trong số đó là do tôi tạo ra ^^) mà bạn có thể sử dụng để học thêm cho mỗi video bài giảng.


Bộ sưu tập biểu ngữ Wiz Ribbon
Bộ sưu tập biểu ngữ Dora Ribbon (3)

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Người mới bắt đầu học React

  • Nhà phát triển phần mềm phía trước

  • Người chuẩn bị xin việc

Cần biết trước khi bắt đầu?

  • JavaScript

  • Cơ sở React

Xin chào
Đây là

48,096

Học viên

4,668

Đánh giá

3,812

Trả lời

4.9

Xếp hạng

17

Các khóa học

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

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

Chương trình giảng dạy

Tất cả

33 bài giảng ∙ (3giờ 20phút)

Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

34 đánh giá

4.9

34 đánh giá

  • yjh0155님의 프로필 이미지
    yjh0155

    Đánh giá 2

    Đánh giá trung bình 4.5

    4

    100% đã tham gia

    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
      Giảng viên

      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

    Đánh giá 7

    Đánh giá trung bình 4.4

    5

    61% đã tham gia

    Captain Pangyo Fighting!

    • winzzone2님의 프로필 이미지
      winzzone2

      Đánh giá 5

      Đánh giá trung bình 5.0

      5

      100% đã tham gia

      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
        Giảng viên

        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

      Đánh giá 3

      Đánh giá trung bình 4.0

      4

      12% đã tham gia

      • mily921558님의 프로필 이미지
        mily921558

        Đánh giá 1

        Đánh giá trung bình 5.0

        5

        100% đã tham gia

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

        • captain
          Giảng viên

          Thank you Suji :)

      926.720 ₫

      Khóa học khác của captain

      Hãy khám phá các khóa học khác của giảng viên!

      Khóa học tương tự

      Khám phá các khóa học khác trong cùng lĩnh vực!