Home

Awesome

<p align="center"> <img src="https://user-images.githubusercontent.com/7335613/31996536-29195b54-b989-11e7-84af-25744b154345.png" width="500" alt="create-component-app"/> </p> <p align="center">

npm version Code Climate npm Build Status

</p>

(Introduction article v1) 🛠WIP v2

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

Available extension

<a href="https://github.com/CVarisco/vs-component-app"><img src="http://ubuntuhandbook.org/wp-content/uploads/2017/05/vscode-icon245.png" width="50px"> </a><br />

What you can do with this tool ?<br />

<p align="center"> <img src="https://github.com/CVarisco/create-component-app/blob/master/docs/cca-no-templates.gif" alt="create-component-app" width="1024" /> </p>

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

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:

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:

OptionDescription
typeDefault type of the component ["stateless", "class", "pure"]
templatesDirPathDefault path to get the templates from the custom templates folder
pathDefault path to create component file and folder
jsExtensionDefault extension for your javascript file ["js", "jsx"]
cssExtensionDefault extension for your css file ["css", "scss", "sass", "less", false]. Set to false if you don't want a style file
includeTestsDefault flag to include a test file in the folder [true, false]
includeStoriesDefault flag to include a storybook file in the folder [true, false]
indexFileDefault flag to create an index file in the folder [false, true]
connectedDefault flag to integrate connect redux in the index file [false, true]
componentMethodsOnly for "class" and "pure", insert method inside the component (i.e. ["componentDidMount", "shouldComponentUpdate", "onClick"]). render and constructor will be always included.
fileNamesChoose the specific filename for your component's file. (COMPONENT_NAME will be replaced)
fileNames.testFileNamespecify the file name of your test file
fileNames.componentFileNamespecify the component file name
fileNames.styleFileNamespecify 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.

<p align="center"> <img src="https://user-images.githubusercontent.com/7335613/32015409-51e4b5e6-b9c1-11e7-9ccf-bb21eff2c66a.gif" alt="create-component-app-templates" width="1024" /> </p>

Contributing

Now, 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-app is maintained under the Semantic Versioning guidelines.

Use npm run watch while coding.

Contributors

License

MIT © Christian Varisco