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
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
1 2 | npm install -g create-react-library |
Then every init project just needs to run
1 2 | create-react-library <name of your package> |
- The other way init is using npx and init is just like react-create-app
1 2 | npx create-react-library <name of your package> |
I will init my package
1 2 | npx create-react-library react-sample-countdown |
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.
1 2 | <span class="token keyword">import</span> <span class="token string">'index.css'</span> |
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
1 2 | <span class="token keyword">import</span> clockImg <span class="token keyword">from</span> <span class="token string">'../../asset/clock-icon.png'</span> |
Done can not run and finally just add / : v attention
1 2 | <span class="token keyword">import</span> clockImg <span class="token keyword">from</span> <span class="token string">'/../../asset/clock-icon.png'</span> |
Publishing to npm
Just no more than 2 lines of code is already public.
1 2 3 4 | npm publish <span class="token comment">// Câu lệnh này sẽ tự động public lên NPM</span> or yarn <span class="token keyword">public</span> |
Deploy your example
1 2 3 4 | npm run depublicloy <span class="token comment">// Tự động deploy example lên github page</span> or yarn deploy |
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.