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