README

shady-react-components

Base structure in Webpack 4 & Babel 6 & Sass for the creation of npm modules in React

Installation

1. Clone

git clone https://github.com/anker-shady/shady-react-components 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...)
|   |-- containers
|   |   `-- ShopNav
|   |-- components
|   |   |-- AddressForm
|   |   |-- AddressItem
|   |   `-- CouponItem
|   `-- 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: package.json 内的 package-name 不能与他人重复 Note: 每次发布 version 不能与之前的版本相同

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

Delete this package publish

npx force-unpublish package-name 'the reason'

shady-react-componentsdeprecated

Usage no npm install needed!