강의

멘토링

커뮤니티

BEST
Programming

/

Front-end

Học React qua thực hành: Thiết kế Component và Refactoring

Framework React được sử dụng nhiều nhất trong thực tế, hãy học một cách dễ dàng, nhanh chóng và thú vị! Chúng ta sẽ học về nguyên lý hoạt động của React, thiết kế component và phương pháp refactoring thông qua việc tạo ứng dụng quản lý công việc.

(4.9) 41 đánh giá

431 học viên

Độ khó Cơ bản

Thời gian Không giới hạn

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

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

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

4.9

5.0

장 서운

61% đã tham gia

Đội trưởng Pangyo chiến đấu

5.0

곰코드

100% đã tham gia

Đây là lần đầu tiên tôi nghe bài giảng của Thuyền trưởng Pangyo. Nội dung hay đến nỗi tôi đã hoàn thành khóa học trong 2 ngày haha. Mặc dù mỗi bài giảng đều ngắn gọn và súc tích nhưng tôi rất biết ơn khi thấy lời giải thích rất chu đáo cho người mới bắt đầu. Tôi có kiến ​​thức cơ bản về React, nhưng tôi lắng nghe vì tôi muốn tìm hiểu những gì được nói trong bài giảng và những lời khuyên của Pangyo. Tôi rất hài lòng với kết quả đạt được. Tôi chân thành mong rằng các lớp trung cấp và cao cấp sẽ sớm ra mắt haha. Bây giờ tôi sẽ đi nghe bài giảng tiếp theo của bạn.

5.0

송수지

100% đã tham gia

Cảm ơn bạn đã giải thích các nguyên tắc cơ bản của React một cách đơn giản và rõ ràng, điều này đã giúp ích cho tôi rất nhiều trong quá trình học tập!

Bạn sẽ nhận được điều này sau khi học.

  • React

  • JavaScript

  • React (React là tên riêng của thư viện JavaScript, giữ nguyên không dịch)

  • Vite

  • NPM

  • Node.js

  • Netlify

Framework React được sử dụng nhiều nhất trong thực tế,
hãy học một cách dễ dàng, nhanh chóng và thú vị!learn it easily, quickly, and enjoyably!

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

Chọn một chủ đề dễ hiểu phù hợp với người mới bắt đầu và cùng nhau thực hành. Trong quá trình thực hành, từng khái niệm sẽ được giải thích một cách dễ hiểu và ngắn gọn. Hãy tin tưởng vào kỹ năng giảng dạy của gi강ng viên chuyên nghiệp với 8 năm kinh nghiệm.

Bí quyết của developer senior
ngay bên cạnh bạn

Khóa học không có thời gian chán với hơn 80% thực hành. Chia sẻ không giới hạn các mẹo viết code và kiến thức FE hữu ích từ Senior Frontend Developer.

Khóa học này dành cho những bạn sau đây! 👨‍💻

Đang chuẩn bị xin việc và tò mò về cách sử dụng React trong thực tế. Làm thế nào để có thể phát triển kỹ năng thực tế? and curious about how React is used in actual work. How can I develop practical skills?

Tôi đã hiểu cú pháp cơ bản của React rồi.. Vậy tôi nên làm gì tiếp theo? Tôi tò mò muốn biết những người làm thực tế học như thế nào.

Tôi phải làm dự án ngay tại công ty nhưng chưa từng làm việc với React. Tôi đã đọc một cuốn sách nhưng... vẫn chưa nắm được cảm giác.

Sau khi hoàn thành khóa học

  • Chúng ta sẽ cùng nhau xác nhận bằng mắt nguyên lý hoạt động của React. Bởi vì tôi cố tình tạo ra lỗi và cùng sửa chúng.

  • Bạn sẽ tận mắt thấy và thấu hiểu tại sao phải tạo nhiều component, và ưu điểm là gì khi các component được tách ra.

  • Lập trình viên có nhiều kinh nghiệm thực tế thì code như thế nào? Chúng ta sẽ học hỏi tất cả các mẹo hay về cách lập trình hiệu quả và năng suất.

  • Sản phẩm tôi tạo ra có thể triển khai và khoe với người khác.


Nội dung học tập

Phần (1) Mẹo thiết lập môi trường phát triển

Thiết lập môi trường phát triển cần thiết cho khóa học. Hướng dẫn về công cụ chỉnh sửa code và các plugin VSCode liên quan đến React thường được sử dụng trong thực tế, 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 cấu trúc thư mục, tệp và tệp cấu hình

Tìm hiểu cách tạo dự án React và khởi tạo dự án với Vite - công cụ build frontend hiện đại nhất.

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

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

Triển khai nhanh chóng các tính năng chính của ứng dụng quản lý công việc bằng cú pháp cơ bản của React như state và event handler.

Trong quá trình triển khai, chúng tôi sẽ hướng dẫn cách viết code chính xác và nhanh chóng, các phím tắt code giúp tăng năng suất cho cả người dùng Mac và Windows.

Phần (4) Thiết kế component và định nghĩa state thông qua refactoring

Chúng ta sẽ xem xét các vấn đề phát sinh khi tách component theo vai trò UI. Cách truyền dữ liệu giữa nhiều component. Tìm hiểu cách định nghĩa props và state, và cách các component có thể kết nối với nhau một cách hữu cơ.

Hãy cùng nhau quan sát lỗi bằng mắt và giải quyết trực tiếp để hiểu nguyên lý hoạt động.

Phần (5) Triển khai ứng dụng

Mặc dù là một ứng dụng đơn giản và dễ thương, nhưng chúng ta sẽ thử triển khai lên trang web để có thể khoe sản phẩm mình đã tạo ra. Bạn sẽ học cách triển khai tự động và các lệnh build đơn giản.

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

Captain Pangyo

Phỏng vấn "Người mà Inflearn đã gặp"

Bạn có thắc mắc gì không?

Q. Tôi là người mới bắt đầu học phát triển frontend. Tôi có thể học khóa học này không?

Nếu bạn đã biết cú pháp cơ bản của HTML và JavaScript thì có thể học ngay. Nếu muốn hiểu sâu hơn về React, bạn nên học 만들면서 배우는 리액트 : 기초 được hướng dẫn trong lộ trình học tập bên dưới trước nhé 🙂

Q. Khóa học này ở cấp độ cơ bản hay trung cấp? Tôi lo lắng rằng độ khó có thể cao vì có những thuật ngữ khó trong tiêu đề.

Khóa học này nhắm đến đối tượng sơ-trung cấp. Nếu bạn biết cách khai báo useState() trong React và cách khai báo mảng trong JavaScript thì có thể học mà không gặp vấn đề gì lớn. Ứng dụng được tạo trong khóa học cũng được chuẩn bị để người mới bắt đầu có thể dễ dàng triển khai với các tính năng tối thiểu.

Khi theo dõi bài học, bạn sẽ tự nhiên học được nhiều tư duy từ góc nhìn của người làm thực tế :)

Hỏi: Sau khi học xong khóa học này thì nên học khóa nào tiếp theo?

Sau khi hoàn thành khóa học này, tôi khuyên bạn nên theo dõi lộ trình dưới đây để học các khóa học tiếp theo 🙂 Trong tương lai, nhiều khóa học khác nhau sẽ được sản xuất thêm như khóa học React thực chiến, khóa học React + TypeScript, khóa học Next.js, v.v. Tôi sẽ sớm quay lại với nội dung chất lượng ❤

Lưu ý trước khi học

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

  • Hệ điều hành và phiên bản (OS): Trong khóa học sử dụng Mac nhưng cũng sẽ giải thích tất cả các phím tắt liên quan đến Windows.

  • Công cụ sử dụng: VSCode


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

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

  • Tôi cung cấp nhiều tài liệu học tập bổ sung và video giáo dục (có rất nhiều video do chính tôi làm ^^) cho từng video bài giảng.


위즈 띠배너 모음
도라 띠배너 모음 (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

  • Lập trình viên Frontend

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

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

  • JavaScript

  • Cơ bản về React

Xin chào
Đây là

49,267

Học viên

4,853

Đánh giá

3,816

Trả lời

4.9

Xếp hạng

19

Các khóa học

Tôi đã chia sẻ kiến thức trên Inflearn được 8 năm. 🏠 Blog kỹ thuật, 📣 Twitter, 💻 Github

📗 Do it! Nhập môn Vue.js, TypeScript cho người mới bắt đầu v.v. Tác giả của 3 cuốn sách
📖 Cracking Vue.js, TypeScript Handbook, Webpack Handbook. Tác giả của 3 cuốn sách hướng dẫn trực tuyến miễn phí
👨‍💻 Vận hành Kênh YouTube phát triển Front-end của Captain Pangyo - Nơi lắng nghe những trăn trở của các bạn đang tìm việc và các lập trình viên trẻ
🥤 Vận hành Phòng chat mở KakaoTalk của Captain Pangyo - Nơi cập nhật thông tin mới nhất về phát triển Front-end và lắng nghe suy nghĩ, trăn trở của các đồng nghiệp trong ngành

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ả

41 đánh giá

4.9

41 đánh giá

  • yjh0155님의 프로필 이미지
    yjh0155

    Đánh giá 2

    Đánh giá trung bình 4.5

    4

    100% đã tham gia

    Xin chào. Tôi rất thích bài giảng React của Camptin Pangyo. 1. Khuyến khích cho giảng viên giỏi - Tôi đã thử React nhưng có những lo ngại cơ bản về việc tách thành phần. - Tôi không biết ý nghĩa của các file như package trong React. 2. Điều gì tốt - Trước hết, bài giảng được chuẩn bị kỹ lưỡng nên rất dễ nghe. - Các liên kết đính kèm tới tài liệu bài giảng rất hữu ích. - Những phần có thể dễ dàng bỏ qua như cài đặt tiện ích mở rộng đều được đưa vào các bài giảng đầu nên mình nghĩ đây sẽ là một mẹo hữu ích cho những ai chưa biết. - Nội dung phong phú trong thời gian hợp lý (tôi học xong khóa học trong 1 ngày) 3. Điểm đáng thất vọng - Thay vì thất vọng với bài giảng... tôi nghĩ tôi muốn có một bài giảng ở trình độ trung cấp. Thật đáng thất vọng vì có quá nhiều nội dung dễ dàng so với tiêu chuẩn của tôi. Nhìn chung: Tôi cảm thấy đây là một bài giảng được chuẩn bị tốt. Tôi ước gì mình đã tham gia khóa học này khi mới bắt đầu học React. Tôi chắc chắn muốn tham gia khóa học trình độ trung cấp khi nó ra mắt trong tương lai. [Tôi là người duy nhất được 4 điểm nên tôi muốn bổ sung thêm ý kiến] 1. Kỹ năng giảng dạy của Cappang tốt 2. Tôi đã học React, nhưng nếu bạn chỉ học theo mà không biết nó là gì thì hãy nghe nó vô điều kiện. 3. Ở một khía cạnh nào đó, có thể tôi đã mắc sai lầm khi tham gia khóa học vì nghĩ rằng mức độ khó quá cao.

    • captain
      Giảng viên

      Xin chào yjh, cảm ơn bạn đã để lại đánh giá trung thực :) Tôi thực sự đã gặp khó khăn trong việc tìm ra mức độ khó thích hợp khi thiết kế khóa học này, nhưng như bạn đã nói, tôi không nghĩ đây là khóa học ở trình độ trung cấp. Như đã chỉ ra trên trang giới thiệu khóa học, sẽ tốt hơn nếu coi đây là cấp độ mới bắt đầu và gần với cấp độ mới bắt đầu. Nội dung trong bài giảng được liệt kê là Trung cấp trong tài liệu chính thức của React, nên có vẻ khó xác định chính xác nó ở cấp độ nào :) https://react.dev/learn/managing-state Tuy nhiên, như bạn đã nói, tôi vừa xuất bản bài giảng React đầu tiên của mình. Sau này tôi sẽ chuẩn bị những bài giảng khó hơn. Xin vui lòng chờ đợi nó Cảm ơn bạn :)

    • [Tôi là người duy nhất được 4 điểm nên tôi muốn bổ sung thêm ý kiến] 1. Kỹ năng giảng dạy của Cappang tốt 2. Tôi đã học React, nhưng nếu bạn chỉ học theo mà không biết nó là gì thì hãy nghe nó vô điều kiện. 3. Ở một khía cạnh nào đó, có thể tôi đã mắc sai lầm khi tham gia khóa học vì nghĩ rằng mức độ khó quá cao.

  • seeeun님의 프로필 이미지
    seeeun

    Đánh giá 10

    Đánh giá trung bình 4.5

    5

    61% đã tham gia

    Đội trưởng Pangyo chiến đấu

    • winzzone2님의 프로필 이미지
      winzzone2

      Đánh giá 5

      Đánh giá trung bình 5.0

      5

      100% đã tham gia

      Đây là lần đầu tiên tôi nghe bài giảng của Thuyền trưởng Pangyo. Nội dung hay đến nỗi tôi đã hoàn thành khóa học trong 2 ngày haha. Mặc dù mỗi bài giảng đều ngắn gọn và súc tích nhưng tôi rất biết ơn khi thấy lời giải thích rất chu đáo cho người mới bắt đầu. Tôi có kiến ​​thức cơ bản về React, nhưng tôi lắng nghe vì tôi muốn tìm hiểu những gì được nói trong bài giảng và những lời khuyên của Pangyo. Tôi rất hài lòng với kết quả đạt được. Tôi chân thành mong rằng các lớp trung cấp và cao cấp sẽ sớm ra mắt haha. Bây giờ tôi sẽ đi nghe bài giảng tiếp theo của bạn.

      • captain
        Giảng viên

        Tôi rất vui vì bạn thích hack. Cảm ơn bạn đã chỉ ra những điểm cần quan tâm cho người mới bắt đầu :) Tôi hy vọng bạn sẽ thích bài giảng tiếp theo! 😁

    • namdong98978492님의 프로필 이미지
      namdong98978492

      Đánh giá 4

      Đánh giá trung bình 4.3

      4

      12% đã tham gia

      • mily921558님의 프로필 이미지
        mily921558

        Đánh giá 1

        Đánh giá trung bình 5.0

        5

        100% đã tham gia

        Cảm ơn bạn đã giải thích các nguyên tắc cơ bản của React một cách đơn giản và rõ ràng, điều này đã giúp ích cho tôi rất nhiều trong quá trình học tập!

        • captain
          Giảng viên

          Cảm ơn Suzy :)

      910.195 ₫

      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!