(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.
What you can do with this tool ?
- You can use templates from the community 🎉
- Create your components guided from terminal with a lot of choices
- You can create a configuration file in your current project directory
- You can also pass a configuration file from params
- You can use your own custom templates
- Share your template to the community
$ npm install -g create-component-app
Usage```sh $ 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
connectfunction 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
pathof the new component
You can create a configuration file in your current project directoryCreate-component-app uses cosmiconfig for configuration file support. This means you can configure cca via:
.ccarcfile, written in YAML or JSON, with optional extensions:
cca.config.jsfile that exports an object.
"cca"key in your
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 ConfigurationAn 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
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
includeStories| Default flag to include a storybook file in the folder
indexFile| Default flag to create an index file in the folder
connected| Default flag to integrate connect redux in the index file
componentMethods| Only for "class" and "pure", insert method inside the component (i.e.
["componentDidMount", "shouldComponentUpdate", "onClick"]).
constructorwill be always included.
fileNames| Choose the specific filename for your component's file. (COMPONENTNAME 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 file1) Create a JSON file
2) and pass the path to config param
```sh $ 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```sh $ 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 templatesSimple steps to create your own templates docs/custom-templates
You can use templates from the communityNow, 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
ContributingNow, the community can offer their templates! How?
Check the issue list to contribute on some activities or to advice new features! The library is open to everybody, contribute improve your skills.
create-component-appis maintained under the Semantic Versioning guidelines.
npm run watchwhile coding.