Create Components react

Create components react generates react component folder(s).

🚨 Deprecation notice!

Dear users and contributors,

We're thrilled to share some exciting news with you! After years of valuable support for create-components-react, we've decided to deprecate it in favor of Templates. Templates is a versatile tool that goes beyond create-components-react, catering to a wide range of languages and frameworks. We truly appreciate your continued support and welcome your contributions to this new chapter!

We will continue to fix bug and answer questions. however any new functionality will only be added to Templates

Checkout the coming from create components react guide to help get you started.

Thank you, Marcellino Ornelas

Install

npm install -g create-components-react

Create

Description

This will create a react component folder that will include a default of <ComponentName>.js, <ComponentName>.css, and index.js. There is also a test file that can be included but only if you specify it with the test flag or in a local settings file see Settings for more

Note: If the directory to the component doesnt exist, create-components-react will make it for you.

---

Syntax

ccr create [flags...] <ComponentName> [ComponentNames...]

Parameters

[flags...] (optional) flags to change the behavior of create.

ComponentName (required) Name of the component you would like to create.

[ComponentName...] (optional) one or more component names, separated by a space, to generate.

---

Flags

Short Flag	Long Flag	Default	Description
-c <ext>	--css-type <ext>	css	Change extension for css file
-s	--no-css	false	Don't include a css file for the component(s) you create
-i	--no-index	false	Don't include a index file for the component(s) you create
-d	--no-default	false	Don't include any of the default packages for react. (index, style, component or functional) This will create a empty folder if not used with other commands
-t	--test	false	Include a test file for the component(s) you create
-f	--functional	false	Make the react component a function style component(component that has no state)
-r <path>	--extend-cwd <path>		Path to extend your current working directory path
-p <packages...>	--packages <packages...>		Colon separated list of additional packages to include while generating you component

---

Examples

Use the create command to create a component folder in your current working directory

ccr create App

App/
| - App.js
|
| - App.css
|
| - index.js

You can also specify a path to place the component. ccr create path_to_folder/<ChildComponent>.

ccr create Nav/NavItem

This will create a NavItem component inside the nav folder.

Nav/
| - NavItem/
    |
    | - NavItem.js
    |
    | - NavItem.css
    |
    | - index.js

If Nav was a component already then it would look like this.

Nav/
| - index.js
|
| - Nav.js
|
| - Nav.css
|
| - NavItem/
    | - NavItem.js
    |
    | - NavItem.css
    |
    | - index.js

Note: Parent folder(s) will be created if they dont exist. This will not make the parent folder a component.

You can also create multiple components name at the same time ccr <ComponentName> <ComponentName> <ComponentName>...

ccr create Nav SideBar SideBar/SideBarItem

This line will create a Nav and SideBar component. Then it will create a SideBarItem component that will be in the SideBar folder.

Nav/
| - Nav.js
|
| - Nav.css
|
| - index.js
|
SideBar/
| - SideBar.js
|
| - SideBar.css
|
| - index.js
|
| - SideBarItem/
      | - SideBarItem.js
      |
      | - SideBarItem.css
      |
      | - index.js

---

You can use the --extend-cwd to place components into a specific folder without changing your directory in the terminal.

cd path/to/project
ccr create --extend-cwd ./path/to/folder App

This will place all of your components inside of the folder at ./client/src/components/

or

Add the path to .ccr/settings.json.

Note: see settings section for more info about how to use setting.json file

settings.json

{
  "extendCwd": "./path/to/components"
}

Then you can use:

ccr create App

This will inherit the path from the settings.json file and place the App component into the path you specified.

Note: using --extend-cwd will overwite the path used in your settings.json file

Tips

create-components-react assumes that you want the first character of all paths to a component and the component's name to be uppercase. If you input a component name or any paths that have there first letter lowercase, it will be converted into uppercase. Examples:

ccr create app

app will turn into App

ccr create nav/navItem

nav/navItem will turn into Nav/NavItem

Settings

Description

create-components-react gives you the capability to make localized settings for any repo. These setting will change the behavior of how create-components-react functions. These settings would be like using the flags in the command line but it will be applied every time a react component is made.

Note: You should initailize the settings in your repos root directory.

---

Syntax

ccr init [flags...]

Parameters

[flags...] (optional) flags to change the behavior of init.

---

Flags

Flag	Default	Description
-t, --templates	false	Initialize create-components react to use templates functionality

---

Setting options

Property	Type	Default	Description
index	Boolean	true	Include a index file for the component(s) you create
css	Boolean	true	Include a css file for the component(s) you create
test	Boolean	false	Include a testing file for the component(s) you create
default	Boolean	true	Include all of the default packages for react. index, css, and component or functional
templates	Boolean	false	Use local templates instead of defaults
cssType	String		Change extension for css file
extendCwd	String		Path to place your components. This path should be relative to the folder where you initalized your settings
verbose	Boolean	false	log progress while creating components

---

Examples

First navigate into the directory that you wish to initailize local settings.

cd some/path/to/repo

Initailize create-component-react settings

ccr init

This will create a .ccr/ folder with settings.json file inside it.

Note: If -t flag is present it will also make a templates/ folder inside .ccr/ folder and initialize templating.

Templating

Description

This will allow a user to construct how each file of a component look. This gives the ability for a user to modify or add to the structure of a component and the files it should include.

Note: create-components-react uses a templating engine to compile and render the files. More documentation on how to use the templating engine can be found here

Syntax

ccr template

Parameters

None

---

Flags

No flags for Templating

---

doT

The doT templating language uses {{}} for interpolation and javascript execution. Here are some basic uses of doT that we use throughout this tutorial:

Name	Code	Description
Interpolation	{{= expression }}	Replaces {{= expression }} with the value of the expression
Conditionals	{{? condition }} /* code here*/ {{?}}	Render the code between the braces when the condition evaluates to true

Note: All features of doT may not be supported. If you wish to use a feature and it doesnt work feel free to make a issue on github.

---

ENV Settings

Component

usage:

it.component

propertys:

Property	Type	Description
name	String	Name of the Component we are generating
dir	String	Directory path where the current file will be saved to

Packages

usage:

it.packages

This object holds the package names that are used while creating you component. For example if you added a custom package called storage and created a component like this ccr create -p storage App, it.packages.storage will be true because you told the program to include the package storage.

Setting

usage:

it.settings

propertys:

The properties here are the same as the ones you can use in settings options section

---

Examples

To initailize templating, you can use:

ccr template

Note: This will only make templating folder to use. You still would need set the templates property in your .ccr/settings.json to true.

{
  //...
  "templates": true
  //...
}

This feature still relays on your local settings to work. It is recommended to initalize templating when initailizing settings. This command is here for those who have a old repo with create-components-react local settings already initailized and want to add templating.

This is the recommended way to initailze templates if you don't have local settings initialized.

ccr init -t

This will initialize local settings and local templating.

---

Packages

| - templates/
    | - component/
    |   | - {{= it.component.name }}.dot
    |
    | - index/
    |   | - index.dot
    |
    | - functional/
    |   | - {= it.component.name }}.dot
    |
    | - style/
    |   | - {= it.component.name }}.{= it.settings.cssType }}.dot
    |
    | - test/
    |   | - {= it.component.name }}.test.js.dot
    |
    | - settings.json

Lets give you some basic info on how templating works. When you initialize templating in create-components-react, every folder that is a direct child of .ccr/templates/ are called packages. Create-components-react uses the content of these folders to render your component. The default packages for react are index, component, style. These will be included everytime you create a component structure unless you specify in the local settings or with command-line flags that you would not like to include some or all these packages.

The next thing that should look weird are the file names.

{{= it.component.name }}

This is doT sytax and doT uses this for template interpolation. When generating components create-component-react gives you a bunch of options that can help you create dynamic file name or files.

Example:

ccr create App the {{= it.component.name }} inside of files or file names gets replaced with App. The top level element is always it.

There are two variables that you can use.

• Component -> it.component
• Settings -> it.settings

You can file a list of all posssible propertys you can use here.

You also are allowed to add your own packages to use throughout the repo. For examples of how to create a custom package go here.

---

Examples

Open your terminal and go to the directory that you wish to use.

cd path/to/repoFolder/

Initialize Settings and Templates

ccr init -t

or this if you have settings already initialized.

ccr template

This will create:

RepoFolder/
| - .ccr/
    | - templates/
        | - component/
        |   | - {{= it.component.name }}.dot
        |
        | - index/
        |   | - index.dot
        |
        | - functional/
        |   | - {= it.component.name }}.dot
        |
        | - style/
        |   | - {= it.component.name }}.{= it.settings.cssType }}.dot
        |
        | - test/
        |   | - {= it.component.name }}.test.js.dot
        |
        | - settings.json

open component/{{= it.component.name }}.dot and you should see something like this.

    import React, { Component } from 'react';
    {{? it.settings.css }}
    import './{{= it.component.name }}.{{= it.settings.cssType}}';
    {{?}}

    class {{= it.component.name}} extends Component {
      // constructor(props){
        // super(props);
        // this.state = {};
      // }

      // componentWillMount(){}
      // componentDidMount(){}
      // componentWillUnmount(){}

      // componentWillReceiveProps(){}
      // shouldComponentUpdate(){}
      // componentWillUpdate(){}
      // componentDidUpdate(){}

      render() {
        return (
          <div></div>
        );
      }
    }

    export default {{= it.component.name}};

Note: All templates in the .ccr/templates folder are the default templates for create-components-react.

The next thing that looks that doesnt look familiar is this.

{{? it.settings.css }}
import './{{= it.component.name }}.{{= it.settings.cssType}}';
{{?}}

This is doT syntax for a conditional. This line will render the import statement if the setting option of css is true, which means if you want to include a css file for the component. To see the difference create a component component like with a ccs file( ccr create App ) and create one without a ccs file( ccr create -s Nav ). Now compare Nav.js and App.js. App.js should have the import css line while Nav.js doesnt.

component/{{= it.component.name }}.dot is the default file template to generate the main component file. You can edit this file to make it look like anything you want as long as you follow the rules of doT. After you update this file and save it you can use the create command and each component created will take on the look of the template file you updated.

Example: Edit component/component.dot to render a component that doesn't include any react lifecycle methods always uses the constructor function. Now your file should look like this:

    import React, { Component } from 'react';
    {{? it.settings.css }}
    import './{{= it.component.name }}.{{= it.settings.cssType}}';
    {{?}}

    class {{= it.component.name}} extends Component {
      constructor(props){
        super(props);
        this.state = {};
      }

      render() {
        return (
          <div></div>
        );
      }
    }
    export default {{= it.component.name}};

Now when you execute ccr create App it should make a directory like this:

Repo Folder/
| - .ccr/
|   | - ...
|
| _ App/
    | - App.js
    | - index.js
    | - App.css

This doesn't look to different than the default version right? Don't be disappointed too quickly. Let's take a look at App.js. This file is created from the component/component.dot so if we have all our configurations right, it should now look like this:

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return <div />;
  }
}
export default App;

This is the code we have just editted in .ccr/templates/component/component.dot. You can edit to file however you want to fit your needs while developing with react.

Default Packages

As mentioned earlier create-components-react has default packages that it renders these default packages are index, component, css.

---

Custom Packages

You can create custom packages to add when generating you components. These packages can have directories and/or dot files for rendering inside. Each directory( even nested ones!) and all files will be made to the destination. Inside of your package folder you can create a file(s) and/or directory(s). Each file inside that you would like to have processed with doT should include a .dot extention at the end of the file.

If the only extention to your file is a .dot extention then will be rendered as a .js file. If you would like to have another type of extention include it before the .dot extention.

To use custom packages use the -p flag while creating a component. The -p or --packages flag takes a colon separated list of package names.

Example:

ccr create -p storage:view:container App

This command will Create an App component with custom storage, view, and container packages.

examples

To add your own custom packages. Create a folder inside the templates/ folder. The name can be anything you want but its important to remember that this name is what the package is gonna be called.

In this example we are going to create a storage package that will help us create a mobx store. Create A folder called storage. Next create a file called {{= it.component.name }}Storage.dot.

RepoFolder/
| - .ccr/
    | - templates/
        | - component/
        | - index/
        | - functional/
        | - style/
        | - test/
        |
        | - storage/
        |   |- storage.dot
        |
        | - settings.json

Inside of storage/{{= it.component.name }}Storage.dot add the following code.

    import { observable } from "mobx"

    class {{= it.component.name  }}Storge {
        // @observable
        // @computed get
    }

    export default {{= it.component.name  }}Storge;

Now create a component with our additional package. Execute this line in your command line.

ccr create -p storage App

This will create:

App/
|
| - App.js
| - App.css
| - index.js
| - AppStorage.js

To get alittle more fancy we can change some behavior from other file when certain packages are used. Open templates/component/{{= it.component.name }}.dot. You can add this line inside your file to have dynamic capabilies when generating a component with a certain package.

    {{? it.packages.storage }}
    import {observer} from 'mobx-react';
    {{?}}

now when you call:

ccr create -p storage Nav

Our nav component should have render the import statement for mobx.