Cra-template-mag-react-template NPM

npm.io

mag-react-template

Libraries.io dependency status for GitHub repo

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:

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