CREATE LIBRARY OF REACT COMPONENT
Tags: reactcomponent, reactlibrary, reusablecomponent
Published: 2019-08-18 03:54:04

---
title: CREATE LIBRARY OF REACT COMPONENT
published: true
description: Steps to create library of react component.
tags: React Component, React Library, Reusable component
---

`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: -
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ttcqnevmd2vdka0v9mhf.png)

### **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](https://arpitjain.in).