This is a node script to automate creation of a react component.

Creates <component_name>.js and <component_name>.module.css files with boilerplate for the given component name.

• Copy The above createScript.js file with the same name into your project's root directory (The one which includes node_module and src).

   |---projectName |---node_modules |---public |---src |---createScript.js #Create this file. 

• In your package.json folder, under the scripts section add "create" command in the format given below

  { "scripts":{ ... "create" : "node createScript.js" } } 

This script takes in 2 arguments - class/function , component path.

To run the script - Start terminal in project folder, then:

• To create a class based component :

 > npm run create class path\to\folder\<ComponentName> 

• To create a function based component :

 > npm run create function path\to\folder\<ComponentName> 

|---projectName |---node_modules |---public |---src |---Components |---Container 

• Class Based Example:

  Terminal Command:

  c:\projectName > npm run create class Container\Main 

  Result:

  |---projectName |---node_modules |---public |---src |---Components |---Container |---Main |---Main.js |---Main.module.css 

  Main.js

  import React,{Component} from 'react' import Style from './Main.module.css' class Main extends Component{ render(){ return( <div className={Style.Main}> </div> ) } } export default Main 

  Main.module.css

  .Main{ } 

• Function Based Example:

  Terminal Command:

  c:\projectName > npm run create function Components\Landing 

  Result:

  |---projectName |---node_modules |---public |---src |---Components | |---Landing | |---Landing.js | |---Landing.module.css |---Container 

  Landing.js

   import React from 'react' import Style from './Landing.module.css' const Landing = (props) => { return( <div className = {Style.Landing}> </div> ) } export default Landing 

  Landing.module.css

  .Landing{ } 

This boilerplate and files names were made according to the file structure I follow but if you want to make changes in:

• Javascript File: change variable 'js' this way =>

   js = ` // your js boiler plate format ` 

• CSS Module File: change variable 'css' this way =>

   css = ` #your css boiler plate format ` 

JS and CSS variables are declared twice , for for class based component and other for function based component.

comments are added in their respective lines to make it easier to locate them.