https://github.com/ericlee33/create-compositive-react-app-cli
The React family bucket integrates scaffolding. On the basis of create-react-app, optional configuration items such as React-Router, Redux, Linter/Formatter, etc. are added, which can quickly create react projects.
https://github.com/ericlee33/create-compositive-react-app-cli
cli nodejs react react-router redux
Last synced: about 1 month ago
JSON representation
The React family bucket integrates scaffolding. On the basis of create-react-app, optional configuration items such as React-Router, Redux, Linter/Formatter, etc. are added, which can quickly create react projects.
- Host: GitHub
- URL: https://github.com/ericlee33/create-compositive-react-app-cli
- Owner: ericlee33
- Created: 2021-04-02T16:00:15.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2022-08-11T17:12:08.000Z (almost 3 years ago)
- Last Synced: 2025-04-21T04:06:49.175Z (2 months ago)
- Topics: cli, nodejs, react, react-router, redux
- Language: TypeScript
- Homepage:
- Size: 250 KB
- Stars: 13
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# create-compositive-react-app-cli
> [npm 源地址：](https://www.npmjs.com/package/create-compositive-react-app-cli)同 git 仓库名
> https://juejin.cn/post/6951330074905804814
## Introduction 脚手架介绍
减少从 0 到 1 搭建项目的成本，快速开发项目
在`create-react-app` `v4.0.3`脚手架基础上，增加了如下项目配置可选项
- `React-Redux + Redux-Thunk + Redux-Logger`
- `React-Router` (可选择`History`, `Hash`模式)
- `Linter / Formatter` （目前提供了`Eslint + EditorConfig + Prettier + CommitLint`）
完成模板创建后，自动安装依赖。
## Getting started 快速使用
- 推荐使用
`npx create-compositive-react-app-cli init `
- 也可使用
`npm i -g create-compositive-react-app-cli`
`ccra init `
## Usage 使用方法
##### 快速搭建项目
`ccra init `
配置项有 3 种可选项:
- Redux
- React-Router (可选择 History, Hash 模式)
- Linter / Formatter （目前提供了 Eslint + EditorConfig + Prettier + CommitLint）
##### 快速创建 Page、Component 模板
`ccra create`
可以在 **CLI** 中自行选择创建 **Page** 或 **Component**
输入 **name** 后即可完成模板自动创建
## Template Structures 模板结构
```
├─.editorconfig
├─.eslintignore
├─.eslintrc.js
├─.prettierrc.js
├─README.md
├─commitlint.config.js
├─package.json
├─src
| ├─App.js
| ├─index.js
| ├─views
| | ├─login
| | | ├─login.jsx
| | | └login.module.scss
| ├─utils
| | └index.js
| ├─styles
| | ├─index.scss
| | ├─modules
| | | ├─function.scss
| | | ├─global.scss
| | | ├─mixin.scss
| | | └variables.scss
| ├─store
| | └store.js
| ├─routes
| | ├─routes.jsx
| | └routesConfig.jsx
| ├─reducers
| | ├─reducers.js
| | ├─module
| | | └auth.js
| ├─layouts
| | ├─BasicLayout
| | | ├─BasicLayout.jsx
| | | └BasicLayout.module.scss
| ├─constants
| | └constants.js
| ├─components
| | ├─Widget
| | | ├─widget.jsx
| | | └widget.module.scss
| ├─actions
| | ├─actions.js
| | ├─module
| | | └auth.js
├─public
| └index.html
```
## Features 功能介绍
- 一键快速创建`Page`组件
- 一键快速创建`Components`组件
- 在`ccra init `进行初始化项目时，通过`Inquirer`库的功能，提供给用户各类可选项，可以根据用户所需配置，进行项目自动化构建。
- 注：状态管理暂时仅提供`Redux`模板
- 路由管理提供`React-Router` `v5`模板
- 自动安装所需要的`@types`文件，即便用户使用`JavaScript`进行开发，也能在`vscode IDE`下得到函数提示支持
## Contact me 联系我
wechat:`actuallys`