Reuse-react-component NPM

Serve your React Component by npm

You can publish your own React component to npm, below you'll see how to publish your own component to npm step by step.

Create a React application using

    npx create-react-app your-component-name

Add dependencies

npm:

    npm i --save-dev @babel/cli @babel/preset-react
    
    or

    npm install --save-dev @babel/cli @babel/preset-react

yarn:

    yarn add @babel/cli @babel/preset-react -D

    or 

    yarn add @babel/cli @babel/preset-react --dev

Add Babel react presets to your newly created application's package.json

    "babel": {
        "presets": [
        "@babel/preset-react"
        ]
    },

Change scope to public
```
    "private": false,
```

Add instruction to copying your component to dist in react-script after transpilation

Windows:

    "publish:npm": "rmdir /s /q dist && mkdir dist && babel .\\src\\component -d dist --copy-files"

Linux:

    "publish:npm": "rm -rf dist && mkdir dist && babel src/component -d dist --copy-files"

Create your component inside dir component or you can name it anything you want, but be sure you are changing name in previous 'react-script' instruction. and give any name to your component file name. but be sure you'll change the name in package.json's main value.
```
    import React from 'react'

    function ReuseableComponent() {
        return (
            <div>
                Hello, World!
            </div>
        );
    }

    export default ReuseableComponent;
```
For this example I've created a simple React component that prints 'Hello, World!' whenver you use this component in your React application and gave file name as index.js.
Include entrypoint in your package.json, according your file name.
```
    "main": "./dist/index.js",
```
And, last you have to add dependencies in your package.json, whenever you created React application you've seen some dependencies are already added, but you need to modify dependencies field to peerDependencies cause if any React including your module in their application they will definitely have basic dependencies so peer dependencies items won't be duplicated there.
```
    "peerDependencies": {
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-scripts": "4.0.3"
    },
```
Run publish:npm it will generate new files every time inside directory dist.
npm:
```
```
    npm run publish:npm
```
```
yarn:
```
```
    yarn publish:npm
```
```
Publish your React to npm
```
    npm login

    npm publish
```
Be sure, you've npm account and change version everytime whenever you publish your module to npm.