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

Or

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.

License

You may use React Code Creator under the MIT license