Creating a new component

This page provides instructions on how to create a new UI component in a Caplin Trader application.

Caplin CLI can create scaffolding for a blank component and a React component.

Requirements

Caplin Trader UI components are created in the context of a Caplin Trader application. For more information on creating Caplin Trader applications, see Creating a new application.

Creating a blank component

You create a blank component using Caplin CLI’s create-component command from the root directory of your application:

$ caplin-cli create-component <component-name>

To create a blank component called MyBlankComponent, for example, follow the steps below:

  1. From the root directory of your CT5 application (<workspace>/apps/<app-name>), run the command below to create a new blank component called MyBlankComponent:

    $ caplin-cli create-component MyBlankComponent
  2. When prompted to select the type of component to create, select blank.

  3. When prompted to select the location of the new component, select src.

The caplin-cli tool creates a directory for your new component with the following structure:

ct-workspaceappsMyAppsrcMyBlankComponent__tests__component-test.jscomponent.js

Creating a React component

You create a React component using Caplin CLI’s create-component command from the root directory of your application:

$ caplin-cli create-component <component-name>

To create a React component called MyReactComponent, for example, follow the steps below:

  1. From the root directory of your CT5 application (<workspace>/apps/<app-name>), run the command below to create a new React component called MyReactComponent:

    caplin-cli create-component MyReactComponent
    The name of a React component must begin with a capital letter.
  2. When prompted to select the type of component to create, select react.

  3. When prompted to select the location of the new component, select src.

The caplin-cli tool creates a directory for your new component with the following structure:

ct-workspaceappsMyAppsrcMyReactComponentstoriesindex.js__tests__MyReactComponent-test.jsMyReactComponent.jsMyReactComponent.scss