강의

멘토링

로드맵

Inflearn brand logo image
BEST
Programming

/

Front-end

Kiểm tra sách truyện và giao diện người dùng có thể được áp dụng trực tiếp vào thực hành

Cách sử dụng sách truyện từ A đến Z. Chúng tôi chỉ cho bạn mọi thứ về sách truyện.

(5.0) 39 đánh giá

517 học viên

  • jasonkang
storybook
uitest
ui-testing
React
TypeScript
TailwindCSS

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

Dịch cái này sang tiếng Việt

  • Phát triển theo định hướng thành phần (CDD) bằng Storybook

  • Tự động kiểm tra giao diện người dùng bằng GitHub Action và CI

  • Sử dụng hệ thống thiết kế thông qua phân phối gói npm

Tôi đã nghe nói về sách truyện, nhưng làm thế nào để sử dụng chúng? 🤔

Khi việc lập kế hoạch dựa trên câu chuyện người dùng ngày càng được chú trọng, những câu chuyện đa dạng đằng sau các thành phần UI được hiển thị trên màn hình cũng ngày càng trở nên quan trọng. Dành cho những ai tò mò về storybook là gì và các tính năng của nó, đây là những gì chúng tôi đã chuẩn bị!

Khóa học này bao gồm cài đặt Storybook, cách áp dụng vào các dự án React, các tính năng chính và cách sử dụng nó. Chúng ta cũng sẽ tìm hiểu cách sử dụng nó trong phát triển thực tế thông qua nhiều ví dụ khác nhau. Khóa học được thiết kế để dễ hiểu ngay cả với người dùng Storybook lần đầu, cho phép bạn học Storybook một cách tự nhiên trong quá trình học.

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

📌 Học dần từ các thành phần đơn giản nhất đến các thành phần phức tạp được xây dựng từ nhiều thành phần.

📌 Bạn có thể trải nghiệm cách phát triển được thực hiện tại hiện trường thông qua nhiều ví dụ khác nhau.

📌 Chúng tôi chia sẻ nhiều cách sử dụng sách truyện trong thực tế với kiến thức chuyên môn có được từ kinh nghiệm của mình.

📌 Chúng tôi cung cấp nhiều mẹo hữu ích về TypeScript và Tailwind có thể sử dụng trong phát triển front-end.

Câu chuyện từ những người tham gia lớp học đầu tiên 📝

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

Sách truyện là gì?
Trong dự án front-end
Cách sử dụng sách truyện
Một nhà phát triển đang choáng váng

Tôi quan tâm đến hệ thống thiết kế.
Trải nghiệm người dùng và trải nghiệm nhà phát triển
Hệ thống thiết kế để cải tiến
Đội ngũ phát triển tôi muốn xây dựng

Tôi tò mò về thử nghiệm UI.
Tự động hóa thử nghiệm UI bằng CI/CD và đánh giá
Các nhà phát triển tò mò về xác thực thành phần

Sau giờ học

  • Hiểu các khái niệm cơ bản và cách sử dụng sách truyện và áp dụng chúng vào dự án của bạn.


  • Bạn có thể phát triển các thành phần theo Web Vitals.

  • Bạn có thể phát triển các thành phần hiệu quả hơn bằng cách sử dụng trình trang trí Storybook.

  • Tự động hóa thử nghiệm UI có thể giúp đảm bảo tính nhất quán trong hệ thống thiết kế của bạn.

  • Bạn có thể phân phối hệ thống thiết kế dưới dạng gói npm để tái sử dụng.

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

Bảng điều khiển màu sắc: Đánh giá giao diện người dùng

Nếu có thành phần mới được thêm vào hệ thống thiết kế thì sao?
Tích hợp GitHub với Chromatic để tạo Pull mới
Tự động tạo Đánh giá UI bất cứ khi nào có Yêu cầu được tạo.

Storybook: Xác thực thành phần UI

Kiểm tra các thành phần UI được phát triển trong truyện
Các thành phần xuất hiện trên màn hình theo các câu chuyện khác nhau như thế nào
Bạn có thể kiểm tra xem nó có được vẽ không

Xác minh câu chuyện thông qua thử nghiệm tương tác

Chúng tôi giúp người dùng sử dụng dịch vụ của mình như thế nào?
Báo cáo về việc sử dụng các thành phần đã phát triển và kể lại câu chuyện
có thể được xác minh

Thiết kế hệ thống sử dụng gói npm

Bạn đang muốn bắt đầu một dự án mới? Thiết kế
Triển khai hệ thống dưới dạng gói npm và cài đặt npm
Bạn có thể dễ dàng tái sử dụng các thành phần thông qua

Ai đã tạo ra khóa học này

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

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

  • Giải thích này dựa trên MacOS, nhưng không có hạn chế nào về hệ điều hành.

  • Nếu bạn có kinh nghiệm thiết lập môi trường phát triển với React, bạn có thể tiếp tục mà không cần bất kỳ thiết lập môi trường riêng biệt nào.

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

  • Liên kết Notion

  • Mã nguồn GitHub

Kiến thức và biện pháp phòng ngừa của người chơi

  • Bất kỳ ai đã từng tạo thành phần bằng React

  • Ngay cả những người không có kinh nghiệm làm dự án nhóm cũng có thể dễ dàng theo dõi.


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

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

  • Các nhà phát triển muốn sử dụng Storybook

  • Nhà phát triển muốn thử phát triển dựa trên thành phần

  • Nhóm phát triển muốn xây dựng hệ thống thiết kế

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

  • Phản ứng

  • Bản đánh máy

  • HTML

  • CSS

Xin chào
Đây là

12,083

Học viên

635

Đánh giá

349

Trả lời

4.9

Xếp hạng

9

Các khóa học

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

Tất cả

24 bài giảng ∙ (2giờ 43phút)

Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

39 đánh giá

5.0

39 đánh giá

  • koreantie3931님의 프로필 이미지
    koreantie3931

    Đánh giá 4

    Đánh giá trung bình 5.0

    5

    18% đã tham gia

    最近、社内デザインシステムの構築に対する欲求が高まっています。 講義を受講しました。 講義を聞くと、デザインシステムの理解だけでなく、 講師様の開発に対する全体的な内空を感じることができます! 方向性を失った最近の講義のほかにも多くのものを手に入れることができてよかったです。

    • jasonkang
      Giảng viên

      親切な受講評 ありがとうございます スビン様!講義を聞きながら理解できない部分や気になる点がありましたら、いつでも質問で投稿してください〜そしてメンタリングイベントも継続中ですので、キャリア全体的に気になる点がありましたり、相談が必要な場合は会って話しませんので、Googleフォームで質問を送ってください。お手伝いできるラインでできるだけ回答させていただきます。

  • dudqja36748176님의 프로필 이미지
    dudqja36748176

    Đánh giá 2

    Đánh giá trung bình 5.0

    5

    33% đã tham gia

    • ybs6803181016님의 프로필 이미지
      ybs6803181016

      Đánh giá 4

      Đánh giá trung bình 5.0

      5

      92% đã tham gia

      公式ドキュメントを見ながらStorybookを勉強しましたが、あまりにも多くの情報と時々ドキュメントと合わずエラーが出る部分があって、整理された講義を探すことになりました。 実務で必ず必要そうな内容で簡潔にまとめてくださって、見るのがとても楽でした。次回も良い講義をお願いいたします。

      • jasonkang
        Giảng viên

        良いレビュー、本当にありがとうございます!😊 公式ドキュメントだけでは難しさを感じられることもあるかと思いますが、講義がお役に立てたとのこと、本当に嬉しいです。 実務にすぐに適用できる内容で、これからも有益な講義を作ってまいります!

    • human2642622님의 프로필 이미지
      human2642622

      Đánh giá 56

      Đánh giá trung bình 5.0

      5

      32% đã tham gia

      • wonza43724985님의 프로필 이미지
        wonza43724985

        Đánh giá 2

        Đánh giá trung bình 5.0

        5

        20% đã tham gia

        最近、求めるスキルにStorybookをよく見かけたので受講しました。デザインシステムを適用する上で、基本的な知識を分かりやすく説明してくれて良かったです:)

        • jasonkang
          Giảng viên

          良いフィードバックありがとうございます! 先日行ったメンタリングで新人フロントエンド開発者の方にお会いしたのですが、初めての会社の面接の際にストーリーブックの経験を良く評価してくれたそうです。 良い結果があると良いですね!

      1.255.557 ₫

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

      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!