CREATE LIBRARY OF REACT COMPONENT

Arpit Jain — Sun, 18 Aug 2019 03:54:04 +0000

Create React App is a comfortable environment for learning and developing React application. It is the best way to start building a single-page application in React.

By adding few more steps, we can convert our React component into the library. Later, you can publish it to NPM and let the world use that component as reusable and ready-made component into their application.

SO, LET’s BEGIN THE JOURNEY!!!

This journey having 9 milestones. All’re pretty simple and easily achievable.

MILESTONE #1

If you already have create-react-app boilerplate CLI install, you can skip, otherwise have it install using below command.

npm install -g create-react-app

Once you have it successfully installed, you’re ready to create a new project using above installed boilerplate and to do that please run below command.
create-react-app my-first-react-library

’my-first-react-library’ is my project name. You’re free to give any name.

Congratulation! First milestone achieved.

MILESTONE #2

Here, we have to perform two mini steps.

Remove all the content available inside folder src and perform below inside src folder.
Create a new file, give name as index.js.
Create two folder and give name as lib and module.
Create one more index.js but this time inside lib folder. It should be like lib/index.js.
Create one more index.js but this time inside module folder. It should be like module/index.js.

Your folder hierarchy should like below: -

MILESTONE #3

Now, whatever component’s code you want to package to make it as reusable component, need to put inside src/lib folder.
src/lib folder will be considered as distributed code and entire content from this folder will be published to NPM.

Any external file like CSS or images which are the part of your component, should available inside the "src/lib" only.

MILESTONE #4

In the second milestone, we’ve created src/lib/index.js. Now it’s the time of using that. Here, we need to import our component reference and export it, for the use as an external package.

Finally, your lib/index.js should look like this: -

 import <your-component> from './ <your-component-reference>'
 export default <your-component>

If you want to export single component, you can declare it as export default. Or if you have multiple components to export, in that case your declaration should be like

export {your-component-1, your-component-2}

For better understanding, please refer to below GitHub location: -
https://github.com/arpitjain-in/create-react-component-library

MILESTONE #5

Before publishing it to NPM, it is always good practice to test it a local machine and if necessary, we can debug too at local machine.
Let’s start testing using src/module/index.js. Your code snippet should look like this

import React from 'react';
import <your-component> from '../lib';
const App =()=> <your-component>;
export default App;

Again, for better understanding, please refer above mentioned github link.

Add module/index.js reference to src/index.js,

import React from 'react';
import ReactDOM from 'react-dom';
import App from './module';
ReactDOM.render( <App/>, document.getElementById('root') );

After following till now, You’re ready to run npm start and to see the magic on browser.

MILESTONE #6

To make component publish-able, we need to some changes in package.json as well as need to install babel-cli.
First thing first, install babel-cli using below command: -

npm install babel-cli --save

After successful install, create .babelrc file at the root level of the project and add below content: -

{ “presets” : [[ “react-app”,{ “absoluteRuntime”:false }]]}

In package.json, change the “build” script to the below content.

"build": "rm -rf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,__snapshots__"

With above script changes, src/lib folder code will transpile to “dist” folder.It will also ignore spec, test and snapshot specific JS files.

MILESTONE #7

Perform below steps: -

Delete the line "private": true from package.json.
Move react-scripts, react and react-dom from dependencies to devDependencies.
Optionally, you can also add react and react-dom to peerDependencies.

Congratulation! All major milestones achieved.

MILESTONE #8

Publishing Preparation

  "main": "dist/index.js",
  "module": "dist/index.js",
  "files": [ "dist", "README.md" ],
  "repository": {
    "type": "git",
    "url": "URL_OF_YOUR_REPOSITORY"
    } 
  “author”: <your-name>
  “keyword”: [<mention all your keywords comma separated>]

MILESTONE #9

And Finally, “Do Publish”

For public NPM push
npm run publish –-access public

For private push
npm run publish

Created by Arpit Jain.

DEV Community: Arpit Jain