강의

멘토링

커뮤니티

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

548 học viên

  • jasonkang
storybook
uitest
ui-testing
React
TypeScript
TailwindCSS

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

14,861

Học viên

1,002

Đánh giá

453

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ả

42 đánh giá

5.0

42 đánh giá

  • koreantie3931님의 프로필 이미지
    koreantie3931

    Đánh giá 4

    Đánh giá trung bình 5.0

    5

    18% đã tham gia

    Recently, the desire to build an in-house design system has increased, so I took the course. While listening to the course, I was able to feel not only the understanding of the design system, but also the instructor's overall development skills!! I was able to gain a lot of things in addition to the course, which I lost my direction for these days.

    • jasonkang
      Giảng viên

      Thank you for your kind review, Subin! If you have any questions or concerns while taking the class, please feel free to ask questions at any time. Also, the mentoring event is ongoing, so if you have any questions about your career in general or need advice, you don’t have to meet in person to talk, so please send me a question via Google Form. I will do my best to answer to the best of my ability.

  • dydgus0421님의 프로필 이미지
    dydgus0421

    Đánh giá 2

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    I was just thinking about it and couldn't figure out how to apply it, but thanks to your detailed explanation, I think I can give it a try now. Thank you~!

    • dudqja36748176님의 프로필 이미지
      dudqja36748176

      Đánh giá 3

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

        I studied Storybook by looking at the official documentation, but there was too much information and sometimes errors occurred due to parts that didn't match the documentation, so I ended up looking for an organized lecture. It was very convenient to view because you organized it concisely with content that would be essential for practical work. I would appreciate good lectures next time as well.

        • jasonkang
          Giảng viên

          Thank you so much for the great review! 😊 It's understandable to find official documentation challenging, so I'm truly glad the lecture was helpful. I will continue to create useful lectures with content that can be directly applied to practical work!

      • human2642622님의 프로필 이미지
        human2642622

        Đánh giá 66

        Đánh giá trung bình 5.0

        5

        32% đã tham gia

        1.251.797 ₫

        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!