{"id":360552,"date":"2018-12-04T09:28:23","date_gmt":"2018-12-04T17:28:23","guid":{"rendered":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=360552"},"modified":"2018-12-04T11:34:58","modified_gmt":"2018-12-04T19:34:58","slug":"using-react-with-the-arcgis-api-for-javascript","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-react-with-the-arcgis-api-for-javascript","title":{"rendered":"Using React with the ArcGIS API for JavaScript"},"author":7531,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[22941],"tags":[96582,267102,36161,43621],"industry":[],"product":[36831,36601],"class_list":["post-360552","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-arcgis-api-for-javascript","tag-react","tag-web-development","tag-webpack","product-js-api-arcgis","product-developers"],"acf":{"short_description":"A short overview of how to use React with the ArcGIS API for JavaScript to build your applications.","flexible_content":[{"acf_fc_layout":"content","content":"

The ArcGIS API for JavaScript<\/a> is a powerful library that you can use to build applications that leverage the power of the ArcGIS Platform<\/a>. While you can use the ArcGIS API for JavaScript on its own to build compelling web mapping applications, some developers choose to integrate it with other JavaScript libraries and frameworks (in particular with larger web applications).<\/p>\n

React<\/a> is a popular open source JavaScript library that is used for building reusable UI components for web applications. It is fast and simple and pairs really well with the ArcGIS API for JavaScript, which is why this implementation pattern is becoming popular among many developers.
\nThis blog is a brief overview on how you can get started using React with the ArcGIS API for JavaScript. You can also check out the guide page<\/a> in the documentation to learn more about working with React, and libraries and frameworks.<\/p>\n

Getting Started<\/h2>\n

You can view the source code for the application we are going to review on github<\/a>. For this application, we are going to use the @arcgis\/webpack-plugin<\/a> to help us integrate the ArcGIS API for JavaScript into our application.<\/p>\n

A best practice is to isolate the work of the API from the UI components that you are going to build. This is nice way to maintain a separation of concerns in your development.<\/p>\n

In this example, we are going to do the work of creating our map in data\/app.js<\/code>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":360712,"id":360712,"title":"jsapi-react-appjs","filename":"jsapi-react-appjs.png","filesize":82262,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/11\/jsapi-react-appjs.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-react-with-the-arcgis-api-for-javascript\/jsapi-react-appjs","alt":"jsapi react app","author":"7531","description":"","caption":"data\/app.js","name":"jsapi-react-appjs","status":"inherit","uploaded_to":360552,"date":"2018-11-16 23:00:29","modified":"2018-11-16 23:03:00","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":496,"height":899,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/11\/jsapi-react-appjs.png","thumbnail-width":110,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/11\/jsapi-react-appjs.png","medium-width":144,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/11\/jsapi-react-appjs.png","medium_large-width":496,"medium_large-height":899,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/11\/jsapi-react-appjs.png","large-width":496,"large-height":899,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/11\/jsapi-react-appjs.png","1536x1536-width":496,"1536x1536-height":899,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/11\/jsapi-react-appjs.png","2048x2048-width":496,"2048x2048-height":899,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/11\/jsapi-react-appjs.png","card_image-width":257,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/11\/jsapi-react-appjs.png","wide_image-width":496,"wide_image-height":899}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Looking at this code snippet, you can see that this is where we create our map and view, except we do not attach our view to the page right away. We export a function called initialize<\/code> that takes an argument for the container, which is a DOM element where our MapView will be displayed. This DOM element will come from the React component that we will write.<\/p>\n

The Component<\/h2>\n

For our WebMap<\/code> component, we are going to take advantage of a brand new feature to React called hooks<\/a>. Hooks are still a React proposal and are scheduled to be finalized in early 2019<\/a>, so I wouldn’t recommend using them in production just yet, but I thought it would be fun to use them for this example.<\/p>\n

There are numerous React hooks you can use, but for our purposes we are only concerned with two.<\/p>\n