Build And Publish A React Component Library

so sometimes when you're building a react application you might use a third-party react component and that's what i'm going to be talking about in this video specifically how you can develop and publish your own react component libraries now building a react component library is very different than building a react application in several key ways that we'll be talking about throughout this video now along your journey of developing and publishing your own react component library you might find that you do things different and that's perfectly fine in fact you might need to do some things that this video doesn't cover in those cases you'll need to go into the documentation for the tools that we're using in order to see how to do those particular things but otherwise we're going to be doing a pretty general overview of how to develop and publish your react component libraries to the npm registry now before we begin don't forget to hit that like button subscribe if you haven't already let's go ahead and get started so in order to get started with creating my react component library i need to create an empty directory and i need to start setting up my react file structure now i've created a new empty folder called react pwr that's going to be the name of my react component library you'll probably want to name this whatever you're naming your component library now if i ls inside of here you can see there's absolutely nothing so we need to get started i'll run npm init i'll leave the package name as react pwr the version that's fine description i'll go ahead and add that for the entry point i'll simply leave it as the index.js file for now for the author i'll simply put my name and for the license i will put mit and this looks good so i'll type in yes now if i were to ls here you can see that there is a package.json file which i want to go ahead and take a look at so inside of my package.json file i can see that it pretty much populated all the information that i put inside of the prompt so that looks good i'm going to go ahead and start building my project structure so i want to have a source folder and inside of the source folder i want to have a components folder and inside of the source folder i also want an index.js file i'm going to simply leave these blank for now i'll come back to those soon but i want to quickly install a few dependencies so inside of my terminal i'm going to run npm install dash dash save dev react and react dom now i'm going to head back to my package json file and i see that react and react dom have been added as dev dependencies now any library that uses this component needs to have react and react dom installed if i put them as dev dependencies it's not going to automatically install it for them that's good we don't want that it would do that if we listed it as normal dependencies so if i had react and react dom listed as normal dependencies if any project installed my component library it would install whichever version of react and react-dom i have listed here automatically for them and we don't want to do that because there could be collisions and versions and you never want to have multiple versions of react in the same application however we do want to make sure that they have react and react dom installed because this is a react component library and obviously they need to have react if they're using a react component so in order to make sure that they have that we're going to list these as peer dependencies so i'm simply going to go over to my dev dependencies object i'm going to copy react and react dom and paste it into peer dependencies and then just simply save so now we have react and react dom installed you can go into the node modules folder and see react and react dom are here this is pretty good so far but i need a way to see the components as i'm developing as i'm writing the code i always want to make sure that i can see what it is i'm building as i'm building it so i can test it out and make sure that it's working one way to do that is to create a new react application that simply installs this locally on my machine so you have a react application that you create with something like create react app and then you install this library for example react pwr locally on the machine however i would have to constantly rebuild the app every single time i wanted an update and then i'd have to reinstall on the application that's ingesting this component library and it can be extremely tedious to do that so i don't want to do that instead i want to use a tool that makes it as easy as possible for me to develop a component library and for that i'm going to use storybook as we can see here it says storybook is an open source tool for developing ui components in isolation for react view angular and more and it is a great tool for this so if i run over to get started and then go to the install section i can see this command right here it says to install storybook i can just simply run this command now since we've set up our project structure and have react and react dom listed as dev dependencies when i run this command it should detect that we're inside of a react project and it should all work automatically so i'm going to go to my terminal or my command line interface and i'm going to paste in that npx sb init command i'm simply going to run it now this could take a few minutes so go ahead and let it finish now that that's completed on my end i'm simply going to scroll all the way up and see that it says detecting project type and next to that is a check mark so i know that it successfully determined that we were using a react project then i can see below that it lists a few dependencies that it added for us and then it installed those dependencies and then it gives us this command that we can run in order to start storybook but before i do that i simply want to go into my project and take a look at some of the things that added for us so starting in the package.json file we can see that it did in fact add those dev dependencies that were listed inside of the terminal it added a empty dependencies object and two new commands the first one is storybook which is the command it gave us a moment ago it said npm run storybook if we were to run that it would say start storybook dash p 6006 so it would start a development server up for us and run it on port 6006 the other command it gave us is build storybook which is going to allow us to compile the storybook and deploy it if we want to then if we look here on the file system on the left we can see a new directory called dot storybook and there's some files inside of here main.js and preview.js which holds some configuration for our storybook that we're not going to edit in this video if i go into my source folder i can see that i added a new folder called stories and this is where we're going to put all of our stories now this is not a storybook tutorial so i'm not going to go over in great detail what stories are or how stories work but you can kind of think of them as a way to import your component into storybook so that you can see it as you're developing it i'm actually going to delete all of the stories that are inside of here for now but they are really good for reference so if this is your first time ever using storybook i highly recommend you check out storybook's documentation check out the syntax and take a look at the reference stories that it included for you automatically otherwise you can continue forward with the tutorial and see how we're going to create this library now just to kick things off i just want to get a basic component setup that has nothing to do with the component that i'm actually building just to make sure that storybook is working properly so i'm going to go into my components folder and create a new folder that i'm going to call requirements and this is going to end up being my actual component but for now i'm just going to write some dummy code inside of it so i'll create a requirements.jsx file and i'll export it as a function and it should just return a little bit of jsx that says hello world then inside of my requirements folder i'm going to create an index.js file that exports this component now inside of my index.js file i can actually export the component i just created now in a normal react application the index.js file typically ends up being the file that compiles the entire react application and then injects it into your index.html file however when you're building a react component library there is no index.html file and so you're not going to be injecting any type of application into any html files so the job of the index.js file inside of a react component library is very different than in a react application for our case here what it's going to do is export all of the components that i want any application that may be using this library to be able to import now in my case for the library that i'm building i only want them to be able to import one component and that's the requirements component and this requirements component is going to use other components but we're only going to export the requirements component inside of my index.js file if you're building a component library where you want the applications that are using your library to import all of your components you're going to want to make sure you export all of them inside of this file but this is good for me so i'm going to save and close this file and i simply just want to run storybook and see if i can view that component but in order to do that i have to create a story for it so i'm going to create a new file in here called requirements.stories.js now there's a few things i need to import inside of here i need to import react from react and i also need to import stories of from at storybook react then of course i need to actually import my component so i can do that by saying import requirements from out of this directory into the components directory into the requirements directory then i'm going to create a stories variable using stories of the context of this is just the app test for me so i'm just going to leave it as that then i need to add this story so i can say stories dot add i'm going to call the story itself app and the second argument is a function now this function can be thought of as a regular react component and inside of here i can manage state using use state and i can use effect and i can import react components and use react components and then return jsx like i normally would in a functional component in react so what that means is i can actually import my requirements component and then render it here so since my requirements component currently is just a very simple component that says hello world i just want to return it and see it on the screen to make sure that storybook is working i'm simply going to return the requirements component save it and let's see if we can run storybook npm run storybook okay it looks like it's compiling and we should see a browser window pop up in just a second so now i see a browser window pop up currently i don't see anything on the screen so the reason why nothing was appearing on the screen was because for some reason when it opened the browser for me automatically it was going to 192.168.118 and then the port number 6006. if this happens for you what you're going to want to do is type in http colon slash localhost colon 6006 then when i press enter i can see the storybook as i would have expected originally so just make sure you're on localhost and not an ip address and now that i'm on there i can see my app test group and along with my app story and hello world is rendered so now i can begin developing my component library and actually see my component on the screen and you can have a separate story for every single component however for me i'm just going to have one story because this is really just a single component but oftentimes you're going to want to have many stories for every single component that you are going to be allowing the users to use whenever they install your library so what i'm going to do is i'm going to add all of my library code and since this is not a tutorial on my component library itself it's how to build and deploy your own i'm going to just quickly paste all of my code in give it give you a really quick explanation of what it does and then we're going to look at it here on the screen see it working and then we're going to talk about how we can build this thing into a dist folder and publish it to npm so i've added my code let's talk about it really quick so the requirements component is the component that i'm going to allow people to use whenever they install this library then we have requirement checkmark and xmark which are components that the requirements component is going to use so if i open up the requirements component i'm going to take a look inside of here and talk about the code really quick now the requirements component accepts three props value requirements and on valid change the value is going to be the value of the password input requirements is a list of requirements objects and then on valid change is called whenever the valid value changes so if it becomes valid then it's going to call this callback if it's invalid it will then call this callback then whenever value or requirements changes i'm simply updating and calling that callback with the value of valid now each of these requirements has a validator function so it runs the validator function against the value just to see whether each requirement is valid and then it returns whether or not all of them are valid and then what it renders is a list of requirements and for every requirement it passes in the value for the input the requirement object itself and also it passes down the on valid change handler now this component doesn't currently use the on valid change handler that's just for me for to use later but this requirement component simply takes the value and the requirement sets whether or not it is valid if it is valid it renders a check mark if it's not valid it renders an x mark and then it on the right side of that it renders the text for the validation you'll see that on the screen in just a moment then the x mark and check mark are simply svg components that render a nice looking svg for an x and a check mark so my component library is complete i want to go ahead and update my story so that i can see it on the screen rendered properly now obviously in your case you're going to be updating your story while you're developing the library but since i already had all the code written i'm simply doing it this way so the first thing i need to do is import use state and i'm going to add three pieces of state here at the top of my story valid password and username then i need to create a list of password requirements so i'll paste that below here these password requirements contain both a text and a validator that validator is that function that checks the value against a function that makes sense for the validation so for example must be at least eight characters we're just checking that the length is greater than or equal to eight and then we're just doing the same thing for these three validations as well then finally for my return statement i'm returning a form with a header and the requirements component with the props that it expects two inputs one for the username one for the password and then a sign up button and if i save it let's take a look at the storybook so as it refreshes we can see that i forgot to add the styles for my story we can actually use css in our stories then i need to make sure to import it and then i also forgot one more thing which was to add a styles.css file at the root level it contains all of the styles for my component library so once i add those if i go back here we can see my signup form now it says must be at least eight characters must contain at least one number must contain at least one lowercase letter and must contain at least one uppercase letter so if i go into my password input and begin fulfilling these requirements you can see that it updates as i fulfill them so it should update as soon as i reach eight characters now that i've fulfilled all four of these requirements they're all green with check marks next to them and as i backspace and remove letters and characters from my password you can see that it's updating live so it makes it really easy for users to be able to fulfill their password requirements without them having to memorize each one and then get frustrated when they try to submit it and then it tells them after they submit it so this is looking good this is behaving as i would want it to now the question is how can i build this into a dist folder that i can then publish to npm and the answer to that is we're going to be using rollup for that now let's take a quick look at rollup's website you can see that it says rollup is a module bundler for javascript which compiles small pieces of code into something larger and more complex such as a library or application so a lot of people who are building react component libraries use rollup because of how convenient it is over something like webpack so again this isn't a rollup or a storybook tutorial if you'd like me to do tutorials on storybook or roll up just let me know in the comments but i will be going over how to set up rollup and how i'm using it for this component library but if you're trying to do something more complex you'll probably want to read through this documentation and just get an idea of how all of this is working so in order to get started i need to install rollup and i need to install some plugins and these plugins are going to do things that make my life a lot easier and i'll explain what each of them are doing but first let's just go ahead and install all of this so in my terminal i'm pasting this line here we have npm install rollup then we have rollup plug-in babble then we have rollup plug-in node resolve roll-up plug-in pure depth external and then we're saving these all as dev dependencies let's go ahead and install those and you may need more or less of these depending on your particular use case so let's talk about what each of these are and what they do and then in a moment we'll talk about how to use them so the first one here is plugin node resolve and what this is is it's going to resolve third party modules in case you're using any third-party dependencies so if you're using any third-party dependencies in your react library it's going to resolve those and add it to the source code then we have rollup which is the library itself which obviously you need in order for all of this to be working initially anyway then we have rollup plugin babel this allows you to integrate with the existing babel config and we have babel core and babel loader and we're gonna actually install a babel config in just a moment we'll get to that in just a second though but that's but this plug-in is basically going to allow us to use that babble plug-in with roll-up very easily and then finally here we have roll-up plug-in pier depth external and this just ensures that we exclude any pure dependencies from our bundle and we have react and react dom as pure dependencies we want to make sure that we do not add the react and react on source code to our bundle so the babel plugin that i was talking about is babel preset react i'm going to go to the beginning here and type in npm install dash dash save dev so i want to install as a dev dependency this babel preset react babble plugin so i'm going to just quickly install that and this is going to handle jsx for us and other react goodies and now i can see babel preset react as a dependency to the project specifically a dev dependency okay now how to put all of this into practice well in order to get started with roll up we just need to create a new file at the root level called rollup.config.js first thing i want to do is is to import my plugins that i installed just a moment ago so we have babel resolve and external and then i need to export a default variable which i'm going to make as an array and we're going to put an object in this array which is going to be our configuration for our rollup now the input is going to be what is the entry point for the application in my case here it's forward slash source slash index.js then we're going to have the same thing for output we want to be able to output all of our files to a particular directory now i'm going to be outputting for both common js and also es modules but you may only want to export to es modules or maybe umd or common js read up on all of those things be familiar with those things if you are building a react library in my case i'm just going to be exporting as common js and es modules so i can set output to an array and for each item in this array is going to be configuration for each type of output the first one is going to be my common js format so i'm going to set the file and the file name is going to end up just simply being dist slash index.js and the format is cjs which just stands for common js then the second object is going to be my configuration for the es modules so we'll set the file which will be dist slash index dot es slash dot i'm sorry dist slash index.es.js then we're going to have the format set to es and finally i'm going to set exports to be named because i'm using named exports after the output array i can add all my plugins and that's gonna be an array as well and currently i have three i have babel resolve and external i'm gonna add them here so we'll start with babel and these are going to be functions i'm going to pass in an object to my babble function and we're going to add an exclude and i want to make sure that i exclude node modules from my babble compilation and i'm going to set presets to an array and remember that preset that we installed just a moment ago we're gonna put that in here at babel slash preset hyphen react now after babel i'm gonna go ahead and set up external this doesn't take any arguments and i'm going to add resolve as well which will also take no arguments and save it now if i go over here i can see this is my current structure there's a source folder a node modules folder and a storybook folder when i run rollup i am hoping to see a new folder called dist which will contain both the index.js file and the index.es.js file which will be the compiled version of the application that other react applications will be able to import and use but in order to run rollup i actually need to add a command for rollup so i'm going to go to my package.json file go to my scripts object and add a new script that i'm just going to call build library or build live for short and this command is going to run rollup so we're going to run rollup dash c now we have rollup installed it's a dependency of the project so it's going to run that whenever we run build lib so i'll save it and let's see what happens when i try to run npm run build live see what happens all right it says unexpected token note that you need plugins to import files that are not javascript so this is actually because i'm using css throughout the application i need to make sure that i have the post css plugin installed so i need to add that really quick so i'll simply clear this out and run npm install dash dash save dev roll up plugin post css i'll press enter let that install cool that finished up and i need to add it to my config so i'll add that right here and then i need to add it to my array of plugins i'll add it at the very beginning now this is going to take an argument with some config in here i'll set plugins to an empty array and i'll set minimize to true all right let's see what happens now when i run npm run build lib cool it says that it was successful so let's take a look and see what it generated for us there's a dist folder now and inside of here is both an index.js and an index.es.js if i open it we can see that it is a large javascript file which contains the react components that i created in my project now if we look i'm the only thing that i'm exporting is requirements so that is looking like i would expect however what i'm not really liking is that i really want to minify this because there's no reason for the javascript to look pretty like this i would rather be as small as possible so that we can save file size so i'm actually going to add one more plugin the plugin is going to be terser so npm install save dev rollup plugin terser once that installs i'll go back to my rollup config and paste in the import for terser notice that it is not a default import make sure you destructure it and i need to just go to the very bottom of my plugins array and add cursor click save go back to my terminal clear this out and then i'm going to run npm run build live now let me have a look at that index.js file and notice that it's minified now so the file size is going to be much smaller and the same for my es okay so now we have the library built it's in the dist folder we're able to develop using storybook and build using rollup the only thing left is to publish this to the npm registry now in order to do that you have to have an account with the npm registry so you need to go to npmjs.com sign up for an account make sure that you have an account there and once you have an account then you'll be able to publish your library but make sure that your library has a unique name so do a search make sure that the package name that you're using does not already exist you can go to your package.json file and go to the top and find the name here and you can actually rename your project if necessary if your package already exists for me i'm just going to append port exe to the front just because i would rather be a little bit more specific in case someone else wants to create the react pwr library and for this this is really just a tutorial for me so i don't want to hog up that name so i'm going to save this and in order to publish this i need to make sure that i have my npm linked to my account the easiest way to link it is to go to your terminal or your command line and type in npm login then it's going to ask you your username and then your password then you can set your email if you'd like make sure you go through that login process once you're logged in and you have everything connected before we publish this let's go back to our package.json file and make sure that our main right here we have a main it needs to be dist slash index.js however we also have the modules so i'm going to add a new one called module new property called module and it's going to be the exact same thing except it's going to have that dot es file extension with it so we need to be referencing the index.js inside of our dist folder and not the one in our source folder so once i've added those i can go to my command line and type in npm publish and now what it's doing is it is publishing my component library it says that it worked so i'm going to go back over here go to my profile refresh packages says i have a package it's not showing it right now but i can search for it port exe hyphen react pwr it's right here so when i click it it takes me to the page and now i can see that my library is live and any application that wants to install this can simply run npm install port exe react pwr alright everyone i hope you enjoyed this video and i hope you learned something and hopefully i'll get to use your component libraries in the future if you enjoyed this video please don't forget to hit that like button subscribe if you haven't already and i'll see you all in the next video [Music] you

Channel: PortEXE

Views: 72,518

Keywords: react component library, react library, how to create a react library, how to create a react component library, how to publihs a react component, how to publish an npm component, how to publish a npm component, npm, npm component, react npm component, create a react npm component, create a react component, npm publish, npm publish react, react rollup, react storybook, build a react library, build a react component

Id: hf6Z8OZanec

Length: 24min 1sec (1441 seconds)

Published: Wed Feb 03 2021