Creating a new component

Note: this documentation is for a beta release of Caplin Trader 5. Features may change before the final release.

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.

Contents:

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:

src/MyBlankComponent/
├── component.js
└── __tests__/
    └── component-test.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
    Note: 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:

src/MyReactComponent/
├── MyReactComponent.js
├── MyReactComponent.scss
├── stories/
│   └── index.js
└── __tests__/
    └── MyReactComponent-test.js