Esri elements and react js

EvelynHernandez · ‎03-09-2016

Hi,

I am a little bit confused in how to integrate the arcgis api in my project.

I want to make a query to a servicelayer after the sucess ajax response, but i dont know how to integrate the api.

I am using react and reactdom, node, webpack, gulp, and I already installed the api in the server with the instructions provided by esri.

Can somebody guides me providing any example?

Thanks in advice

My working directory is:

The code in my main.js file is:

import React from 'react';
import ReactDOM from 'react-dom';




function genericLogin(genericAccount, username, password){
  var url = "myarcgis/arcgis/tokens/generateToken";


  console.log(genericAccount);
  console.log(username, password);

//Part 1, accessing with a generic account to get the token
  jQuery.ajax({
     type: 'POST',
     url: url,
     data: {
       username: genericAccount.username,
       password: genericAccount.password,
       client: genericAccount.client,
       format: 'json'
     },
     success: (success) => {
       //Part 2: when u get the token, make a query to the service layer and see if the user who tries to log in has access , if has it - >go to the next page.
        console.log("Success  : The generic account is working, verifying the user permissions... " );
        console.log(success);
     },
     error: (error) => {
       console.log("Error  : The main account is having some issue, please notify to the administrator ");
     }
  });


  console.log('done');
}


class LoginApp extends React.Component {
  constructor(){
    super();
    this.onClick = this.onClick.bind(this);
  }


  onClick(){
    var genericAccount = {
      username: 'myusername',
      password:'mypass',
      client: 'requestip'
    };


    var userValue = this.refs.username.value;
    var passValue = this.refs.password.value;


    genericLogin(genericAccount, userValue, passValue);
  }


  render(){
    return (
      <div className="wrapper">
        <img className="logo" src="images/mylogo.png" />


        <div className="login">
          <input className="login__input" ref="username" type="text" />
          <input className="login__input" ref="password" type="password" />
          <input className="login__submit" type="submit" onClick={this.onClick} />
        </div>


        <div className="footer">
          <img className="image-chq" src="images/chq_i.png" />
          <p className="footer__p">some info</p>
          <p className="footer__p">more info</p>
          <h6 className="footer__h6">address</h6>
        </div>
      </div>
    );
  }
}


ReactDOM.render(<LoginApp />, document.getElementById('myLogin'));

My index.html

<!DOCTYPE HTML>

<head>

<title>React JSAPI</title>

</head>

<body>

</body>

</html>

EvelynHernandez · ‎03-09-2016

Well im new trying to learn react. And i wasnt sure on for example, how to call the esri objects like : map, queries, querytasks, etc from the code.

I figure out asking to one of my friends who knows react on how to integrate the api and i change the code for ajax response to show for example how to put the map.

jQuery.ajax({
    type: 'POST',
    url: url,
    data: {
      username: genericAccount.username,
      password: genericAccount.password,
      client: genericAccount.client,
      format: 'json'
    },
    success: (success) => {
      console.log('here i need to call to a function for requesting service access');
      new esri.Map('myMapForTest', {
        center: [-118, 34.5],
        zoom: 8,
        basemap: "topo"
      });
    },
    error: (error) => {
      console.log("sumthing happen ):");
    }
  });


  console.log('done');
}

And in the html i just add a section:

I will see if the other esri elements like query , querytask , featurelayer , etc works like that.

View solution in original post

JordanBaumgardner · ‎03-09-2016

I'm new to react, but what you have there looks spot on to me. What is it doing? The token service is just a straight up rest call, and just eyeballing it - it looks good to me. What is the response telling you? Or is not even making the call?

EvelynHernandez · ‎03-09-2016

Well im new trying to learn react. And i wasnt sure on for example, how to call the esri objects like : map, queries, querytasks, etc from the code.

I figure out asking to one of my friends who knows react on how to integrate the api and i change the code for ajax response to show for example how to put the map.

jQuery.ajax({
    type: 'POST',
    url: url,
    data: {
      username: genericAccount.username,
      password: genericAccount.password,
      client: genericAccount.client,
      format: 'json'
    },
    success: (success) => {
      console.log('here i need to call to a function for requesting service access');
      new esri.Map('myMapForTest', {
        center: [-118, 34.5],
        zoom: 8,
        basemap: "topo"
      });
    },
    error: (error) => {
      console.log("sumthing happen ):");
    }
  });


  console.log('done');
}

And in the html i just add a section:

I will see if the other esri elements like query , querytask , featurelayer , etc works like that.

JordanBaumgardner · ‎03-09-2016

Ah, I understand much better now.

I think your struggling with a very technical issue with the tokens.

If we take that out of the equation by using some sample map services you would be able to place your map in your react code with no issues. Any of the basic examples would get you there.

Normal solution is to trigger your map init with the document load or your app load methods. Its in your MyMap.js code where you would myMap = new Map(....) and load the layers.

I suspect everything you were trying before failed because of the token.

However....

looks like the services you want to access are protected with tokens. An easy way to test would be to get a token manually with the HTML page and place that token in your map layers url directly.

You could also handle the token by using a proxy. There are several threads here on how to set that up.

EvelynHernandez · ‎03-09-2016

Yes, i will use the token cuz i already know that u can put them in the queries or layers when u want to load them, so not big deal with it.

Thanks for ur help and guidance

TomWayson · ‎12-01-2016

It seems like you've been able to answer your own question, but I want to mention that there are now a few repositories on GitHub that demonstrate good patterns for using the ArcGIS API in React applications built with webpack.

https://github.com/Robert-W/esri-redux

https://github.com/davetimmins/create-react-app-esri-loader/https://github.com/tomwayson/esri-react-router-example

https://github.com/davetimmins/create-react-app-esri-loader/

https://github.com/davetimmins/create-react-app-arcgis

Unlike the example code shown in this question, these repositories don't rely on using the deprecated `esri` global, which does not work w/ v4.x of the JSAPI.

If you want to understand more about how the patterns in those repositories work, I've written a blog post on using the ArcGIS API in applications built with webpack.