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

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

313 học viên

Độ khó Cơ bản

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

React
React
vanilla-js
vanilla-js
ui
ui
TypeScript
TypeScript
DOM
DOM
React
React
vanilla-js
vanilla-js
ui
ui
TypeScript
TypeScript
DOM
DOM
날개 달린 동전

Khóa học 추천하고 성장과 수익을 만들어 보세요!

날개 달린 동전

Đối tác tiếp thị

Khóa học 추천하고 성장과 수익을 만들어 보세요!

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

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

5.0

5.0

신원세

7% đã tham gia

Đó là bài giảng đã giúp tôi tập trung tốt hơn vì tôi cảm thấy như mình đang giao tiếp với học sinh hơn là chỉ cung cấp thông tin!! Tôi cũng thích rằng có một phần được triển khai trong phiên bản JavaScript vanilla 👍

5.0

withkey

32% đã tham gia

Các vấn đề mà tôi đã suy nghĩ trong vài tháng khi xây dựng hệ thống thiết kế, đặc biệt là những vấn đề liên quan đến không có đầu và phức hợp, đều đã được giải quyết trong Phần 7. Đặc biệt là ở phần sử dụng Generics trong createContext, tôi rất vui mừng 🫨 Core JavaScript Bắt đầu với. nhiều nghiên cứu tài liệu chính thức về TypeScript, React và các bài giảng thành phần hiệu quả... Cảm ơn bạn rất nhiều vì những bài giảng và tài liệu tuyệt vời. 😭👍

5.0

eddie

100% đã tham gia

Đây là một bài giảng giúp tôi hiểu về cách và tiêu chuẩn để tận dụng trình duyệt, HTML, React, Vanilla khi phát triển UI. Ngoài ra, việc xem bài giảng cũng giúp tôi nắm bắt được quy trình phát triển UI, điều này rất hữu ích.

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 2 Bài giảng này khám phá các cách tái sử dụng các thành phần hiện có.

Phần 1

  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 (bài giảng này)

  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.


Bài giảng liên quan 📺

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à jaenam

33,056

Học viên

692

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

42 bài giảng ∙ (10giờ 35phú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ả

8 đánh giá

5.0

8 đánh giá

  • eddie85님의 프로필 이미지
    eddie85

    Đánh giá 7

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    Đây là một bài giảng giúp tôi hiểu về cách và tiêu chuẩn để tận dụng trình duyệt, HTML, React, Vanilla khi phát triển UI. Ngoài ra, việc xem bài giảng cũng giúp tôi nắm bắt được quy trình phát triển UI, điều này rất hữu ích.

    • imhass님의 프로필 이미지
      imhass

      Đánh giá 2

      Đánh giá trung bình 5.0

      5

      31% đã tham gia

      • wonse님의 프로필 이미지
        wonse

        Đánh giá 6

        Đánh giá trung bình 5.0

        5

        7% đã tham gia

        Đó là bài giảng đã giúp tôi tập trung tốt hơn vì tôi cảm thấy như mình đang giao tiếp với học sinh hơn là chỉ cung cấp thông tin!! Tôi cũng thích rằng có một phần được triển khai trong phiên bản JavaScript vanilla 👍

        • jaenam
          Giảng viên

          Cảm ơn bạn Wonse! Các nghiên cứu và video có hơi khác một chút phải không? cười

      • withkey님의 프로필 이미지
        withkey

        Đánh giá 2

        Đánh giá trung bình 5.0

        5

        32% đã tham gia

        Các vấn đề mà tôi đã suy nghĩ trong vài tháng khi xây dựng hệ thống thiết kế, đặc biệt là những vấn đề liên quan đến không có đầu và phức hợp, đều đã được giải quyết trong Phần 7. Đặc biệt là ở phần sử dụng Generics trong createContext, tôi rất vui mừng 🫨 Core JavaScript Bắt đầu với. nhiều nghiên cứu tài liệu chính thức về TypeScript, React và các bài giảng thành phần hiệu quả... Cảm ơn bạn rất nhiều vì những bài giảng và tài liệu tuyệt vời. 😭👍

        • jaenam
          Giảng viên

          Tôi không biết phải làm gì với tất cả những lời khen ngợi không đáng có 😅 Tôi rất vui vì bạn thấy nó hữu ích và chúng tôi sẽ cố gắng tạo ra nhiều nội dung thú vị và hữu ích hơn trong tương lai!

      • zimablue14님의 프로필 이미지
        zimablue14

        Đánh giá 14

        Đánh giá trung bình 4.4

        5

        100% đã tham gia

        Thời gian học hơi thất vọng và nội dung trị giá 100 điểm.

        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!

        1.440.638 ₫