강의

멘토링

로드맵

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

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

13,150

Học viên

790

Đánh giá

411

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ả

40 đánh giá

5.0

40 đánh giá

  • 안수빈님의 프로필 이미지
    안수빈

    Đánh giá 4

    Đánh giá trung bình 5.0

    5

    18% đã tham gia

    최근 사내 디자인시스템 구축에 대한 욕구가 늘어나 강의를 수강하게 되었습니다. 강의를 듣다보면, 디자인 시스템에 대한 이해 뿐만 아니라, 강사님의 개발에 대한 전반적인 내공을 느낄 수 있어요!! 방향성을 잃은 요즘 강의 외에도 많은 것을 얻어갈 수 있어 좋았습니다.

    • 강병진
      Giảng viên

      친절한 수강평 감사합니다 수빈님! 강의 들으면서 이해가 되지 않는 부분이나 궁금한 점이 있으시면 언제든 질문으로 올려주세요~ 그리고 멘토링 이벤트도 계속 진행중이니 커리어 전반적으로 궁금한 점이 있으시거나 상담이 필요하시면 만나서 이야기하지 않으셔도 되니 구글폼으로 질문을 보내주세요. 제가 도와드릴 수 있는 선에서 최대한 답변 드리도록 하겠습니다.

  • 참참나무님의 프로필 이미지
    참참나무

    Đánh giá 3

    Đánh giá trung bình 5.0

    5

    33% đã tham gia

    • 수병수병님의 프로필 이미지
      수병수병

      Đánh giá 4

      Đánh giá trung bình 5.0

      5

      92% đã tham gia

      공식 문서를 보면서 스토리북을 공부했지만 너무 많은 정보와 종종 문서와 맞지 않아 에러가 나는 부분이 있어 정리된 강의를 찾게 되었습니다. 실무에서 꼭 필요할만한 내용으로 간결하게 정리해주셔서 보기 너무 편했습니다. 다음에도 좋은 강의 부탁드리겠습니다.

      • 강병진
        Giảng viên

        좋은 후기 정말 감사합니다! 😊 공식 문서만으로는 어려움을 느끼실 수 있는데, 강의가 도움이 되었다니 정말 기쁩니다. 실무에 바로 적용할 수 있는 내용으로 계속해서 유익한 강의 만들어가겠습니다!

    • 정호연님의 프로필 이미지
      정호연

      Đánh giá 59

      Đánh giá trung bình 5.0

      5

      32% đã tham gia

      • 원일님의 프로필 이미지
        원일

        Đánh giá 2

        Đánh giá trung bình 5.0

        5

        20% đã tham gia

        최근 요구역량에 storybook가 많이 보여서 수강했습니다. 디자인 시스템을 적용하는데 기본적인 지식을 알기쉽게 설명해줘서 좋아요:)

        • 강병진
          Giảng viên

          좋은 피드백 감사합니다! 얼마전에 진행했던 멘토링에서 신입 프론트엔드 개발자분을 만났는데 첫 회사 인터뷰 할 때 스토리북 경험을 좋게 봐주셨다고 하더라구요. 좋은 결과 있으셨으면 좋겠습니다!

      1.253.534 ₫

      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!