CARTO for React

CARTO for React

Overview

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:

The NPM packages are available here:

  • Templates:
Package Version Downloads
@carto/cra-template (skeleton template) version downloads
@carto/cra-template-sample-app (sample app template) version downloads
  • Lib packages:
Package Version Downloads
@carto/react-api version downloads
@carto/react-auth version downloads
@carto/react-basemaps version downloads
@carto/react-core version downloads
@carto/react-redux version downloads
@carto/react-ui version downloads
@carto/react-widgets version downloads
@carto/react-workers version downloads

Architecture

architecture

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.
  • React as the JavaScript library for building user interfaces and Redux for managing global state for the application. We use React-Redux for managing the interactions between the React components with the Redux store.
  • 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.

Why React?

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.

Templates

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:

1
npx create-react-app [application_name] --template [template_name]
  • application_name is the name of the folder that will be created for your application
  • template_name is the name of the template to use (@carto for the skeleton template or @carto/sample-app for the sample app template)

Library

In addition to the Create React App templates, we have created a library to:

  1. Provide an easy integration with the CARTO platform and its APIs.

  2. Provide a catalog of useful widgets for LI Apps.

  3. 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?

At this moment, we only provide a complete solution with templates and widgets for React. If you are building an application using Vue, Angular or other JavaScript framework, you don’t have to worry, it is completely feasible and you just need to use the CARTO for deck.gl pure JavaScript flavor. Please check the examples.