npmcounterpackage

npm_Counter_React_Component

This project offers a comprehensive guide to transform a React component into an npm package. It includes every step of the process, from development and testing of the React component to its final publication on the npm registry.

Whether you're a seasoned developer or just getting started, this repository will walk you through all the necessary steps to share your React component with the world as an npm package.

Follow the following steps

1. Create a React Component

2. Crete a index.js file at a root directory

3. Export your component in the index.js

  export { default as Test } from './dist/your_component_name';

4. Update the package.json file

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

Use the specific version of babel/cli

   "devDependencies": {
    "@babel/cli": "^7.22.9"
  }

for Windows

  "publish:npm": "rmdir /s /q dist && mkdir dist && babel src/components -d dist --copy-files",

for Mac/ Linux

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

After complete development

  npm run publish:npm

Make sure you are having a npm account

  npm login

Enter your all details while logging

  npm publish

Make sure your project name is unique, else update the name from package.json