Create-component-app NPM

(Introduction article v1)

How much time do you spend copying and pasting the component folder to create a new one ? This is a tool to generate different types of React components from the terminal.

Available extension

What you can do with this tool ?

Install

$ npm install -g create-component-app

Usage

$ cd ~/my-projects
$ create-component-app

Create your components guided from terminal with a lot of choices

Create different kind of components:
- stateless
- class
- pure
- custom
Set name of the new component
Integrate connect function of redux
Include an index file
Set a different component extension
- js
- jsx
Set a different style extension
- css
- scss
- sass
- less
Include a storybook file
Include a test file (with enzyme)
Set the destionation path of the new component

You can create a configuration file in your current project directory

Create-component-app uses cosmiconfig for configuration file support. This means you can configure cca via:

A .ccarc file, written in YAML or JSON, with optional extensions: .yaml/.yml/.json.
A cca.config.js file that exports an object.
A "cca" key in your package.json file.

The configuration file will be resolved starting from the root of your project, and searching up the file tree until a config file is (or isn't) found.

Basic Configuration

An example configuration file can be found here: .ccarc.example, you can use this file by copying it to the root of your project.

Currently supported options are:

Option	Description
`type`	Default type of the component `["stateless", "class", "pure"]`
`templatesDirPath`	Default path to get the templates from the custom templates folder
`path`	Default path to create component file and folder
`jsExtension`	Default extension for your javascript file `["js", "jsx"]`
`cssExtension`	Default extension for your css file `["css", "scss", "sass", "less", false]`. Set to false if you don't want a style file
`includeTests`	Default flag to include a test file in the folder `[true, false]`
`includeStories`	Default flag to include a storybook file in the folder `[true, false]`
`indexFile`	Default flag to create an index file in the folder `[false, true]`
`connected`	Default flag to integrate connect redux in the index file `[false, true]`
`componentMethods`	Only for "class" and "pure", insert method inside the component (i.e. `["componentDidMount", "shouldComponentUpdate", "onClick"]`). `render` and `constructor` will be always included.
`fileNames`	Choose the specific filename for your component's file. (COMPONENT_NAME will be replaced)
`fileNames.testFileName`	specify the file name of your test file
`fileNames.componentFileName`	specify the component file name
`fileNames.styleFileName`	specify the style file name !!IMPORTANT: Include cssExtension.

You can also pass a config file

1) Create a JSON file config.json:
2) and pass the path to config param

$ create-component-app --config path/to/your/config.json

Passing a config file via the CLI overrides the configuration file loaded by cosmiconfig

You can pass params from the command line

$ create-component-app --path path/destionation

Passing a param via the CLI overrides the configuration file loaded by cosmiconfig

You can use your own custom templates

Simple steps to create your own templates docs/custom-templates

You can use templates from the community

Now, the first question that you receive is Do you wanna choose a template? if you answer yes, you can see the list of templates from the community.

(Optional) Add to the settings templatesDirPath - a custom path to the user custom templates folder.
(Optional) Add to the settings templates - a list of used templates (with a default) to filter the list
(Optional) The user can choose between the available templates or use create-component-app -t templateName