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.
1. Create a React Component Follow the following steps
-
Crete a
index.js
file at a root directory -
Export your component in the
index.js
export { default as Test } from './dist/your_component_name';
- 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