Code Generator

View on Github

CARTO for React includes a code generator based on Hygen to speed up the creation of the most common elements found in apps: views, sources, and layers.

Views

If you want to create a new View, you need to execute the following command in the project root folder:

yarn hygen view new

The command will ask you to select the following options:

The code generator will perform three different actions in your code:

  1. Modify the route settings in the application (in the src/routes.js file) to add the path to the new view.

  2. Add the view to the header in the src/components/common/header/Header.js file.

  3. Create a new file for the view in the following folder: src/components/views. This view will contain the “Hello World” string in the returned JSX code. You can substitute this string with the JSX code for your user interface.

Sources

If you want to create a new Source, you need to execute the following command:

yarn hygen source new

The command will ask you to select the following options:

The code generator will create a new file in the src/data/sources/ folder that will define a source object with the following properties:

In addition to these three properties, you can add an additional credentials property to the source after it has been created. This is useful if you want to add a source with different credentials from those specified in the src/store/initialStateSlice.js file.

Layers

For creating a new layer, you need to execute the following command:

yarn hygen layer new

The command will ask you to select the following options:

The code generator will perform two different actions:

  1. Create a new file for the layer in the src/components/layers/ folder. This element will return a CartoLayer. If you want to modify the default visualization options, you can modify the corresponding deck.gl layer properties.

  2. Attach the layer to the view in the corresponding view file, if this option has been selected. If this is the case, before adding the layer by dispatching the addLayer action, the source will also be added using the addSource action.

Help

For further information about these commands you can execute:

yarn hygen help

Last updated