How I can create a Component in React js to publish on NPM

Question

I have a question, need to create a component in React js is to publish it in NPM.

I managed to publish it, however it keeps giving error to transpilar from js to jsx or from jsx to js.

so when I import it to my project it does not recognize the classes in import

how do I do this publication procedure on NPM ?

Answer 1

Get the expected result like this:

These were the necessary files..

/// Abaixo o código do .babelrc
{
  "presets": [
      "react",
      "env",
      "stage-0"
   ]
}


/// Abaixo segue o código do package.json
{
"name": "<nome do seu NPM>",
"version": "0.0.1",
"description": "React Validate Registro",
"keywords": [
    "validar",
    "CPF",
    "CNPJ"
],
"main": "./lib/index.js",
"license": "MIT",
"scripts": {
    "build": "webpack"
},
"peerDependencies": {
    "prop-types": "^15.6.0",
    "react": "^16.0.0",
    "react-dom": "^16.0.0"
},
"devDependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-0": "^6.24.1",
    "path": "^0.12.7",
    "prop-types": "^15.6.0",
    "react": "^16.11.0",
    "react-dom": "^16.0.0",
    "react-input-mask": "^2.0.4",
    "react-toastify": "^5.4.0",
    "reactstrap": "^8.1.1",
    "webpack": "^4.5.0",
    "webpack-cli": "^3.2.1"
}



/// Por ultimo o código referente ao webpack
var path = require('path');

module.exports = {
mode: 'production',
entry: './src/index.jsx',
output: {
    path: path.resolve('lib'),
    filename: 'index.js',
    libraryTarget: 'commonjs2'
},
module: {
    rules: [
        {
            test: /\.jsx?$/,
            exclude: /(node_modules)/,
            use: 'babel-loader'
        }
    ]
}

After these configurations, just put on the console (npm run build) Afterward (npm adduser) that will ask for your npm access data. right away (npm Publish)

Detail

Create your component inside the folder src with the name index.js