mag-react-template

MAG React Template for ArcGIS API JavaScript with create-react-app

This repo is a Maricopa Associations of Governments (MAG) template to create a react project using all of the features of Create React App.

:key: Keywords

react react-template create-react-app cra-template template mag maps

:gear: Installation

When creating a new react-project, run the following command:

Install with npx

npx create-react-app [my-app-name] --template mag-react-template

$ yarn create-react-app [my-app-name] --template mag-react-template

[my-app-name] should be changed to the actual name of your project and must follow the convention package.json guidelines.

package.json Guidelines

Output

Running this commands will create a directory called [my-app-name] inside the current folder. Inside that directory, it will generate the initial project structure and install the dependencies:

[my-app-name]

├── README.md
├── LICENSE
├── config-overrides.js
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── images
|   |   |── images
|   |   |   └── favicons
│   ├── favicon.ico
│   ├── google.html
│   ├── humans.txt
│   ├── index.html
│   ├── LICENSE
│   ├── manifest.json
│   ├── robots.txt
│   └── images
|       |── images/favicons
└── src
    ├── components
    |   |── Layers
    |   |── Map
    |   |   |── map.scss
    |   |   |── map.js
    |   |   |__ package.json
    |   |── Widgets
    |   |   |── basemapToggleWidget.js
    |   |   |── homeWidget.js
    |   |   |── locateWidget.js
    |   |   |── logoWidget.js
    |   |   |── searchWidget.js
    |   |   |── widgets.scss
    |   |   |__ zoomWidget.js
    ├── config
    ├── context
    |   |── DataContext.js
    ├── images
    |   |── various images
    ├── styles
    |   |── colors.scss
    |   |── typography.scss
    |   |── App.scss
    |   └── index.scss
    ├── App.js
    ├── App.test.js
    ├── index.js
    ├── reportWebVitals.js
    └── setupTests.js

Get Started

Once the installation is done, you can open your project folder:

cd [my-app-name]

In the project directory, you can run:

npm start

Runs the app in development mode. Open http://localhost:3000 to view it in the browser.

The page will automatically reload if you make changes to the code. You will see the build errors and lint warnings in the console.

Version

version | 1.5.4

• Updated | 2023-04-10

• Created | 2021-05-18

Releases will be numbered with the following format:

<major>.<minor>.<patch>

And constructed with the following guidelines:

1. MAJOR version when you make incompatible API changes bumps the major resets minor and patch
2. MINOR version when you add functionality in a backwards-compatible manner bumps the minor resets patch
3. PATCH version when you make backwards-compatible bug fixes and misc changes bumps only the patch

Technologies

A list of technologies used within the project:

• Create React App
• React-Bootstrap

Requirements

Use of the ArcGIS API for JavaScript is subject to the terms described in the product-specific terms of use. Learn more about licensing here.

Resources

This repo demonstrates how to use @arcgis/core ES modules with create-react-app.

For additional information, see the Build with ES modules Guide topic in the SDK. This project was bootstrapped with Create React App. Good YouTube Video: Create React App Templates - Learn how to create your own template for CRA

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

:star: Credits

Maricopa Association of Governments (MAG) and the MAG member agencies

:zap: Disclaimer

• DISCLAIMER

:warning: Licensing

Copyright 2023 Maricopa Association of Governments (MAG)

This project is licensed under the MIT license.

(Back to top)