강의

멘토링

커뮤니티

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) 36 đánh giá

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

Học viên

4,732

Đánh giá

3,815

Trả lời

4.9

Xếp hạng

19

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ả

36 đánh giá

4.9

36 đá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á 7

    Đánh giá trung bình 4.4

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

        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 :)

      Ưu đãi có thời hạn, kết thúc sau 1 ngày ngày

      715.965 ₫

      22%

      924.789 ₫

      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!