강의

멘토링

커뮤니티

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,841

Học viên

689

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

    講義コレクターとしていくつかの講義を聞いたが本物の最高の講義のようです!とりあえず講師様が最新のタイプスクリプト文法、リアクト文法に上手なので、こういう時にあんなことを書くんだって見ているだけでも実力が遅いようです。もともと本と文書だけ見てはよく理解できないのですが、文書だけで学んだ内容をああああそう適用するんだし、もう一度体得することになります。 レベルは新すぎるよりは1~3年目のジュニアたちが見ればいいと思います。一度講義自体が実務にすぐに適用でき、リアクトの深化部分まで溶かしてみるからです~ 単純な実装にとどまらず、どうすればもっと良いコードになるのか悩んでみながら、ジュニアから中ニアに一段階成長したい方にはぜひおすすめです。 今どんなuiに会っても、今実装できるという自信ができました。いったんこの講義を聞きながら完成したuiコードを持っているだけでも講義の値を超えているようですねㅎㅎ 次のパーツも早く出てほしいです!

    • jaenam
      Giảng viên

      丁寧な受講評ありがとうございます😃 私がこの講義を企画しながら期待していたことがよく伝えられたようで嬉しく力が出ますね! 次のパートも映像編集に拍車をかけてできるだけ早くオープンできるようにしてみますよ😂

  • myne님의 프로필 이미지
    myne

    Đánh giá 2

    Đánh giá trung bình 5.0

    5

    13% đã tham gia

    実装方法を1つだけ教えてくれるのではなく、いろいろな方法を紹介してくれてとても知っています!そして、単にUI要素の基本的な動作実装を超えてアコーディオンctrl + Fで検索すると、開かれる機能、ツールチップが画面内に見えるようにする方法など、本当にディテールな動作まで教えてくれました。 普段開発するときに実装してみなかったUIを開発すればグーグルやYouTubeを利用して従ったんですが、講義を聞いてからだから'たくさんできたと思います。 価格に比べると、他の講義よりもはるかに得られることが多いようです。 part1も有益でしたが、part2も要素のリストを見るととても楽しみですね! ジュニアフロント開発者には最高の講義のようですㅎㅎいつも良い講義ありがとうございます:)

    • jaenam
      Giảng viên

      ミンヘ様、大切な講義評ありがとうございます!講義内容を私よりよく紹介してくれたと思いますㅎㅎ:D

  • pangoons3126님의 프로필 이미지
    pangoons3126

    Đánh giá 8

    Đánh giá trung bình 5.0

    5

    15% đã tham gia

    実はレビューをよく残す性格ではありませんが、今回の講義を見ながらとても良いという考えをたくさんしました。 序盤にNext 14 味見でプロジェクトセッティング、そして左サイドバーを作る際の考えられる方法、 その後、リアクトでVanillaコードを書く方法、再利用コンポーネントごとにどのように実装して思考するかについてライブコーディングでよくお伝えします。もともと講義をすべて聞いてレビューを書こうとしましたが、今作成しますㅎㅎ ほのかに一日にコンポーネント川の一つずつだけ受講してもいいようです〜 良い講義を作ってくれてありがとう!

    • jaenam
      Giảng viên

      丁寧な受講評ありがとうございます😄 一日一コンポーネントずつ見ていくのが後に行くほど大変になるか心配ですね。

  • didgusdhdk3님의 프로필 이미지
    didgusdhdk3

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    12% đã tham gia

    JSの本質的な側面に、より深く踏み込める視点を養える講座だと感じました。 講師の本と講座はいつも助けになります。 ありがとうございます。

    • jirehmuze님의 프로필 이미지
      jirehmuze

      Đánh giá 3

      Đánh giá trung bình 5.0

      Đã chỉnh sửa

      5

      31% đã tham gia

      面白くて内容の濃い講義です。React、Ts、Jsの基本的な概念を実際にどのように適用できるのかを学ぶことができ、同じUIを異なる方式で多く実装してみながら、要求事項別に良い方式をたくさん学ぶことができ、非常に有益でした。 まるで指導者のように現実的な方向性を示してくださりながらも、すべてを教えてくれるわけではない(?)思考力を養ってくれる教授のようなスタイルの講義だと思います。 そのため、講義を聴いていると「私ならこうしてみるだろうな?」という考えが自然と浮かび、「この部分はなぜこのように作成したのだろうか?」と考えながら楽しく聴くことができます。 例えば、hidden属性をReactが強制的に型変換するため、属性を大文字で記述して終わる部分で、私は「どうせrefでアクセスしたのだから、setAttributeメソッドで属性を割り当てればいいのではないか?」と試してみるなど、考える機会がありました。また、クロージャーの活用、GNBのタイプを可読性良く、より安全に扱う方法など、実務的なヒントもたくさん学ぶことができました。 良い講義を作ってくださりありがとうございます。おかげでたくさん学んでいます!

      • jaenam
        Giảng viên

        イレさん、心のこもったレビューありがとうございます!自ら考えながら受講されたとのこと、まさに私が望む理想的な姿です!途中でより良い方法だと思われる内容があれば、コミュニティでご紹介いただけると皆さんの 도움이 될 것 같아요.

    1.460.430 ₫

    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!