Extracting a React JS component and publishing it on NPM
Learn how to share your components with the world
So, you’ve created an awesome React JS component and want to share it with other developers. That’s awesome! In this post, I’ll show you how to do that.
Let’s not waste time. The first thing you should do is to create an NPM account. It's free and you can do it right here.
Preparing the app
How this is going to work
While extracting a component from your app you need to understand that this code will live in another repository, so the development will be done separately from now on.
Let's assume that your app is in /code/app/ and your component at /code/app/src/components/Button.js
The first thing you must do is move this folder to another place, out of your app repository.
mkdir -p /code/awesome-btn/src
mv /code/app/src/components/Button.js /code/awesome-btn/src/index.js
Initialize an NPM package
Now we need to initialize an NPM package. To do that go to your new component folder and type npm init
NPM will ask some questions about your package, such as name, version, description, etc …
NOTE: when NPM asks about script entry point, type build/index.js
Modify the component package.json file
In order to publish a react component, we need to add some packages in the package.json file.
Just copy and paste what is different from the file below.
Create a webpack.config.js file
To keep our development process working, we need to add webpack to this component, so we can build the code.
Create a webpack.config.js file in /code/awesome-btn/webpack.config.js
And a .babelrc file
Nice! We are almost done.
Run yarn or npm i to install the dependencies.
Link the component to the app
After we push the component to NPM we don't want to publish the package on every change to test it, right?
To avoid all this work we gonna use npm link to use our component locally and speed up the development.
Building
The component must be built before we can use it, so just type
npm run build and you're good to go.
NOTE: When you’re developing the component use npm run start so webpack can watch the files and build on every change.
Linking
Go to /code/awesome-btn and hit npm i . After that, npm link
If everything worked as expected you should see a message like this on your terminal:
/usr/local/lib/node_modules/awesome-btn -> /Users/your-name/code/awesome-btn
Now go to your app ( cd /code/app ) and hit npm link awesome-btn
You should see a message like this:
/Users/your-name/code/app/node_modules/awesome-btn -> /usr/local/lib/node_modules/awesome-btn -> /Users/your-name/code/awesome-btn
Sweet! The app and component are now linked!
Using the component
Everything is linked, so now we can use our component!
Open your app code and change all the places where your component has been called.
Change from:
import Button from "./components/Button"
To:
import Button from "awesome-btn"
And BOOM! Your awesome-btn component is ready to use as an NPM package.
The last thing you need to do is to publish it on NPM — which is the easiest part 😆
On your component folder type, npm publish. NPM will ask for your login and password :)
Thanks !—Here is my last post: The anatomy of a perfect pull request
✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.
