Tutorial - Create and Publish a React Component/Library package

in this video we'll be creating and publishing a single react library to get up from scratch our goal is to create a simple react button package we'll install some style components add some styling we'll also be passing some props to it so we can customize it we will then build this package using our own web config we'll publish this package we have to change some package.json configuration settings and we also need an authentication token from github which will get and use it in our project using an npmrc file we will then install this package into a brand new react project the web project we will then build this project using the default create react app configurations and to top it off we will deploy this project to firebase so let's get started i will be using github desktop so that we can we don't have to worry about the sss configuration or any other configuration just to create a repository and push pull code so in my kit of desktop i will create a new repository and it will be called fancy button we will add a kit ignore for visual studio since i will be using visual studio code and let's see our fancy button okay just gonna change the name to master using visual studio code we will open this folder we first need to npm edit package dot json now the package name has to be a scoped package so if we go back to my github you will see that my username is code dash combat so i need to say add code dash combat slash fancy button and the reason is github doesn't allow something that isn't scoped to be a private repository in your private packages or any packages for that matter version 1 description this is my first custom button package entry point let's say it will be source index.jsx test command get repository it will update it later keywords author if you want let's check our okay now instead of main this should be module leave it for now we will go to the configuration for packages in a moment after we are finished with the button coding now we are creating a react package and we can assume that this package will be used in a react project now react doesn't like when there are multiple instances of react so when we install react in our package we will install it as a dev dependency so it builds the project and a spear dependency so our project that's actually using this package knows that we have to install react which we can safely assume that it will be installed but we just want to let the project know now there are instances where the pro react version that you're using in your package versus the react that's used in your project are different we will not go through it right now in this video this is just a bare minimum you need to get your react project started with a react library so we'll install npm install react as a dev dependency let's just make sure it's there we will also install styled components and prop types now one thing i forgot was in our packet.json we will also add react as a peer dependency and this is all we need to get started with our project for the package so we'll create a folder called src we'll have a file called index.json import react from react if you don't want to type it out or watch me type i will add a link so you can get a code get all the code for this with this video style from style components and install import prop types from crop types const fancy button return a simple button we export this fancy button and here we can add some prop types label let's make it is required type types or one off button submit reset variant will be where you can have some styling outlined contained and text on click let's make this a required function now we can also add some default props type will be button and variant will be let's say outlined now you can copy this from the file that i provide so we'll have three different kinds of button style components outlined contained and a text button this is a mistake it would still work but it's better coding we will pass in the labels at props type variant on click and any extra props we need instead of simple button let's create a table okay so styling button style styled equals outline it's this outlined if variant equals contained button style would be contained and if it's text so this contained in text comes from outline contained text outline will be default so we're gonna checking for it but if it's text we want the text to be the style and now we can call our style component so first we'll just pass in extra props to the button you want to pass in the type with the type and click be on click now you can still omit this and omit this but this is something that we want to be explicit about so we'll explicitly type them out next we will tackle the web config to build this project before we go any further we'll just push this code using github desktop and we'll publish this keep this code private so now on our repositories with your button and we'll make some changes in packages and right now so go to your github open this and copy this link for the actual github package go back to our visual studio code and let's make some changes to this so we are ready for the next step repository type is kit the url will be git plus and paste your code or the url that you copied earlier now our main search main will be the test folder index.js which we'll be creating using our webpack and our module will also be test index.js our source is our actual file and the one we are working with slash index.jsx and you cannot other other configs like bugs and home page if you want to add your author let's just add it we can do that and now let's create our webpack config we'll also save this so that we have this saved now the reason we need packet json the main and module to point to distribution folder or this folder is so that the project is actually using this package will look into this distribution folder this folder so once it's pushed initial commit update packages okay let us install our build libraries npm save tab table core table preset please preset react and the paper loader this is just for transpiling webpack webpack cli for the webpack now we need we don't really need it but it's good to have it webpack clean plugin so we can remove or clear and clean out the distribution folder before we build the project and we need to include webpack node external so we don't include node folders node module into our webpack build okay so we have paypal core yep everything seems to be in order all right so let's create our webpack config config first things first we need to require path we need to require clean webpack plugin externals module exports again this will be available with the video so you don't have to watch me type you can just copy paste entry would be path dot resolve now there are ways where you can use packet json's source as an entry but we'll just hard code it for now the output will be file name is index.js path is factored resolved into distribution test folder as a library target um to find be true externals preset is no true we need this so we ignore the built-in libraries like path or file service fs is no externals this will ignore all the node module folders and files from it being included in this build let's have the result extensions would be because usually you want to include only the ones you want to include for now we'll just include all of them we will then add the modules will be just one rule and it would be to test whether the file starts with a js or jsx and that's where it ends exclude modules and yours loader is loader and the presets are paper okay so let's just try to build this before that we need to go to package.json we can use it what webpack cli but we'll just do it uh other way prop the end away so we will add a build script and we'll say webpack mode is production let's build this all right and you should see a dist folder with a file and you will notice that it's all our code type reset button outlined our style component all right we forgot one more thing in web config we forgot to add our clean so we will put it as plugins new so this will ensure that the test folder always gets cleaned up before every build but it's quick so we don't see it right now but this is it this is how we build our project or package one thing i noticed was in our can ignore we don't need all of this i'll just do the simplest thing we'll ignore everything that is distribution file build i'll include this with the file so you can safely use it and now let's just push the code so that we have the code in a repository added config and there we go so now we need something called npmrc token or a token from github that allows us to access and publish two github repositories so first we create an npmrc in our root folder first we need a registry to be https column slash registry.npmgs.org now this is where we specify our scoped project package the registry equals https npm.p k g dot dot com and copying this again colon slash off token equals now this is the token we need to get it from github so let's go to our github go to your profile actually go to settings down here you will see developer settings go to personal access tokens and click on this generate new token now this would be let's say tutorials whatever name you want to put the thing that the scope that you have to keep in mind is this right package and by default when you want to write it you also have to give the repo access for this status deployment invite now there are other scores which we are not going through generate token and make sure you copy this token i will be changing this so you won't be able to use this but copy this and make sure you save it somewhere first before leaving this page because you will not get this to see again show again so and the token that i copied will go as the value of this author token once you are done with this let us publish to so the command is npm publish if everything is fine it got published so when we go back to our list of repositories it takes a few minutes so we will wait until that happens it took about a minute for my package to appear in my packages our first fancy button package and shows instructions now to use it and if we go back to our code in our actual repository you will see on the right that you will see packages one fancy button version 1.1 this is how you publish your package next we will see how to use this in our create react app package project so now let's create our first react project so let's create our first react project that will use this package so npx react app my you can name this anything and this will take a few minutes so i will pause and we'll come back when it's done so it took a few minutes and now we have our project so let's open it up again in visual studio code run this project so that we know it works rpm all right so the project starts and runs so first things we need to get back that npmrc file and just copy it from our this is so that we can get our code combat or your username scoped packages and we have the hot token for it let's go back to our github and in our packages we will just copy this and we'll just say npm install add code combat slash fancy button all right so when we go and check in our node modules we should see our package now there are ways to remove this source src folder kit attributes but right now we'll leave it as as is so to use it let's go back to our app.js now we know let's start this project again and in the meantime we will import our fancy button from now the reason we are doing is uh now the reason we are doing this as a scope or the named export so that we can do it like this if we have more buttons we could add more buttons in it so let us say remove all of this remember label was required and on click was required we'll just know everything console log button one clicked let's go back to our page and there we go my label my label one label one and we had three buttons let's put them in a paragraph tag i labeled two one label three two three and we had a variant contained and we have we had a variant text this is us using this in our react package so this is we're using a react package into our react project and let's just check it in our console log clicking one second button click third button click just so that we have it working let's just put it as reset and type equals submit and if we check our files or with code we'll see our type is a reset type is submit and the default is type button there we have it we have used our package into a project so now we will build our project and there we have our belt folder so now we'll deploy this project onto firebase so go to console.firebase.google.com you can create a new project already have an existing project so i'll use that instead under build under hosting you should click get started and pin install shift firebase tools if you don't have it installed you would want to install this i already have it installed so i'll go to the next firebase login and this should open our browser you select your user allow all the permissions and now this should have been working once we are locked in we can close this we have to click run this command firebase init are you ready to proceed yes now mine is hosting here's existing project and we will select my tutorial the public directory is build create a single page app let's make sure we have index.html we do set up auto builds and node file overrated node and this should create our firebase json and firebase segment let me just deploy everything so this is our application on firebase inspect button reset submit click button one click button to click button three clicked and if we go back to firebase if i go back to hosting we will see that my phone my website is deployed i messed up the way the multiple hosting regardless this is where the site is my fp1 there we go

Channel: Kode Kombat

Views: 778

Keywords: react, npm publish, react package, react library

Id: m2Dtwr7DoBE

Length: 40min 50sec (2450 seconds)

Published: Sat May 15 2021