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 are available here:
Package Version Downloads @carto/cra-template (skeleton template) @carto/cra-template-sample-app (sample app template)
Package Version Downloads @carto/react-api @carto/react-auth @carto/react-basemaps @carto/react-core @carto/react-redux @carto/react-ui @carto/react-widgets @carto/react-workers
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.
LI 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 relations between components. And each time you need to add something new, a new bug is also introduced.
The reactive programming (React and deck.gl) comes to fix this issue and make your application easy to maintain, to test and to scale. We’re 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’s a new paradigm, but once you learn it, you’ll love it.
CARTO for React includes two different Create React App templates for kickstarting your application:
The skeleton template that creates a simple application with just a map. This is the template you are usually going to choose when you are creating a new app.
The sample app template that creates a more complex application with several views, layers and widgets. The purpose of this template is demonstrating how you can implement common LI functionalities in a CARTO for React app.
The command to create a new application is the following:
application_nameis the name of the folder that will be created for your application
template_nameis the name of the template to use (
@cartofor the skeleton template or
@carto/sample-appfor the sample app template)
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 LI 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 LI 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?