Tutorial for package development for ReactJS

Tram Ho

For Reactjs devs, every time there is a request like integration login with Facebook, a nice calendar like google, … I believe most people will search for those libraries for example react -facebook-login, or react-big-calendar and then just import that package and add a few lines of code in their docs we have a very top-notch interface. However, have you ever wondered how to code such packages and publish them to npm? Through this article I want to introduce how to create reactjs package and public it on npm with a few notes. The opening has been a bit long so it’s quick gooo!

Introduce

There are many ways to public a component package but in general it is quite complicated, it is webpack config, then have to create a reactJs project and import the library I just coded, moreover debugging is relatively complicated. But recently I found a very delicious tool, just a little setup, running a few lines of code to have a coding environment. Introducing create-react-library . To be more intuitive, I will demo a small package to publicize on npm.

Requirement

  • First, make sure you install npm and node> = 10. Download here
  • An npm account. signup here .

Init Package

First make sure that your package name is unique by searching for the package name you intend to place on npm that someone has already placed it. In this article, I will demo the package as a countdown timer. After choosing it again and again, I also choose the name react-sample-countdown .

There are two ways to init project:

  • Install package global using the command

Then every init project just needs to run

  • The other way init is using npx and init is just like react-create-app

I will init my package

After running the command, we need to fill in a few fields to init package such as Package Name , Github Repo Path , … but most of them leave standard default values ​​so if nothing wants to change, just press Enter. is okay. They themselves also support very well including choosing code according to js (default) or typescript or custom.

After a while waiting for it to install, we need to open 2 terminals one to run the package and one to run the example to make debugging our package easier.

Looking at a bit of the files that the package creates for me, the example if excluding some files such as config service-worker, it is identical to a Reactjs project. / src outputs the code in my package.

code code code!

In the article on package creation, I will only highlight a few points to note. Code everyone can see at my repo and I am extremely happy if anyone contribute this package: v: https://github.com/vinhyenvodoi98/react-sample-countdown

Some note

File layout

Just like what we normally code for Reactjs-er we can add folder components to / src and then import into index.js to separate the components for easy implementation. You can even implement redux thunk or saga or api context , …

Css file

As in the image above, we will have to write in the form of modules so there are a few cool things that are the scope of css only in the component that we import. Moreover, the import as usual does not work.

Also there is another way that is to use css inline: v but it doesn’t seem to be very professional. Another way is styled-components .

Import photos

At first, I was awkward about not being able to import the photos, but in the end I got it. Initially I wrote

Done can not run and finally just add / : v attention

Publishing to npm

Just no more than 2 lines of code is already public.

Deploy your example

Last note : I am just a newcomer to contribute to the community by packages or at least when I dev something that projects often use, then import, not need to copy code. So sometimes if you want to patch, you have to update the package again. However, it’s not like that, use npm public and have to update the version again and how to update the version professionally. Example version 1.0.0 (version first) the last number is the number of bugs you can fix in the version, the middle number is the number of new features you add to this version and the first number is the big version update and when the version increases, it will reset the back 2 numbers to 0.

Reference

Share the news now

Source : Viblo