Components Library with Vite & Storybook 👨‍💻 Develop an App from Scratch (Part 8)

preview_player
Показать описание
In this video I'll demonstrate how to setup a web UI components library using Vite and its library mode, storybook for the documentation/reference and debugging. The components library will be used for the budget tracking application and in this first video I will do the library repository setup and implement the first two components - the button and icon.

What you'll learn:
- Create a React Components Library using Vite and its Library Mode
- Setup and Use Storybook with React

Repository:

Contents:
0:00 Introduction
5:18 Vite Project Setup
22:47 Storybook Setup
32:45 Button Component
51:38 Icon Component
59:05 Icon Button Component
1:12:12 Conclusion

Social Media:

#vite #react #components
  1. NL Tech
  2. software
  3. app
  4. software architecture
  5. budget app
  6. personal finance app
Рекомендации по теме
Builds with Vite 0:12:52

Builds with Vite #18 - Library mode

Create a library 0:30:00

Create a library using Vite lib mode

Vite in 100 0:02:29

Vite in 100 Seconds

Publish a Vue 0:05:45

Publish a Vue Component to NPM // Vite and Vue 3

Components Library with 1:12:22

Components Library with Vite & Storybook 👨‍💻 Develop an App from Scratch (Part 8)

Publish with Vite 0:15:28

Publish with Vite - React, Typescript and Tailwindcss component to npm

Builds with Vite 0:09:57

Builds with Vite #22 - Publishing NPM package

⚡️ Vite - 0:42:57

⚡️ Vite - Creating And Publishing NPM package (library)

Building a Vite 0:04:22

Building a Vite Component Library Fast with Cursor Agent

Storybook in 100 0:02:19

Storybook in 100 Seconds

Connect.Tech 2022- Paige 0:31:42

Connect.Tech 2022- Paige Kelley - Create a Component Library With Vite, Vue and Tailwind

How to Create 1:19:25

How to Create and Publish a React Component Library

Builds with Vite 0:05:04

Builds with Vite #20 - Importing library using require

Vite Setup - 0:08:14

Vite Setup - Part 3 - Storybook, uma library para os seus components!

How to Set 0:30:50

How to Set Up Jest and React Testing Library on Vite with TypeScript | Step-by-Step Guide

Setting up vite, 0:54:23

Setting up vite, React, TypeScript, eslint, prettier, vitest, testing-library and react-router

TypeScript Monorepo Setup 0:19:44

TypeScript Monorepo Setup with PNPM Workspaces, Vite, VueJS and TailwindCSS

It is a 0:00:16

It is a free mid-backend template based on Vue3, Vite, TypeScript, and Naive UI.

Katerina Skrompelou | 0:13:24

Katerina Skrompelou | Streamline Your Vite dev-flow with Nx | ViteConf 2023

Vite and Module 0:27:36

Vite and Module Federation Makes Micro-Frontends EASY!

⚡️ Vite - 3:49:22

⚡️ Vite - Modern JavaScript Bundler | Full Course

Developing, Documenting, and 0:20:24

Developing, Documenting, and Testing your Vite app with Storybook | Ian VanSchooten | ViteConf 2022

SVGs with Vite 0:09:13

SVGs with Vite and Vue

Get Started with 0:00:27

Get Started with TypeScript & React NOW! w/ Vite. #vite react #typescript #coding

Комментарии
Автор

I have tried in my local and published it but after installing in test project getting error like, Cannot read the properties of null ( reading useContext ).
But believe me there is no useContext used in my project.

After that i installed other react component libraries from npmjs but they are also giving same issue, even after installing all peer and dependencies. Any solution for this ?

BodyBuilder-ek
Автор

First of all thanks for the video!
I'm getting an error, how can I solve this please? Module './components/button/button' was resolved to /components-ui/src/components/button/button.tsx', but '--jsx' is not set.

carolbaroud