# @luisgilgb/react-component-generator

> CLI tool that generates the scaffolding for a React component library

Latest version **0.2.0** (published 2020-08-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install @luisgilgb/react-component-generator
pnpm add @luisgilgb/react-component-generator
yarn add @luisgilgb/react-component-generator
bun add @luisgilgb/react-component-generator
```

Provides the commands `rcgen`, `react-component-generator`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2020-08-05 |
| First published | 2020-03-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 82.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Luis Gil Gutiérrez de la Barreda |
| Maintainers | luisgilgb |
| Keywords | React, component, generator, CLI |

## Links

- npm: https://www.npmjs.com/package/@luisgilgb/react-component-generator
- Repository: https://github.com/LuisGilGB/react-component-generator
- Homepage: https://github.com/LuisGilGB/react-component-generator#readme
- Issues: https://github.com/LuisGilGB/react-component-generator/issues
- npm.io page: https://npm.io/package/@luisgilgb/react-component-generator

## Dependencies (4)

- [chalk](https://npm.io/package/chalk.md) ^4.1.0
- [yargs](https://npm.io/package/yargs.md) ^15.4.1
- [fs-extra](https://npm.io/package/fs-extra.md) ^9.0.1
- [@luisgilgb/js-utils](https://npm.io/package/@luisgilgb/js-utils.md) ^0.4.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.2.0 (latest) — 2020-08-05
- 0.1.2 — 2020-04-13
- 0.1.1 — 2020-03-20
- 0.1.0 — 2020-03-19

## README

# react-component-generator
Command line tool that makes the scaffolding for a new React component and its own demo application. The generated module has its own tools to allow you to publish it at npm.

## Install

```console
$ npm install -g @luisgilgb/react-component-generator
```

## Usage

```console
rcgen create -n @scope/my-cmp -N RealComponent -a "Author McAuthor" --git-user AuthorHasGitHub
```

Shorter version (without non required params):

```console
$ rcgen create -n my-cmp
```

This command will generate a component called MyCmp into a new my-cmp directory, in which you will find the following structure:

```
my-cmp
├── demo-app
│   ├── public
│   │   ├── favicon.ico
│   │   ├── index.html
│   │   ├── logo192.png
│   │   ├── logo512.png
│   │   ├── manifest.json
│   │   └── robots.txt
│   ├── src
│   │   ├── DemoApp.css
│   │   ├── DemoApp.jsx
│   │   ├── DemoApp.test.js
│   │   ├── index.css
│   │   ├── index.js
│   │   └── serviceWorker.js
│   └── .gitignore
├── src
│   ├── MyCmp.css
│   └── MyCmp.jsx
├── .babelrc
├── .env
├── .gitignore
├── package.json
├── README.md
├── webpack.config.demo.js
└── webpack.config.js
```

Being the src/MyCmp.jsx the main file of your new component and the one and most likely the one that will contain most of the new development. Right after the scaffolding, its aspect is the following one:

```js
import React from 'react';
import './MyCmp.css';

const DEFAULT_CLASS_NAME = 'my-cmp';

const MyCmp = props => {
    const {
        children,
        className = '',
        style,
        onClick,
        ...otherProps
    } = props;

    return (
        <div
            {...otherProps}
            className={`${DEFAULT_CLASS_NAME} ${className}`.trim()}
            style={style}
            onClick={onClick}
        >
            {children}
        </div>
    );
}

export default MyCmp;
```

## Arguments

You can use the following arguments:
--name (-n) - The name of your future npm package. The only mandatory argument, the component name will be generated from it. You can scope it if you want too!
--component-name (-N) - The name of the React component, so the jsx file, the component it exports and the CSS file will share this name. A component name will be automatically generated from the required name parameter if a component-name value is not provided.
--dirname (-d) - The name of the directory created to contain the scaffolded files. A default dirname will be generated from name if this argument is not provided.
--author (-a) - The author's name.
--git-user (-g) - The Git username, use it to have generate the proper GitHub links at Readme file!

Example of these extra arguments usage:

```console
$ rcgen create -n @scope/my-cmp -N RealComponent -a "Author McAuthor" --git-user AuthorHasGitHub
```

Notice that rcgen is just a shorter alias for calling the CLI tool, you can also run this generator by the react-component-generator command too:

```console
$ react-component-generator create -n @scope/my-cmp
```

## Running a demo

First of all, remember installing the new module dependencies:

```console
$ npm install
```

Once you have your dependencies installed, you can run a demo application of your new component just by entering:

```console
$ npm run demo-start
```

This demo app will be hosted at http://localhost:3030/ if nothing is changed at the webpack demo config.

The vanilla demo-app only consists in a header and a body with your component with a default text as only child (and only prop).

```js
import React from 'react';
import MyCmp from '../../src/MyCmp';
import './DemoApp.css';

function DemoApp() {
  return (
    <div className="app">
      <header className="app-header">
        <p>
          Edit <code>src/DemoApp.js</code> and save to reload.
        </p>
        <a
          className="app-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
      <MyCmp>
        This is into a MyCmp
      </MyCmp>
    </div>
  );
}

export default DemoApp;
```

Feel free to edit this and other demo files (or even adding your own ones!) to test and having a nice demo application for your component.

## Publishing the component

The aim of this generator is to have your custom components ready to be built and published in npm with the least extra Webpack (or other tools) configuration as possible. Let's do it!

You'll only need to enter the following command:

```console
$ npm run publish-pro
```

And that's it!

There are more available commands to build, transpile, clean dependencies... give them a try if you want!

## FREEDOM

Remember this is just a scaffold utility thinking in a basic scenario. You can change whatever you want for your own generated component. As I said, feel free!

## Built With

* [NodeJS](https://nodejs.org/es/) - The scripting language in which this generator is written.
* [ReactJS](http://reactjs.org/) - The web framework used
* [Webpack](https://webpack.js.org/) - The bundling tools to both build a deployable component or a demo application.
* [npm](https://www.npmjs.org/) - Dependency Management
* [Sublime Text 3](https://www.sublimetext.com/) - Text editor for development
* [Visual Studio Code](https://code.visualstudio.com/) - Another text editor for development, a bit closer to what a real IDE would be.

## Contributing

TBD

## Versioning

We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/LuisGilGB/react-component-generator/tags).

## Authors

* **[Luis Gil Gutiérrez de la Barreda](https://github.com/LuisGilGB)**

See also the list of [contributors](https://github.com/LuisGilGB/react-component-generator/contributors) who participated in this project.

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details

## Acknowledgments

* ReactJS community and developers.
* [create-react-app](https://github.com/facebook/create-react-app), main source of inspiration of this utility. What they made for React applications, I've tried to replicate for React components.

---
_Source: https://npm.io/package/@luisgilgb/react-component-generator · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._