Build a Component Library for React with Typescript [2021]

Подписаться 6 тыс.

Просмотров 24 тыс.

50% 1

Today we are going to learn how to build a component library with react!
Github with all of the files you can copy pasta: github.com/joeythelantern/Com...
Typescript Config Reference: www.typescriptlang.org/tsconfig
Video Info
Music by Tesko / prod. THXMOS:
/ @prod.thxmos6970
Support
Like this video? You can show your support by buying me a coffee ☕❤️: www.buymeacoffee.com/nerdycanuck
Socials
Github: github.com/joeythelantern
Twitter: / thenerdycanuck
About The Channel
The knowledge that I share here is mostly from my personal experiences. I wouldn't say I'm a 20 year professional, rather I am just a DevOps / Software Engineer with a lot of experience who enjoys teaching what I know in my spare time. I believe that sharing some of my basic knowledge on this platform can help others get started. There are many ways to program something and the videos you see here are my take on the NodeJS / Typescript / and sometimes Unity world. If this channel helps you learn, or helps you think differently then my job is done 😊.
#react #componentlibrary #typescript

Наука

Опубликовано:

25 дек 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 74

@johnmark-ps8jy 2 года назад

That's great man, i appreciate your work. Keep it up!

@Minecraftzocker766 Год назад

Many thanks for this great tutorial! 🙏🏼

@bo4695 2 года назад

Thanks mate! Another great tutorial 🔥

@ankitmehrotra8519 2 года назад

Excellent tutorial. Learned a lot from it. Subscribed...:)

@igordztv 2 года назад

Really appreciate this!

@sumitwadhwa8823 Год назад

Excellent video. Thanks for sharing.

@rodrigonovais9624 Год назад

14:40 Simpler override defaults: Object.assign(defaultOptions, options) You can also use Logical Assignment Operators, like: _styles.color ??= color

@manudrlng1569 2 года назад

Thanks buddy, it was very helpful. 👍

@lucaford2598 2 года назад

This video is perfect. Recommended 100%. You don't even realize how many issues you avoid only by following this steps.

@TheNerdyCanuck 2 года назад

Glad you liked it.

@lucaford2598 2 года назад

@@TheNerdyCanuck hey! how are you?. me again. Can I ask you a question? if you want to add an .css file, like styles.css, you have to add some sort of a plugin transpiler, right? if you use TSC build and you have an .css file, when you want to import that project in another one as a library you get an error that the specific .css file couldn't be found. You know if you can sort this error with TSC or I should move to an standar webpack configuration? thanks. Great videos!

@user-fo4wu5tj7k 8 месяцев назад

perfect, thanks a lot. you resolve my problem very well!!

@daniel84136 Год назад

Really great video. Thanks so much.

@justinwang9660 Месяц назад

thank you. very nice toturial.

@ravitandon9351 Год назад

Thank you! Well done!

@farsal6271 Год назад

Great Tutorial, 17:25 npm install from local package was what i wish to find for writing some unit test.

@aalhommada5675 Год назад

Thanks a lot ,

@ALFREDVPAUL 7 месяцев назад

Nice!! can you explain how to work with theme Dark and Light mode.

@karlkrasnowsky3895 2 года назад

So close! This is by far the most straight forward approach to library creation, especially given a smaller sized library. After building a library using this approach, however, I found that I'm in need of including stylesheet (css) files in my component imports and the build as provided in this tutorial doesn't bundle them. Any hints on how I might be able to do this without resorting to a full rollup bundler?

@TheNerdyCanuck 2 года назад

Lol I was about to suggest rollup but let's avoid that. As far as I know, tsc won't compile / transfer over CSS, so the only clean work around is creating objects of type React.CSSPropeties and putting those in TS files. However, some people have 1k+ lines of CSS already, so I'll look into another way to get those CSS files over. I suspect we could write a script that executes and transfers the CSS over to the appropriate spots and try that (or keep the CSS somewhere common the like root folder)

@karlkrasnowsky3895 2 года назад

@@TheNerdyCanuck I started looking at styled-components and may continue, but yet one more concept to absorb. I just want css! 😆

@OswaldChisala Год назад

@@karlkrasnowsky3895 at my startup, we use tailwind. we compile the tailwind first, then import the resulting output.css file like "import 'output.css';" in a .ts file. then in package json, we specify the ts file in the "files" param (shown in this video at some point if I recall) and everything's good to go. To be fair, we don't actually build our ui package. Instead we use turbo to transpile it into a nextJS workspace package, and everything just works. hope this helps or gives you ideas. best wishes.

@parsa264 2 месяца назад

@@OswaldChisala how did you do that? how did you compile tailwind and used it in your package?

@nazarkravchenko6891 Год назад

thank you

@zlatkoiliev8927 2 года назад

Great tutorial mate! Can you also show how can we add icons and tailwindcss, I guess we will need webpack for that?!? Also a storybook will be great to have too!

@TheNerdyCanuck 2 года назад

So I was investigating a way to do it without webpack or rollup or external tools but it's looking more and more like we need to use it. No big deal, I think I can make one like this to add css and extra assets (like icons, etc)

@zlatkoiliev8927 2 года назад

@@TheNerdyCanuck I managed to do it by using copy-files and I run it after the build scripts, but the downside is we can only use pure css and it’s not minified.

@parsa264 2 месяца назад

thank you, but how to use tailwind or sass for this library?

@stanleyfestus5599 Год назад

Great video! I really thought rollup or webpack is a must. I have a problem though. I am publishing to npm with git but have error about using useState hooks. How can I fix this?

@TheNerdyCanuck Год назад

It's a must if you want to use CSS and other files

@brychanmd 11 месяцев назад

If I want to use tailwindcss both in my component library and in the projects that are consuming it, how do I do that?

@prathapreddy244 Год назад

How do we compile assests, css/scss?

@CodeDreamer68 Год назад

Would putting the react and react-dom in "peerDependencies" of the component library solve the problem of hooks you mentioned?

@TheNerdyCanuck Год назад

If you are referring to the problem of running it locally instead of installing it from source, no. You can try it though, if it works let me know!!

@phiyoutube3422 Год назад

can we use a Button from @mui/material/Button in this component library ?

@somhrikkonar6147 Год назад

hey, any update on how to use scss modules (style.module.scss)

@TheNerdyCanuck Год назад

Unfortunately not yet

@gangstacoder4234 2 месяца назад

but how do you test while developing a library

@madmax4788 2 года назад

Omg what a great video. I watched this now I am hacking the Pentagon!

@anirbansamaddar6214 11 месяцев назад

Hello I don't know if anyone is going to reply to me or not but hoping they would I'm posting my comment. I'm using npm init the same process but what I'm trying to make contains mui card components. Now, I have written webpack config file ts config file in the root folder have exported all files in index.ts named entry point file , but still when i pack it says "interface" and "type" keyword is not recognised. I tried writing babel.config to fix this problem but it just excluded all the node modules that way and it became another problem overall. any suggestions on what to do when basic typescript keywords are not accepted. I even used babel loader and included all files in resolve part like ts and tsx and jsx.

@tmnrp 2 года назад

Please also show how to publish the package

@TheNerdyCanuck 2 года назад

Sure, I can do that!

@tmnrp 2 года назад

@@TheNerdyCanuck Please also show how to add .css file as a bunlde part of a component

@vishwasvishu3282 9 месяцев назад

How to add ref for the components that we are created??

@TheNerdyCanuck 3 месяца назад

useRef I would imagine, but if you mean custom for our components, maybe I can make that in a future video

@manudrlng1569 2 года назад

when i am trying to use some image's and svg's its saying that webpackmodule missing, and if am using this className={classes.someClass} getting output just like this class=[object object] in another project can you help on this please

@TheNerdyCanuck 2 года назад

SO right now, it's only built for ts and tsx files. IN order to add other things like images and CSS, we have to use webpack or rollup. I will make a follow up to this video showing how to do that hopefully in the near future, this is just a boilerplate to get you started.

@prathapreddy244 Год назад

@@TheNerdyCanuck Do you have video yet regarding images, css loading?

@scratchcoding7690 2 года назад

This is called a tutorial man!!!

@user-tq4gt6ol9x 7 месяцев назад

Please I'm getting this error, after installing it locally to a react app Cannot find module '25thandstaffing_ui' or its corresponding type declarations.

@namdgdhfjdj 4 месяца назад

Did you find any fix for this?

@neeswebservices Год назад

How can we add MIT licence in it ?

@TheNerdyCanuck Год назад

You can google the MIT and add it to github or have github generate it for you :)

@rajshah2644 2 года назад

Can you please tell me how can i add css or scss files?

@TheNerdyCanuck 2 года назад

You have to use something like rollup to package them for you. It can't be done this way unless you convert the css to actual objects in javascript.

@rajshah2644 2 года назад

Thank You.

@principe.borodin Год назад

and add taiwind there?

@TheNerdyCanuck Год назад

I haven't gotten to it

@principe.borodin Год назад

@@TheNerdyCanuck Your video resolved one my big problem. But, My typos aren't exported. Have you any trick? I believe that is because My types are written in different files of components files, but I exported all types =/

@irtazahussain8118 Год назад

I am on windows and whenever I try to run the build command it shows an error in the terminal. F:\Button>npm run build > button-adv@1.0.0 build > rm -rf dist/ && prettier --write src/ && npm run build:esm && npm run build:cjs 'rm' is not recognized as an internal or external command, operable program or batch file. Will wait for your kind response. PS: I also used the del /s /q but after that i got another error F:\Button>npm run build > button-adv@1.0.0 build > del /s /q -rf dist/ && prettier --write src/ && npm run build:esm && npm run build:cjs Invalid switch - "". F:\Button>

@TheNerdyCanuck Год назад

Use git bash, command prompt and powershell use different commands than I used.

@balimuttajjofrancis1002 Год назад

@@TheNerdyCanuck it has failed to work on my side as well

@balimuttajjofrancis1002 Год назад

did u find a solution?

@parsa264 2 месяца назад

"build":"rmdir /s dist && npm run build:esm && npm run build:cjs", "build:esm":"npx tsc", "build:cjs":"npx tsc --module CommonJS --outDir dist/cjs",

@ovshar_Sarabi Год назад

i cant use this in windows:(

@parsa264 2 месяца назад

"build":"rmdir /s dist && npm run build:esm && npm run build:cjs", "build:esm":"npx tsc", "build:cjs":"npx tsc --module CommonJS --outDir dist/cjs",

@kamalkamals Год назад

that s not good u need to add watch update on ur package because it s stupid run build every time u change any thing

@nishantsharma4427 2 года назад

Amazing tutorial. I didn't know that we can't use hooks while testing our package locally and I spent a lot of time in fixing that issue. I have a question, can you please help me with the below error that I am getting? I tried many solutionsbut none of them worked. Module parse failed: Unexpected token (10:28) File was processed with these loaders: ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js You may need an additional loader to handle the result of these loaders.

@TheNerdyCanuck 2 года назад

Possibly forgot to add it to your peer dependencies?

@ivobabailan3020 2 года назад

You need rollup to bundle this library

@charansrinivas3149 2 года назад

What about css files it wont get copied or transpiled or compiled . Is there any solution for this?

@TheNerdyCanuck 2 года назад

Personally I would write your CSS as typescript objects with the React.CSSProperties as it's type, but I can look into this for you.

@charansrinivas3149 2 года назад

@@TheNerdyCanuck Thank you for your time.

@karlkrasnowsky3895 2 года назад

@@TheNerdyCanuck Interesting... so I too am looking at css/stylesheets and would be interested in this approach instead. However I can find little information on how to actually do this. Any pointers would be great.