CARTO for React is the best way to develop Location Intelligence (LI) Apps using the CARTO platform + React + deck.gl.
It is based on Create React App, the most popular toolchain, and it will allow you to start with a well designed structure following the best practices for modern frontend development and an integrated toolchain for testing, building, and deploying your application.
The code is open source and is available in the following repositories:
Templates for Create React App: https://github.com/CartoDB/carto-react-template
The NPM packages (latest version) are linked below:
- Lib packages:
CARTO for React is based on the following libraries:
- CARTO for deck.gl as the library to visualize maps. For the basemaps you can use either Google Maps or CARTO basemaps.
- Material-UI: UI React components for faster and easier web development.
- [@carto/react-*]: A set of packages created to make easy integration with CARTO platform and its APIs, geospatial widgets, and a custom theme for Material-UI.
Location Intelligence Apps tend to be applications with a reduced number of pages, but with lots of functionalities at each page and many relations between them.
In the past, they were developed using imperative programming (with MVC patterns or similar), but it easily ends up in a messy application with a huge amount of dependencies between components. And each time you need to add something new, a new bug is also introduced.
The reactive programming paradigm (React and deck.gl) fixes this issue and makes your application easy to maintain, test, and scale. We are 100% sure that you can create something manageable even if your application is really complex and includes lots of features with multiple interactions.
Yes, it is a new paradigm, but once you learn it, you will love it.
CARTO for React includes the following Create React App templates for kickstarting your application:
The CARTO 3 template for TypeScript that creates a simple application with just a map using the CARTO 3 platform. This is the template you are usually going to choose when you are creating a new app using TypeScript.
The CARTO 2 template, similar to the CARTO 3 template. You are going to use it when you are creating a new app with the CARTO 2 platform.
The sample app templates for CARTO 2 and CARTO 3 that create a more complex application with several views, layers, and widgets. The purpose of these templates is to demonstrate how you can implement common Location Intelligence functionalities in a CARTO for React app.
The command to create a new application depends on the package manager we are using.
If using npm as the package manager:
If using yarn:
application_nameis the name of the folder that will be created for your application
template_nameis the name of the template to use:
@carto/base-3for the CARTO 3 template
@carto/base-3-typescriptfor the CARTO 3 template for TypeScript
@carto/sample-app-3for the sample app template for CARTO 3.
@carto/base-2for the CARTO 2 template
@carto/sample-app-2for the sample app template for CARTO 2.
In addition to the Create React App templates, we have created a library to:
Provide an easy integration with the CARTO platform and its APIs.
Provide a catalog of useful widgets for Location Intelligence Apps.
Create a custom theme for Material-UI to reduce the design work of your team.
There is a full reference available.
The library includes a set of UI components ready to be used to create the best Location Intelligence Apps.
Frequently Asked Questions (FAQ)
Installing npm modules, learning React with Redux, learning Material-UI, it is just too much for my application, is there a simpler way?
If your application is not so complex and does not need the benefits added by this template, you can just use CARTO for deck.gl with the scripting API. Please check the examples.
I’m using Vue or Angular for building my applications, what are my options?
When should I use the CARTO 3 platform vs the CARTO 2 platform?
CARTO 3 is the next version of the CARTO Platform. The main difference is that it provides full native support for cloud data warehouses and platforms, pushing down queries. If you are starting a new application, we recommend you to use the latest version of CARTO by requesting access. Or contact us if you have questions.
Can I use the library with my own Create React App template? Yes, the library can be used independently. You will need to ensure you have added the required dependencies and you won’t be able to use the code generator, but you can take advantage of the functionality offered by the library: user interface components, widgets, state management, interaction with the CARTO platform…