react-webpack-component

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

Installation

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

Development

Start

Watch changes in mode development

npm start

Build

Compile in mode production

npm run Build

Structure

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

Test the component in a project

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

At this point you can already use your component, usage:

import React, { Component } from 'react';
import { Example } from 'your-react-component-name'

class HelloWorld extends Component {
  render() {
    return (
        <Example />
    );
  }
}
export default HelloWorld;

Production

Publish in NPM

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
# :)

License

MIT © Leonardo Rico