강의

멘토링

커뮤니티

BEST
Programming

/

Front-end

[React/VillaJS] Tự tạo các phần tử UI Phần 1

Bằng cách tạo các thành phần UI đại diện trong React và các phiên bản JavaScript thuần túy, hãy trải nghiệm nhiều quan điểm và phương pháp khác nhau bằng API Web, đồng thời cải thiện hơn nữa kỹ năng phát triển giao diện người dùng của bạn.

(5.0) 24 đánh giá

539 học viên

  • jaenam
실습 중심
바닐라JS
React
vanilla-js
ui
TypeScript
DOM

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

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

  • Phản ứng kiến ​​thức làm việc

  • API DOM

  • Khả năng sử dụng nhiều API Web khác

🎉 Giảm giá 25% khi bạn tham gia khóa học thông qua Roadmap 🎉

Liên kết lộ trình: https://inf.run/cNuxY

(Nếu bạn đang học một trong hai khóa học, bạn vẫn sẽ được giảm giá 25% cho các khóa học còn lại .)

Hãy cùng nhau tạo ra nhiều thành phần UI khác nhau nhé!

Hãy cùng tạo một phiên bản JavaScript thuần túy (vanilla-js) và một phiên bản React, đồng thời giới thiệu nhiều phương pháp khả thi khác nhau.

  • Thử nghiệm với các phiên bản khác nhau của thành phần và so sánh các tính năng của chúng.


  • Phát triển kỹ năng thực tế của bạn bằng cách áp dụng các API được sử dụng rộng rãi trong lĩnh vực này.

Tôi giới thiệu điều này cho những người này


Các thành phần UI được phát triển bởi các nhà phát triển front-end, những người không tự tin khi phát triển chỉ dựa trên thư viện.

Dành cho những ai chưa quen với API HTML5 và API DOM mới nhất.

Bất kỳ ai cảm thấy khao khát cải thiện kỹ năng phát triển thành phần UI của mình

Sau giờ học

  • Bài giảng này là tất cả những gì bạn cần biết về các thành phần UI ! Bạn có thể đạt được kiến thức phát triển tương đương một lập trình viên front-end cao cấp khi nói đến các thành phần UI.

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


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


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

  1. đàn accordion

  2. Menu tab

  3. Chú giải công cụ

  4. Hộp văn bản đáp ứng

  5. Dấu ba chấm nhiều dòng

  6. Tải chậm

  7. Cuộn vô hạn

  8. Hộp cuộn ngang

  9. Cuộn gián điệp

Phần 2 (dự kiến mở vào tháng 5)

  1. quán ăn nhẹ

  2. Âm điệu

  3. Popover

  4. Hình ảnh trượt

  5. Vòng quay ngựa gỗ

  6. Phòng trưng bày

  7. Chọn hộp

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

  9. Kéo và thả danh sách

Các tính năng của khóa học này


Mã hóa trực tiếp sống động

Bài giảng này được ghi hình và chỉnh sửa trực tiếp từ quá trình mã hóa trực tiếp trong khóa học trực tuyến, với ưu điểm là hình ảnh sống động và phản hồi nhanh chóng. Bài giảng cũng trình bày nhiều góc nhìn khác nhau, không bị bó hẹp trong một khuôn khổ cố định, giúp bạn có thể trải nghiệm giải pháp cho những vấn đề bất ngờ.

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

Khóa học được thiết kế sao cho các yếu tố có kỹ năng tương tự được nhóm lại với nhau và độ khó tăng dần. Ngoài ra, trọng tâm là giúp học viên làm quen với các API HTML5 và DOM mới nhất bằng cách giới thiệu và áp dụng chúng.

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

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

Bạn chỉ cần có các phiên bản sau hoặc cao hơn:

  • Node.js 16

  • Phản ứng 18

  • Next.js 13

  • TypeScript 4


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

  • Mã ví dụ được cung cấp ở định dạng tệp nén.

Kiến thức và ghi chú của người chơi

  • Lớp học được tiến hành với giả định rằng bạn đã quen thuộc với HTML/CSS cơ bản, ngữ pháp JavaScript và ngữ pháp React.

  • Next.js và TypeScript, v.v. chỉ được sử dụng như những công cụ tiện lợi và không được đề cập chi tiết.

  • Bài giảng này là phiên bản ghi âm và biên tập của một nghiên cứu do một người chia sẻ kiến thức thực hiện.


Người chia sẻ kiến thức
Bạn có tò mò về các bài giảng khác không?

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

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

  • Nhà phát triển front-end đầy tham vọng

  • Nhà phát triển front-end cơ sở

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

  • HTML

  • CSS

  • JavaScript (ES6+)

  • Phản ứng

  • Bản đánh máy

Xin chào
Đây là

32,820

Học viên

688

Đánh giá

395

Trả lời

4.8

Xếp hạng

11

Các khóa học

안녕하세요, 시니어 프론트엔드 개발자 정재남 입니다.
서로 돕고 함께 발전하는 건전한 공유문화를 지향하여 다양한 활동을 하고 있습니다.

저서: 코어 자바스크립트

유튜브 채널: FE재남

아티클 및 인터뷰 영상:

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ả

24 đánh giá

5.0

24 đánh giá

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

    Đánh giá 2

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

  • 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.

  • 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.

    • 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é.

    1.463.428 ₫

    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!