Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
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) 21 đánh giá

514 học viên

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

Đá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 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,343

Học viên

671

Đánh giá

393

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ả

21 đánh giá

5.0

21 đánh giá

  • 지니지니님의 프로필 이미지
    지니지니

    Đánh giá 2

    Đánh giá trung bình 5.0

    5

    7% đã tham gia

    강의 컬렉터로서 여러 강의를 들어봤지만 진짜 최고의 강의인것 같습니다! 일단 강사님이 최신 타입스크립트 문법, 리액트 문법에 능숙하셔서 이럴때 저런걸 쓰는구나하고 보고있는 것만으로도 실력이 느는것 같습니다. 원래 책이랑 문서만 보고는 잘 이해가 안가는데, 문서로만 배웠던 내용을 아~ 저렇게 적용하는구나 하고 다시한번 체득하게 됩니다. 레벨은 너무 신입보다는 1-3년차 주니어들이 보면 좋으실 것 같습니다. 일단 강의자체가 실무에 바로 적용 할 수 있고, 리액트 심화부분까지 젹용해보기 때문입니다~ 단순 구현에만 그치지 않고 어떻게하면 좀 더 좋은 코드가 될지 고민해보면서 주니어에서 중니어로 한단계 성장하고 싶은 분들에게는 꼭 추천드립니다. 이제 어떤 ui를 만나더라도 이제 구현할 수 있다는 자신감이 생겼습니다 ㅋㅋㅋㅋ100% 이해를 못햇더라도 챕터별로 짜여졌던 코드를 다시 보면서 실무에 적용할 수 있다는 점이 너무 좋은거 같습니다. 일단 이 강의를 들으면서 완성된 ui 코드를 갖고있는 것 만으로도 강의의 값어치를 넘는거 같네용ㅎㅎ 다음파트도 얼른 나왔으면 좋겠습니다!

    • 정재남
      Giảng viên

      정성스러운 수강평 감사합니다 😃 제가 이 강의를 기획하면서 기대했던 것이 잘 전해진 것 같아 기쁘고 힘이 나네요! 다음 파트도 영상 편집에 박차를 가해서 최대한 빨리 오픈할 수 있도록 해볼게요 😂

  • 강민혜님의 프로필 이미지
    강민혜

    Đánh giá 2

    Đánh giá trung bình 5.0

    5

    13% đã tham gia

    구현 방법을 한 가지만 알려주시는게 아니라 여러 방식을 소개해 주셔서 너무 알차요!! 그리고 단순히 UI 요소의 기본 동작 구현을 넘어서 아코디언 ctrl+F로 검색하면 열리는 기능, 툴팁이 화면 안에서 보이도록 하는 방법 등 정말 디테일한 동작까지 알려주시더라구요. 평소 개발할 때 구현해보지 않은 UI를 개발하면 구글링이나 유튜브를 이용해서 따라했었는데, 강의를 듣고 나니까 '이 UI는 이런식으로 구현해야 되겠구나'라는 감이 잡혀서 구현에 대한 자신감이 많이 생긴 것 같아요. 가격에 비하면 다른 강의들보다 훨씬 얻어갈 수 있는게 많은 것 같습니다. part1도 유익했는데 part2도 요소들 목록을 보니 너무 기대되네요!!! 주니어 프론트 개발자들에게는 최고의 강의인 것 같습니다ㅎㅎ 항상 좋은 강의 감사합니다 :)

    • 정재남
      Giảng viên

      민혜님, 소중한 강의평 감사합니다! 강의내용을 저보다 잘 소개해 주신 것 같아요 ㅎㅎ :D

  • ding-co님의 프로필 이미지
    ding-co

    Đánh giá 8

    Đánh giá trung bình 5.0

    5

    15% đã tham gia

    사실 리뷰를 잘 남기는 성격은 아닌데 이번 강의를 보면서 참 좋다는 생각을 많이 했습니다. 초반에 Next 14 맛보기로 프로젝트 셋팅, 그리고 좌측 사이드바를 만들 때의 생각할 수 있는 방법, 이후 리액트에서 Vanilla 코드를 작성하는 방식, 재사용 컴포넌트별로 어떻게 구현하고 사고하는지에 대해 라이브코딩으로 잘 알려주십니다. 원래 강의를 모두 다 듣고 리뷰를 작성하려고 했는데 지금 작성합니다 ㅎㅎ 은은하게 하루에 컴포넌트 강의 하나씩만 수강해도 좋을 것 같습니다~ 좋은 강의 만들어주셔서 감사합니다!

    • 정재남
      Giảng viên

      정성스러운 수강평 감사합니다 😄 하루 한 컴포넌트씩 보시는거 뒤로 갈수록 힘들어지실까 걱정되네요. 무리하지 않는 선에서 적당히 꾸준히 끝까지 완주해주시길 기대합니다.

  • mamonde456님의 프로필 이미지
    mamonde456

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    67% đã tham gia

    강의를 사놓고 안 들을 거 같아 구매는 신중히 하는 편인데, 강사님 믿고 구매해서 보고 있습니다. 리액트 공식문서 영상도 참 좋았는데, 이번 강의도 굉장히 좋네요. 요즘 UI에 관심이 많았던 터라, 보고 많이 배우고 있습니다. 특히, 타입스크립트도 같이 사용하고, 작성한 로직을 Vanilla로 다시 작성해보면서 복습하는 느낌으로 보고 있어요. 그러면서 강사님께서 쓰시는 코드 구현 방식도 들을 수 있어 더 좋습니다... 파트 2도 나오면 구매하고 싶어요... 좋아요. 난이도가 마냥 쉽지는 않지만 그래서 더 좋습니다. 특히, 다른 수강생 분들의 질의응답도 들을 수 있어 더 좋아요. 제가 궁금하던 내용이 나와서 놀랬네요. ㅋㅋ! 좋은 강의 감사합니다!

    • 정재남
      Giảng viên

      mamonde님 상세한 수강평 감사합니다. 벌써 강의의 2/3를 들으셨군요! 마냥 좋다고만 해주시니 몸둘 바를 모르겠네요 ㅎㅎ 본편과 함께 '복습스터디 영상'도 이어서 꼭 들어보세요! 코드 전체를 리뷰하는 과정에서 더 나은 방안을 고민하고 개선하거나, 몰랐던 정보를 함께 알아가는 과정들이 담겨있거든요.

  • 지호손님의 프로필 이미지
    지호손

    Đánh giá 16

    Đánh giá trung bình 5.0

    5

    30% đã tham gia

    기본적인 웹 요소들을 직접 구현하고 애니메이션을 적용하는 과정을 함께 참여하면서 고민도 해볼 수 있었던 것 같아서 배울 점이 많았습니다. :)

    • 정재남
      Giảng viên

      감사합니다. 재밌게 수강해주시기 바라요 :)

1.462.595 ₫

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!