React-code-creator NPM

React Code Creator

Summary

A lightweight tool to create boilerplate code for common React files.

React Code Creator is a simple implementation of plop.js for common React files.

React Code Creator supports creating the following types of React files:

Views (jsx or tsx)
Services
Contexts
Models (when using typescript)
Includes css and test spec files
Redux reducers
Actions
Storybook stories

Install

npm install react-code-creator --save-dev

yarn add react-code-creator --dev

Using

Config file

React Code Creator uses a react-code-creator.config.yaml file (which you should place at your project's root directory) to determine how to generate certain files. The config file should automatically be added to your root folder after installation with npm.

The config file has the following properties:

useTypescript: # Default: false
generateCss: # Default: true
generateTests: # Default: true
generateInterfaces: # Default: false
generateStories: # Default: false
generatePropTypes: false # true or false. Default is false
generateTypescriptProps: false # true or false. Default is false
cssExtension: # Default: "css"
testExtension: # Default: "spec"
root: # Default: "./src"
viewPath: # Default "views"
modelPath: # Default "models"
servicePath: # Default "services"
contextPath: # Default "contexts"
fileCase: # Default "camel"
pathCase: # Default "camel"
useSemicolons: # Default true

Property	Description	Possible Values	Default
useTypescript	Whether to create typescript files (`.tsx`, `.ts`)	`true` or `false`	`false`
generateCss	Whether to generate css files when creating components	`true` or `false`	`true`
generateTests	Whether to generate test spec files when creating components and services	`true` or `false`	`true`
generateInterfaces	Whether to generate interfaces when creating services	`true` or `false`	`false`
generateStories	Whether to generate Storybook stories when creating components	`true` or `false`	`false`
generatePropTypes	Whether to generate React.PropTypes when creating components	`true` or `false`	`false`
generateTypescriptProps	Whether to generate Typescript props when creating components	`true` or `false`	`false`
cssExtension	Define the type of css file to generate	`"css"`, `"scss"`, `"less"`, `"sass"`	`"css"`
testExtension	The file extension for test spec files	`"spec"` or `"test"`	`"spec"`
root	The root directory for your source code (where React Code Creator will place the generated files)	any filepath string	`"./src"`
viewPath	Where in the `root` directory to place autogenerated views	any filepath string	`"views"`
modelPath	Where in the `root` directory to place autogenerated models	any filepath string	`"models"`
servicePath	Where in the `root` directory to place autogenerated services	any filepath string	`"services"`
contextPath	Where in the `root` directory to place autogenerated contexts	any filepath string	`"contexts"`
fileCase	Casing type to try and enforce when creating file names	`"camel"`, `"pascal"`, `"dash"`, `"snake"`, `"dot"`	`"camel"`
pathCase	Casing type to try and enforce when creating file paths	`"camel"`, `"pascal"`, `"dash"`, `"snake"`	`"camel"`
useSemicolons	Whether to use semicolons in generated files	`true` or `false`	`true`

Casing Examples (fileCase and pathCase)

camel: camelCaseNames
pascal: PascalCaseNames
dash: dash-case-names
snake: snake_case_names
dot: dot.case.names

Running

After installing, React Code Creator should add a new script to your package.json file.

Run npm run new to begin the CLI

Skipping prompts

If you already know the values you would like to provide the CLI, you can add them as args

For example: npm run new componenent myComponent

Commands

You can see the full list of commands by running npm run new

Changing the Run command

You can change the command from new by updating the scripts section of your package.json file.

Naming Conventions

When creating certain files, React Code Creator will use the exact name you specify as the filename. This is the case when creating a Component, Model, or a Service

For example:

Creating component / class component: userProfile -> userProfile
Creating model: user -> user
Creating service: userFetcher -> userFetcher

But when creating a Context or Reducer, React Code Creator will append Context or Reducer to the filename, so don't include them when naming them!

For example:

Creating context: user -> userContext
Creating a reducer: user -> userReducer

Troubleshooting

Avoid frequently changing the config

React Code Creator relies on regex patterns to track and modify some generated files. Avoid changing the config parameters (such as file casing patterns, directories, or enabling/disabling typescript) to avoid errors related to locating previously generated files.