- Create the component source file
- Create the component model
- Register the component and component model in your library registration file
Create the component source file in a new folder within the
src/components folder. For example to create a new component called
ExampleComponent, create a new file called
src/components/ExampleComponent with the following content:
Next we need to create the component model that will be bound to the component we just created. This model will function as the underlying data source for the component.
It's best practice to use the model to define configurable or persistent state, and use the React state hooks for UI specific transient state, like an active selection.
Create a new file called
Finally we need to register the component and component model with the Geocortex Web component registry so that it is aware of your new component.
To simplify the module imports, we'll make a new file in the
ExampleComponent folder called
index.ts. Note that this file is for convenience, and is not required:
Now register your component and component model with the component registry by modifying the
You can now add the component to your
layout.xml file and run the development server to see it in use.
Check out the Component Reference
Take a deep dive into components in the Geocortex Web SDK
Deploy your Component
Learn how to deploy your custom component.
Create a Component with a Complex UI
Follow along with a more in depth component example
Create a Component that Consumes App Config
Learn more about writing components that consume configuration values.