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.

Contents:

Requirements
Creating a blank component
Creating 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:

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
```
When prompted to select the type of component to create, select blank.
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:

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:

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.
When prompted to select the type of component to create, select react.
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: