Cadasta React-Esri Client

Example app to explore how stuff works.

• Uses WebMap Survey Map

TODO

• Document core libraries:
  • react-arcgis
• Discuss code layout
  • Should we use more of a feature-based layout? https://marmelab.com/blog/2015/12/17/react-directory-structure.html
• Polyfills
  • From react-arcgis:

    If you need to support browsers lacking a native promise implementation, you will have to add a global Promise constructor polyfill to your project, as react-arcgis does not include one. I recommend es6-promise.

• Add ErrorBoundaries

---

Development

This project was bootstrapped with Create React App using the TypeScript React Starter. More documentation can be found in either of those repositories' READMEs.

The codebase follows the conventions of Containers vs Components. It is strongly recommended that you familiarize yourself with those concepts.

Installation

yarn global add create-react-app # Install create-react-app
yarn # Install package dependencies

Running Server

yarn start

Running Tests

yarn test

React Fundamentals

When Rendering

• No for loops, use .map:

  {
      // Remember that repeated elements must have a unique 'key' attribute
      ['apple', 'pear', 'orange'].map((fruit: string, index) => <h2 key={index}>{fruit}</h2>)
  }

• No if statement, use &&:

  // this will only render the 'Yes' element if `isLoaded == true`
  { isLoaded && <h2>Yes!</h2>}

• No if/else statements, use a conditional (ternary) operator:

  // this will only render the 'Yes' element if `isLoaded == true`, otherwised rendering the 'Nope' element
  { isLoaded ? <h2>Yes!</h2> : <h2>Nope!</h2> }

if and if/else statements are actually valid within React, however this codebase has an established pattern of using the above instead.