react-webpack-mobx

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

Installation

1. Clone

git clone https://github.com/kevoj/react-webpack-mobx.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 (Compiled)
|   `-- index.js
|-- src (Your code here, view example in code source...)
|   |-- components
|   |   |-- Example.js
|   |   `-- styles
|   |       `-- Example.scss
|   |-- config
|   |   `-- constants.js
|   |-- providers
|   |   `-- User.js
|   |-- stores
|   |   `-- User.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