inflearn logo

UI Frontend Cốt lõi - Phần 1

Hãy thử tạo các thành phần UI tiêu biểu bằng cả phiên bản React và JavaScript thuần túy, trải nghiệm nhiều góc nhìn và phương pháp khác nhau bằng cách sử dụng Web API, từ đó nâng cao kỹ năng phát triển frontend của bạn thêm một bậc.

(5.0) 26 đánh giá

551 học viên

Độ khó Cơ bản

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

React
React
TypeScript
TypeScript
DOM
DOM
ui
ui
vanilla-js
vanilla-js
React
React
TypeScript
TypeScript
DOM
DOM
ui
ui
vanilla-js
vanilla-js

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

5.0

5.0

이레

31% đã tham gia

Đây là một bài giảng thú vị và bổ ích. Bạn có thể học cách áp dụng các khái niệm cơ bản về React, TS, JS vào thực tế và thực hiện cùng một UI theo nhiều cách khác nhau, điều này rất hữu ích vì bạn có thể học được nhiều phương pháp hay cho từng yêu cầu. Tôi nghĩ đây là một bài giảng theo phong cách của một người cố vấn, người đưa ra những định hướng thực tế nhưng không cho bạn biết mọi thứ, mà là một giáo sư giúp bạn phát triển khả năng tư duy. Vì vậy, khi nghe bài giảng, bạn sẽ tự nhiên có suy nghĩ "Nếu là mình thì mình sẽ làm như thế này?" và bạn có thể nghe một cách thú vị trong khi suy nghĩ "Tại sao phần này lại được viết như thế này?". Ví dụ, trong phần thuộc tính hidden được viết bằng chữ hoa vì React ép kiểu, tôi đã nghĩ "Vì mình đã truy cập bằng ref rồi, mình có thể gán thuộc tính bằng phương thức setAttribute không?", và tôi đã có cơ hội để suy nghĩ, đồng thời học được rất nhiều mẹo thực tế như cách sử dụng closure, cách xử lý kiểu của GNB một cách an toàn và dễ đọc hơn. Cảm ơn bạn đã tạo ra một bài giảng hay. Nhờ đó mà tôi đã học được rất nhiều điều!

5.0

보나

100% đã tham gia

Phải mất một thời gian dài để nghiên cứu vì có rất nhiều khái niệm chưa biết và những thứ xa lạ, nhưng đó là một cách tuyệt vời để không chỉ có được sự tự tin trong việc tạo các thành phần UI mà còn để nghiên cứu React, vanilla JavaScript và TypeScript. Ngoài ra, khi tạo các thành phần UI, tôi từng bị căng thẳng khi xem xét nhiều tình huống khác nhau và suy nghĩ về các tiêu chí đánh giá vì không có tiêu chuẩn rõ ràng. Tôi nghĩ nó sẽ rất thú vị haha. Vì là video học tập nên việc nghe ý kiến ​​của các học viên khác rất thú vị và hữu ích. Tôi đang học hỏi rất nhiều. Cảm ơn!

5.0

지니지니

7% đã tham gia

Với tư cách là người sưu tầm bài giảng, tôi đã tham gia nhiều bài giảng nhưng tôi nghĩ đây là bài giảng hay nhất! Trước hết, người hướng dẫn thành thạo cú pháp TypeScript và cú pháp React mới nhất, vì vậy tôi cảm thấy như kỹ năng của mình đang được cải thiện chỉ khi xem anh ấy sử dụng nó vào những lúc như vậy. Ban đầu, tôi không hiểu rõ nếu chỉ nhìn vào sách và tài liệu, nhưng một lần nữa tôi nhận ra rằng mình đang áp dụng những gì đã học chỉ qua tài liệu. Tôi nghĩ trình độ sẽ tốt hơn đối với những người mới có 1-3 năm kinh nghiệm hơn là người mới. Trước hết, bản thân bài giảng có thể được áp dụng trực tiếp vào thực tế và thậm chí cả những phần nâng cao của React cũng được áp dụng~ Tôi chắc chắn giới thiệu nó cho những ai muốn phát triển từ cấp dưới lên cấp dưới bằng cách nghĩ về cách tạo mã tốt hơn thay vì chỉ thực hiện đơn giản. Bây giờ, tôi tự tin rằng mình có thể triển khai bất kỳ giao diện người dùng nào mà tôi gặp phải. Ngay cả khi tôi không hiểu nó 100%, tôi nghĩ thật tuyệt khi tôi có thể áp dụng nó vào thực tế bằng cách nhìn lại mã được sắp xếp theo chương. Trước hết, tôi nghĩ chỉ cần có mã UI hoàn chỉnh trong khi nghe bài giảng này là xứng đáng với giá trị của bài giảng haha. Tôi hy vọng phần tiếp theo sẽ sớm ra mắt!

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

  • Kiến thức thực tế React

  • DOM API

  • Khả năng vận dụng các Web API đa dạng khác

🎉Giảm giá 25% khi đăng ký qua lộ trình học🎉

Link lộ trình: https://inf.run/cNuxY

(Ngay cả khi bạn đã tham gia một trong hai khóa học, khóa học còn lại vẫn sẽ được áp dụng mức giảm giá 25%.)

Hãy cùng tự tay tạo nên các yếu tố UI đa dạng nhé!

Chúng ta sẽ tạo phiên bản bằng JavaScript thuần (vanilla-js) và phiên bản React, đồng thời áp dụng đa dạng các phương pháp nhất có thể.

  • Hãy viết các thành phần (component) với nhiều phiên bản khác nhau và trải nghiệm so sánh đặc điểm của từng loại.


  • Hãy nâng cao cảm quan thực tế bằng cách áp dụng các API được sử dụng nhiều trong công việc chuyên môn.

Khuyên dùng cho những đối tượng sau


Nhà phát triển frontend thiếu tự tin trong việc phát triển do chỉ phụ thuộc vào các thư viện khi xây dựng UI component

Những người chưa quen thuộc với HTML5 API và DOM API mới nhất

Những người đang khao khát cải thiện kỹ năng phát triển component UI

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

  • Chỉ với một khóa học này, mọi thứ về thành phần UI sẽ được giải quyết! Bạn có thể tích lũy kiến thức phát triển về các thành phần UI ở cấp độ của một nhà phát triển Front-end cấp cao.

  • Bằng cách kết hợp và phát triển các yếu tố được đề cập trong bài giảng này, bạn sẽ có đủ tự tin để tự mình tạo ra bất kỳ yếu tố UI mới nào.


Bạn sẽ học được những nội dung này


Phần 1 (Bài giảng này)

  1. Accordion

  2. Menu tab

  3. Tooltip

  4. Hộp văn bản phản hồi (Responsive Textbox)

  5. Rút gọn văn bản nhiều dòng

  6. Tải chậm (Lazy loading)

  7. Cuộn vô hạn

  8. Thanh cuộn ngang

  9. Scrollspy

Part 2 (Dự kiến ra mắt vào tháng 5)

  1. Snackbar

  2. Modal

  3. Popover

  4. Slide hình ảnh

  5. Carousel

  6. Bộ sưu tập trung

  7. Select box

  8. Tự động hoàn thành

  9. Danh sách kéo và thả

Đặc điểm của bài giảng này


Coding trực tiếp sống động

Đây là bài giảng được ghi hình và biên tập lại từ buổi live coding trong nhóm học tập trực tuyến, với ưu điểm là mang lại cảm giác chân thực sống động và phản hồi nhanh chóng. Tôi sẽ đưa ra nhiều góc nhìn đa dạng không gò bó trong khuôn khổ nhất định, đồng thời bạn cũng có thể trải nghiệm các phương án giải quyết cho những vấn đề phát sinh ngoài dự kiến.

Điều chỉnh độ khó theo từng bước, giới thiệu và áp dụng các API mới nhất

Tôi đã cấu trúc bài giảng bằng cách nhóm các yếu tố có kỹ năng yêu cầu tương tự nhau lại với nhau và tăng dần độ khó theo từng bước. Ngoài ra, tôi cũng tập trung vào việc giúp người học trở nên quen thuộc thông qua việc giới thiệu và áp dụng rộng rãi các HTML5 và DOM API mới nhất.

Lưu ý trước khi khóa học bắt đầu

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

Chỉ cần có môi trường từ phiên bản tương ứng trở lên là được.

  • Node.js 16

  • React 18

  • Next.js 13

  • TypeScript 4


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

  • Cung cấp mã ví dụ dưới dạng tệp nén.

Kiến thức tiên quyết và lưu ý

  • Khóa học được tiến hành dựa trên tiền đề là bạn đã nắm vững cú pháp HTML/CSS cơ bản, cú pháp JavaScript và cú pháp React.

  • Next.js và TypeScript chỉ được sử dụng như những công cụ hỗ trợ để thuận tiện cho việc thao tác, nên sẽ không được đề cập chi tiết.

  • Khóa học này là video ghi lại và biên tập từ buổi học nhóm (study) do người chia sẻ kiến thức thực hiện.


Bạn muốn tìm hiểu thêm
các bài giảng khác của người chia sẻ kiến thức?

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

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

  • Người định hướng trở thành nhà phát triển Front-end

  • Lập trình viên Front-end Junior

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

  • HTML

  • CSS

  • JavaScript (ES6+)

  • React

  • TypeScript

Xin chào
Đây là jaenam

33,461

Học viên

703

Đánh giá

395

Trả lời

4.8

Xếp hạng

11

Các khóa học

Xin chào, tôi là Jung Jae-nam, một nhà phát triển Front-end cấp cao.
Tôi đang thực hiện nhiều hoạt động khác nhau với mục tiêu hướng tới một văn hóa chia sẻ lành mạnh, nơi chúng ta cùng giúp đỡ và phát triển lẫn nhau.

Sách đã xuất bản: Core JavaScript

Kênh YouTube: FE Jaenam

Bài viết và video phỏng vấn:

Thêm

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

Tất cả

49 bài giảng ∙ (12giờ 7phút)

Tài liệu khóa học:

Tài liệu bài giảng
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

26 đánh giá

5.0

26 đánh giá

  • didgusdhdk3님의 프로필 이미지
    didgusdhdk3

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    12% đã tham gia

    Tôi nghĩ đây là khóa học mang lại cái nhìn sâu hơn để tìm hiểu khía cạnh bản chất của JS. Sách và bài giảng của giảng viên luôn hữu ích. Cảm ơn.

    • myne님의 프로필 이미지
      myne

      Đánh giá 2

      Đánh giá trung bình 5.0

      5

      13% đã tham gia

      Thật hữu ích khi bạn không chỉ dạy chúng tôi một cách thực hiện mà còn giới thiệu nhiều cách!! Và ngoài việc chỉ đơn giản triển khai các thao tác cơ bản của các thành phần giao diện người dùng, họ thậm chí còn giải thích các thao tác rất chi tiết, chẳng hạn như các chức năng được mở khi tìm kiếm bằng tổ hợp phím ctrl+F và cách hiển thị chú giải công cụ trên màn hình. Khi phát triển một giao diện người dùng mà trước đây tôi chưa từng triển khai, tôi thường theo dõi qua Google hoặc YouTube, nhưng sau khi nghe bài giảng, tôi có cảm giác rằng 'giao diện người dùng này nên được triển khai theo cách này và tôi đã có được sự tự tin trong quá trình thực hiện tôi nghĩ có rất nhiều điều đã xảy ra. So với mức giá, có vẻ như bạn có thể nhận được nhiều lợi ích hơn so với các khóa học khác. Phần 1 rất hữu ích, nhưng tôi thực sự mong được xem danh sách các thành phần trong Phần 2!!! Tôi nghĩ đây là bài giảng hay nhất dành cho các nhà phát triển front-end cấp dưới haha. Cảm ơn bạn vì những bài giảng luôn tuyệt vời :)

      • jaenam
        Giảng viên

        Minhye, cảm ơn bạn đã đánh giá bài giảng có giá trị của bạn! Mình thấy bạn giới thiệu nội dung bài giảng hay hơn mình haha ​​:D

    • pangoons3126님의 프로필 이미지
      pangoons3126

      Đánh giá 8

      Đánh giá trung bình 5.0

      5

      15% đã tham gia

      Thực ra tôi không phải là người thường xuyên để lại nhận xét, nhưng khi xem bài giảng này, tôi nghĩ nó thực sự rất hay. Ở phần đầu, chúng tôi sẽ cung cấp cho bạn bản xem trước của Next 14, thiết lập dự án và cách suy nghĩ về việc tạo thanh bên trái. Sau đó, anh ấy sẽ dạy bạn thông qua mã hóa trực tiếp cách viết mã vanilla trong React cũng như cách triển khai và suy nghĩ về từng thành phần có thể tái sử dụng. Ban đầu tôi định viết bài đánh giá sau khi nghe hết bài giảng, nhưng giờ tôi mới viết đây haha. Tôi nghĩ sẽ là một ý kiến ​​hay nếu chỉ học một bài giảng mỗi ngày. Cảm ơn bạn đã tạo ra một khóa học tuyệt vời!

      • jaenam
        Giảng viên

        Cảm ơn bạn đã đánh giá khóa học chân thành của bạn 😄 Tôi lo lắng rằng việc xem từng phần một ngày sẽ trở nên khó khăn hơn theo thời gian. Chúng tôi hy vọng rằng bạn sẽ hoàn thành khóa học khá đều đặn đến cuối mà không cố gắng quá sức.

    • 71summernight님의 프로필 이미지
      71summernight

      Đánh giá 4

      Đánh giá trung bình 5.0

      5

      7% đã tham gia

      Với tư cách là người sưu tầm bài giảng, tôi đã tham gia nhiều bài giảng nhưng tôi nghĩ đây là bài giảng hay nhất! Trước hết, người hướng dẫn thành thạo cú pháp TypeScript và cú pháp React mới nhất, vì vậy tôi cảm thấy như kỹ năng của mình đang được cải thiện chỉ khi xem anh ấy sử dụng nó vào những lúc như vậy. Ban đầu, tôi không hiểu rõ nếu chỉ nhìn vào sách và tài liệu, nhưng một lần nữa tôi nhận ra rằng mình đang áp dụng những gì đã học chỉ qua tài liệu. Tôi nghĩ trình độ sẽ tốt hơn đối với những người mới có 1-3 năm kinh nghiệm hơn là người mới. Trước hết, bản thân bài giảng có thể được áp dụng trực tiếp vào thực tế và thậm chí cả những phần nâng cao của React cũng được áp dụng~ Tôi chắc chắn giới thiệu nó cho những ai muốn phát triển từ cấp dưới lên cấp dưới bằng cách nghĩ về cách tạo mã tốt hơn thay vì chỉ thực hiện đơn giản. Bây giờ, tôi tự tin rằng mình có thể triển khai bất kỳ giao diện người dùng nào mà tôi gặp phải. Ngay cả khi tôi không hiểu nó 100%, tôi nghĩ thật tuyệt khi tôi có thể áp dụng nó vào thực tế bằng cách nhìn lại mã được sắp xếp theo chương. Trước hết, tôi nghĩ chỉ cần có mã UI hoàn chỉnh trong khi nghe bài giảng này là xứng đáng với giá trị của bài giảng haha. Tôi hy vọng phần tiếp theo sẽ sớm ra mắt!

      • jaenam
        Giảng viên

        Cảm ơn bạn đã đánh giá khóa học chân thành của bạn 😃 Tôi rất vui và được khích lệ vì những gì tôi mong đợi khi lập kế hoạch cho bài giảng này đã được thực hiện tốt! Chúng tôi sẽ tăng tốc độ edit video phần tiếp theo để có thể ra mắt trong thời gian sớm nhất 😂

    • jirehmuze님의 프로필 이미지
      jirehmuze

      Đánh giá 3

      Đánh giá trung bình 5.0

      Đã chỉnh sửa

      5

      31% đã tham gia

      Đây là một bài giảng thú vị và bổ ích. Bạn có thể học cách áp dụng các khái niệm cơ bản về React, TS, JS vào thực tế và thực hiện cùng một UI theo nhiều cách khác nhau, điều này rất hữu ích vì bạn có thể học được nhiều phương pháp hay cho từng yêu cầu. Tôi nghĩ đây là một bài giảng theo phong cách của một người cố vấn, người đưa ra những định hướng thực tế nhưng không cho bạn biết mọi thứ, mà là một giáo sư giúp bạn phát triển khả năng tư duy. Vì vậy, khi nghe bài giảng, bạn sẽ tự nhiên có suy nghĩ "Nếu là mình thì mình sẽ làm như thế này?" và bạn có thể nghe một cách thú vị trong khi suy nghĩ "Tại sao phần này lại được viết như thế này?". Ví dụ, trong phần thuộc tính hidden được viết bằng chữ hoa vì React ép kiểu, tôi đã nghĩ "Vì mình đã truy cập bằng ref rồi, mình có thể gán thuộc tính bằng phương thức setAttribute không?", và tôi đã có cơ hội để suy nghĩ, đồng thời học được rất nhiều mẹo thực tế như cách sử dụng closure, cách xử lý kiểu của GNB một cách an toàn và dễ đọc hơn. Cảm ơn bạn đã tạo ra một bài giảng hay. Nhờ đó mà tôi đã học được rất nhiều điều!

      • jaenam
        Giảng viên

        이레님, cảm ơn bạn vì bài đánh giá chân thành! Bạn tự mình suy nghĩ và học tập, đó chính là hình mẫu lý tưởng mà tôi mong muốn! Nếu bạn có bất kỳ nội dung nào mà bạn cho là phương pháp tốt hơn trong quá trình học, hãy chia sẻ lên cộng đồng để giúp đỡ mọi người nhé.

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

    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!

    Giảm 25% cho thành viên mới

    1.090.030 ₫

    25%

    1.453.380 ₫