https://github.com/bytesleo/react-webpack-component
Base structure in Webpack 4 for the creation of npm modules in React.js
https://github.com/bytesleo/react-webpack-component
modules npm react react-webpack reactjs webpack4
Last synced: 8 months ago
JSON representation
Base structure in Webpack 4 for the creation of npm modules in React.js
- Host: GitHub
- URL: https://github.com/bytesleo/react-webpack-component
- Owner: bytesleo
- License: mit
- Created: 2018-02-24T19:05:10.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T23:30:58.000Z (about 3 years ago)
- Last Synced: 2025-06-01T15:44:36.029Z (8 months ago)
- Topics: modules, npm, react, react-webpack, reactjs, webpack4
- Language: JavaScript
- Homepage:
- Size: 1.67 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-webpack-component
[](https://npmjs.org/package/react-webpack-component) [](https://raw.githubusercontent.com/kevoj/role-calc/master/LICENSE)
> Base structure in Webpack 4 for the creation of npm modules in React
### Installation
**1. Clone**
```bash
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**
```json
{
"name": "your-react-component-name",
...
}
```
**3. Create Link**
```bash
npm run build
npm link
```
## Development
### Start
Watch changes in mode development
```bash
npm start
```
### Build
Compile in mode production
```bash
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
```bash
cd Existing-React-Project
npm link your-react-component-name
```
### At this point you can already use your component, usage:
```javascript
import React, { Component } from 'react';
import { Example } from 'your-react-component-name'
class HelloWorld extends Component {
render() {
return (
);
}
}
export default HelloWorld;
```
## Production
### Publish in NPM
**1. Compile to production**
```bash
npm run build
```
**2. Login**
```bash
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
```bash
npm publish
# Available in https://www.npmjs.com/package/your-react-component-name
```
Now, you can install your package with:
```bash
npm install your-react-component-name--save
# :)
```
## License
MIT © [Leonardo Rico](https://github.com/kevoj/react-webpack-component/blob/master/LICENSE)