AnsweredAssumed Answered

Esri elements and react js

Question asked by endlessdsire on Mar 9, 2016
Latest reply on Dec 1, 2016 by TWayson-esristaff


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(username, password);

//Part 1, accessing with a generic account to get the token
     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... " );
     error: (error) => {
       console.log("Error  : The main account is having some issue, please notify to the administrator ");


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

    var genericAccount = {
      username: 'myusername',
      client: 'requestip'

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

    genericLogin(genericAccount, userValue, passValue);

    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 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>

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


My index.html


<html lang="es">


    <meta charset="utf-8">

    <title>React JSAPI</title>

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

    <link rel="stylesheet" type="text/css" href="arcgis_js_api/library/3.16/3.16/dijit/themes/tundra/tundra.css"/>

    <link rel="stylesheet" type="text/css" href="arcgis_js_api/library/3.16/3.16/esri/css/esri.css" />

    <link rel="stylesheet" type="text/css" href="css/login.css"/>



      <section id="myLogin"></section>

      <script type="text/javascript" src="arcgis_js_api/library/3.16/3.16/init.js"></script>

      <script src="static/js/vendor/jquery-2.2.1.min.js"></script>

      <script src="bundle.js"></script>