Step 0. Create Empty Folder

1. You can browse https://www.npmjs.com/ and check the component name which you create is exist yet.
2. In the folder, please create two new sub-folder and name 'build' and 'src'.

Step 1. Initialize

Change your folder path in CMD or WebStorm Terminal

npm init

Step 2. Install dependencies

npm i --save react react-dom @babel/polyfill

Step 3. install dev-Dependencies

npm i --save-dev babel-cli babel-core [email protected] babel-plugin-transform-object-rest-spread babel-plugin-transform-react-jsx babel-preset-env webpack webpack-cli

Step 4. Modify package.json

Step 4-1. set up React as peer dependency ( copy and paste )

  "peerDependencies": {
    "react": "latest version(^x.x.x)"
    "react-dom": "latest version(^x.x.x)"
  },

Step 4-2 Provide build and start script

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --watch",
    "build": "webpack -p"
  },

Step 4-3. Set entry point to build/index.js

  "main": "build/index.js",

Step 5. create webpack.config.js

const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'index.js',
    libraryTarget: 'commonjs2' // THIS IS THE MOST IMPORTANT LINE! :mindblow: I wasted more than 2 days until realize this was the line most important in all this guide.
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /(node_modules|bower_components|build)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
      }
    ]
  },
  externals: {
    'react': 'commonjs react' // this line is just to use the React dependency of our parent-testing-project instead of using our own React.
  },
  mode: 'development'
};

Step 6. .babelrc

{
  "presets": ["env"],
  "plugins": [
    "transform-object-rest-spread",
    "transform-react-jsx"
  ]
}

Step 7. Coding your jsx code ...

Step 8. Check, Built, Publish

1. Run npm start to check your program
2. If step 1 isn't error, running npm run build
3. If step 2 isn't error, running npm publish Remark: When you running, you must to login npm.

Step 9. npm install

Now, you can running npm i <package-name> in other React project.

In this project, you can try to run npm i webpack-document to install my package. It is a simple counter.

Remark

1. ( 191119 ) Material-UI latest version must be matched react and react-dom version "^16.8.x" or higher "^16.8.x"
2. ( 191120 ) Modify npm direction and ReadMe Update