Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Build and Publish React UI Component Library to NPM
Rating: 4.1 out of 5(8 ratings)
92 students

Build and Publish React UI Component Library to NPM

Learn to Create, Publish, and Manage Reusable UI Components with Rollup, Storybook, and NPM
Created byK.Sathya Prakash Reddy
Last updated 9/2024
English
English [Auto],

What you'll learn

  • Understand what a UI component library is and its purpose.
  • Learn how to set up and configure Rollup for building your library.
  • Step-by-step guide on publishing your UI components to NPM.
  • Test your published components in real-world applications.
  • Learn how to make and manage updates to your NPM-published libraries.
  • Use the npm link feature to test your components locally without publishing.
  • Introduction and setup of Storybook for developing and showcasing your components.
  • Learn what a Story is and how to write Stories for your components.
  • Build 10 UI components and create Stories for each.
  • Learn how to add theming capabilities to your UI component library.
  • Guide to deploying your Storybook instance.
  • Full access to the complete source code of the project.

Course content

18 sections • 48 lectures • 6h 20m total length

  • UI Component library demo8:43

Requirements

  • Basic knowledge of React and Tailwind CSS is required.

Description

Welcome to the course on "Building and Publishing a UI Component Library to NPM"! Whether you're a seasoned developer or just starting out, this course is designed to equip you with the skills and knowledge needed to create, publish, and maintain your very own UI component library. We'll guide you through the entire process, from understanding the basics of component libraries to mastering tools like Rollup and Storybook, and even publishing your work to NPM. By the end of this course, you'll have not only a solid grasp of building reusable UI components but also the confidence to share your work with the world. Let's get started on this exciting journey together!


Below are the key topics we’ll be covering in this course:


  1. Introduction to UI Component Libraries: Understand what a UI component library is and its purpose.

  2. Integrating Rollup: Learn how to set up and configure Rollup for building your library.

  3. Publishing to NPM: Step-by-step guide on publishing your UI components to NPM.

  4. Testing in Consumer Apps: Test your published components in real-world applications.

  5. Updating Published Libraries: Learn how to make and manage updates to your NPM-published libraries.

  6. Testing with npm link: Use the npm link feature to test your components locally without publishing.

  7. Storybook Setup: Introduction and setup of Storybook for developing and showcasing your components.

  8. Writing Stories: Learn what a Story is and how to write Stories for your components.

  9. Component Development: Build 10 UI components and create Stories for each.

  10. Implementing Themes: Learn how to add theming capabilities to your UI component library.

  11. Deploying Storybook: Guide to deploying your Storybook instance.

  12. Access to Source Code: Full access to the complete source code of the project.


Who this course is for:

  • This course is perfect for web developers, UI/UX designers, and frontend engineers who want to elevate their skills by building and publishing reusable UI components. Whether you're a beginner looking to understand the fundamentals of component libraries or an experienced developer aiming to refine your workflow and contribute to open-source projects, this course offers valuable insights and practical knowledge. If you're interested in streamlining your development process, improving code maintainability, and sharing your work with the broader developer community, this course is tailored for you.

Report abuse