Ahmed ElHussiny

Ryan Watkins

Bootstrap your React Apps for the ArcGIS API for JavaScript

Agenda

• React & Co.

• Project Showcase

• Our React Bootstrap App

• Q & A

Library Overview

Standard

Optional

Calcite

reactjs.orgfacebook.github.io/create-react-app/

State Management

Data flow

Store

redux.js.org

Side-Effects

Store

Request

github.com/redux-saga/redux-saga

github.com/Esri/esri-loader

esri-loader

A tiny library to help load modules from either the 4.x or 3.x versions of the ArcGIS API for JavaScript in non-Dojo applications

styled-components.com

Calcite React

Optional

calcite-react.netlify.com

https://github.com/Esri/calcite-react

Abu Dhabi Environmental Agency

Marine Water Quality

American University in CairoAUC Map

Abu Dhabi Department of Transportation

Incident Dashboard

Esri – React – Boot

• Create-React-App

• Configuration

• Authentication

• Map and Scene Componentsgithub.com/Esri/esri-react-boot

Side-Effect Chain

config loaded &

user logged in?

App

Main

Loading Screen

Entry

No

Yes

config

AuthManager

user

check Auth

update user in store

fetch config

create AuthManager

Esri Professional ServicesEsri-React-Boot

Questions?

github.com/Esri/esri-react-boot

Complete answersand select “Submit”

Scroll down to find the feedback section

Select the session you attended

Download the Esri Events app and find your event

Please Take Our Survey on the App