Base structure in Webpack 4 for the creation of npm modules in React

1. Clone

git clone https://github.com/kevoj/react-webpack-component.git your-react-component-name cd [your-react-component-name] npm install

2. Set name of the library

Replace in package.json

{ "name": "your-react-component-name", ... }

3. Create Link

npm run build npm link

Watch changes in mode development

npm start

Compile in mode production

npm run Build

 |-- dist/lib (Compiled) | `-- index.js |-- src/lib (Your code here, view example in code source...) | |-- Button/index.js | `-- index.js `-- webpack.config.js 

cd Existing-React-Project npm link your-react-component-name

import React, { Component } from 'react'; import { Example } from 'your-react-component-name' class HelloWorld extends Component { render() { return ( <Example /> ); } } export default HelloWorld;

1. Compile to production

npm run build

2. Login

npm login # login with your credentials in https://www.npmjs.com/

3. Upload package

Note: Verify your version of the component in package.json, you can not upload the same version twice

npm publish # Available in https://www.npmjs.com/package/your-react-component-name

Now, you can install your package with:

npm install your-react-component-name--save # :)

MIT © Leonardo Rico