create-component-app - GitLite

KO | EN

gitlite — search

#python #hacktoberfest #react #llm #android #machine-learning #linux #nodejs #java #windows #cli #awesome-list #pytorch #open-source

create-component-app

(★ 855)

Tool to generate different types of React components from the terminal. 💻

파일 탐색기

최종 버전 다운로드 (.zip)

- launch.json
- tasks.json
- CAC0CC7B.png
- cca-no-templates.gif
- cca-templates.gif
- Create-Component-App Logo 1.svg
- Create-Component-App Logo 2.svg
- Create-Component-App Logo wBg.png
- Create-Component-App Logo.png
- CUSTOM-TEMPLATES-COMMUNITY.md
- CUSTOM-TEMPLATES.md
- build.sh
- - index.js
- .DS_Store
- config.json
- files.js
- index.js
- logger.js
- questions.js
- utils.js
- - COMPONENT_NAME.js
- - COMPONENT_NAME.js
- - COMPONENT_NAME.js
- - COMPONENT_NAME.js
- - index.js
- - COMPONENT_NAME.js
.babelrc
.ccarc.example
.codeclimate.yml
.eslintrc
.gitignore
.travis.yml
jestsetup.js
LICENSE
package-lock.json
package.json
README.md

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/CVarisco/create-component-app

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd create-component-app

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

$ npm install -g create-component-app

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<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](https://badge.fury.io/js/create-component-app.svg)](https://badge.fury.io/js/create-component-app)
[![Code Climate](https://codeclimate.com/github/CVarisco/create-component-app/badges/gpa.svg)](https://codeclimate.com/github/CVarisco/create-component-app)
[![npm](https://img.shields.io/npm/dw/create-component-app.svg)](https://www.npmjs.com/package/create-component-app)
[![Build Status](https://travis-ci.org/CVarisco/create-component-app.svg?branch=master)](https://travis-ci.org/CVarisco/create-component-app)

</p>

[(Introduction article v1)](https://hackernoon.com/create-component-app-v1-is-out-now-6ca0217992e9)  **🛠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 />

- [You can use templates from the community 🎉](#you-can-use-templates-from-the-community)
- [Create your components guided from terminal with a lot of choices](#create-your-components-guided-from-terminal-with-a-lot-of-choices)
- [You can create a configuration file in your current project directory](#you-can-create-a-configuration-file-in-your-current-project-directory)
- [You can also pass a configuration file from params](#you-can-also-pass-a-config-file)
- [You can use your own custom templates](#you-can-use-your-own-custom-templates)
- [Share your template to the community](https://github.com/CVarisco/create-component-app/blob/master/docs/CUSTOM-TEMPLATES-COMMUNITY.md)
<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

```sh
$ 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
- 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](https://github.com/davidtheclark/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](.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

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

**Passing a config file via the CLI overrides the configuration file loaded by [cosmiconfig](https://github.com/davidtheclark/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](https://github.com/davidtheclark/cosmiconfig)**

### You can use your own custom templates

Simple steps to create your own templates [docs/custom-templates](https://github.com/CVarisco/create-component-app/blob/master/docs/CUSTOM-TEMPLATES.md)

### 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>

- (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`

## Contributing
Now, the community can offer their templates! [How?](https://github.com/CVarisco/create-component-app/blob/master/docs/CUSTOM-TEMPLATES-COMMUNITY.md)

Check the [issue list](https://github.com/CVarisco/create-component-app/issues) 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](http://semver.org/).

Use `npm run watch` while coding.

### [Contributors](https://github.com/CVarisco/create-component-app/graphs/contributors)

## License

MIT © [Christian Varisco](https://github.com/CVarisco)